ＨＰをfloatとwidthを使った、簡単なレイアウトの仕方。

こんにちわ、下っ端の下っ端です。

今日はＨＰを作るうえでの見た目の配置の制御の仕方の簡単な話をしたいと思います。

まず、ＨＰを作るとき、そのページのｈｔｍｌに必要な情報を考えます。その時に、イメージでどの部分に何を表示するか、頭の中や紙の上、wordなどにデザインします。そしたら、まず一つだけ、全画面表示でやるのか、大きさをPXで指定してやるのかを決めます。決まったら、bodyまたは、その下にブロック<div>(idはcontainerがわかりやすいでしょう)CSSにwidthを指定ます。全画面なら100％、一般的なPCの最小サイズに合わせるなら、980PX。今回は980PXに重点をおいて説明します。（全画面でも考え方は変わらない部分もあります）

ここからが、主題で、header、article、div、section、aside、footerなどの中身を囲う要素にCSSでfloatなど（ここではfloatを使います。）をかけ、CSSでWidthでPXや％を変えながら、デザインに近い大きさにしていきます。この時、要素にボーダーやバックグラウンドカラーを入れるとわかりやすいでしょう。そして、すべての要素がデザインに近い大きさになったとき、htmlの順番があっていれば、各要素がぴっちり入っていきます。

つまり例えば、左のdivが６０％だった場合右に入るdivを４０％以下になっていれば横に並びます。＊マージンがない場合。そのあと、デザインにそって、マージンやパディングを調整して、またwidthの調整をすればきれいにデザインできるでしょう。また、上の要素の空きスペースが下の要素より大きかった場合下にずれるはずです。

これを利用して次の段へ次の段へと設定していけばいいでしょう。

これが、初めてWEBサイト作り始めた方の参考になれば幸いです。

Follow me!