その時に必要になるのが、寸法です。
可変にする方法もありますが、まずは固定で考えましょう。
px（ピクセル）という単位です。
画面は色々ありますが、現在では、携帯型のネットワーク・ノートパソコンでも、横幅が1024pxあります。
ですから、横スクロールしない程度に収めるのであれば、横幅は1000px以内にすればいいですね。
ちなみに、当社のHPや様々な販売頁は、ほとんど横が800pxにして、その中で左に１列サイドバーをとってそれを180pxぐらいにしています。図のようなイメージです。
自分でお好みのパターンやサイズを探っていきましょう。
このそれぞれの枠を、仮に「ブロック」と呼ぶことにしましょう。
それで、それぞれのブロックに、コンテンツをきちんと詰めていけばいい訳です。
では、ここで、その寸法をそれぞれのdivタグに埋め込んでいきましょう。（ちょっと細かくなりますが、我慢してくださいね。）
<div style="width:800px">
<div style="width:800px; background-color:yellow;">
あ
</div>
あ
</div>
<div style="width:180px; background-color:cyan; float:left;">
い
</div>
い
</div>
<div style="width:620px; background-color:green; float:right;">
う
</div>
う
</div>
<div style="width:800px; background-color:yellow; clear:both;">
え
</div>
え
</div>
</div>
<div>と</div>は必ず対になりますから、一番最初と一番最後のペアが頁全体の枠を表しています。
その中の「あ」という文字が入っている枠が、ヘッダの黄色いブロック。
次の「い」という文字が入っている枠が、左サイドの水色のブロック。
次の「う」という文字が入っている枠が、右側の大きな緑色のメインブロック。
最後に「え」という文字が入っている枠が、一番下の黄色いブロックになります。
大きな枠の中に４つの枠が入れ子になっているのが分かると思います。
そして、それぞれのdivタグの中に、style=という形で、寸法と背景色（バックグラウンドカラー）、そして、floatという属性が書き込まれています。
（スタイルシートの記述は、上部にまとめて記述するか、または別ファイルにするのがメンテし易いと言われておりますが、ここでは理解する為に、それぞれの中に記述する方法をとります。）
floatというのは、つまりは、その枠をどちらに「寄せる」かという意味になります。
leftと指定すれば、左寄せ、rightと指定すれば、右寄せになります。
ここでは、左サイドのブロックを左寄せ、緑色のメインブロックを右寄せして、形を整えています。
そして、最後の黄色いブロックには、clear:both という指定がしてあります。
これは、左右寄せをやめるという意味になります。
この、左寄せ、右寄せ、クリアをきちんと使い分けることにより、変なズレがなくなります。
もし、float:left と float:right をはずしたら、どうなるのでしょうか。
こんな風に、全てが縦に並んでしまうのです。
これがhtmlの既定だからです。縦に並べようとするのが、基本になります。
メインブロックは、きっちり収まる620pxを指定しているので、左寄せでも結果は変わりませんが、幅をそれより狭くしている場合には、メインブロックの左右どちら側に隙間が空くかが違ってきます。
実際に試してみてください。
また、縦幅は寸法を指定していません。
これは、コンテンツの量によって可変になるという事を意味しています。
トップやボトム部などは、幅指定する場合も多いのですが、メインコンテンツについては通常縦幅の指定はせずに、コンテンツの量によって伸び縮みさせるのが一般的ではないでしょうか。
ちなみに、それぞれのブロックを「フレームを切る」という手法で分離する方法がありますが、これは、各フレームが独立した形で認識されてしまう為、推奨されず、最近ではあまり使われなくなった手法になりました。
今日は、ここまで。
- - - - - - - - - -
Ads by Ompooooooooookan
記事クリエイター http://ompookan.jp/shop2/kiji01.html
効率の良いホームページ作成ツールはこちら