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

 

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

 

まず、HPを作るとき、そのページのhtmlに必要な情報を考えます。その時に、イメージでどの部分に何を表示するか、頭の中や紙の上、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が60%だった場合右に入るdivを40%以下になっていれば横に並びます。*マージンがない場合。そのあと、デザインにそって、マージンやパディングを調整して、またwidthの調整をすればきれいにデザインできるでしょう。また、上の要素の空きスペースが下の要素より大きかった場合下にずれるはずです。

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

 

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