このページをクリップ


当サイトでは大まかに言ってページを上図のようなパーツにdivで分割して、CSSで3カラムで組んでいます。

1はページ上部のテキスト部分
2は1以外の下記の3、4、5、6、7、8の部分を含む部分
3はヘッダー部分
4はメインカラム(5)と左側カラム(6)を含む部分
7は右側のカラムの部分。
8フッター部分

と8つのパーツからなっています。

各パーツの配置の考え方

パーツの配置の方法というのは、いろいろな方法がありますが、当サイトではシンプルな3カラムの配置にしています。 2のパーツは、1以外の部分をまとめる役割を果たしています。

4、5、6、7の部分ではfloatを使って左右に配置しています。4は左、4の中で5は右、6は左、7は右詰めで配置しています。

最後の8のパーツ部分でfloatをclear: both;で解除してセンター配置に戻しています。

1以外の全体を含む2の部分はセンター配置にしています。(marginのrightとleftをautoに設定)

次にこの配置を実際にCSSで組むにはどうするかという説明をしていきます。

  • サイト
  • facebook
  • twitter

PCからタブレット、スマホまで対応いたしました。ガラケーもとりあえず対応しております。

Macに要求するものはどれ?


* (2票)

* (票)

* (票)

* (1票)

* (票)