CSSの基礎 No.4 レイアウト

2010/04/30

CSSの基礎を学んだ経緯

CSSの基礎を新人に会社で教えることになった。そこで、ちょっと勉強したのでその記録に。

スタイルシートを適用する方法(CSSの基礎 No.1 適用方法)

指定した要素に適用する方法(CSSの基礎 No.2 セレクタ)

指定した要素に適用する方法(CSSの基礎 No.3 ブロック要素とインライン要素、CSSの継承)

Webページのレイアウトの歴史

スタイルシートを用いてWebページのレイアウトを構築する。

自分が始めてホームページを作った頃(1998年)は、フレーム(フレームレイアウト)を使い、tableタグを用いてのレイアウト(テーブルレイアウト)が主流だった。

今後、変化するかもしれないが現在はCSSを用いてのレイアウトが主流となっている。

2010年上期の段階でHTML5適用のブラウザも増えてきて、HTML5で構築されたWebページも増えてきている。

とは言いつつも最も普及しているのはHTML4.01とXHTMLで、div要素を用いてレイアウトを作成しているサイトが多いのが現状である。

レイアウト

まずはWebページをコーディングする前にレイアウトを決める必要がある。

Webページの画面設計、ワイヤーフレームを意識する必要がある。


ヘッダ、フッタ、コンテンツ内、メニュー……。画面の骨格を決めてから、レイアウトの作成に取り掛かること。

作成時には、大きなところから作成し、詳細を作っていくほうが効率が良い。

レイアウトについては、Webレイアウトで検索をしていただければよいページが山ほど見つかる。

書籍については、MdNがたくさんの本を出版しているので購入してみてはどうだろうか。

ちなみに自分もいくらか本を持っている。(WEBデザイン不朽の表現など)

CSSでのレイアウト基礎

CSSでのレイアウト基礎

ブロック要素を並べることでWebページを構築していく。

まずは、全体を囲む#wrapperを作成し、その中にヘッダ部の#header、内容を表示する#main、フッタ部の#footerを表示する。

class名やid名で悩んだ場合は、こんなページがあります。 もう、class名やid名で悩まないんだからっ!!|CSS HappyLife

  div#wrapper { background-color:#eeeeee;margin: 10px; }
  div#header { background-color:#ffaaaa;margin: 0 10px; }
  div#main { background-color:#aaffaa;margin: 0 10px; }
  div#footer { background-color:#aaaaff;margin: 0 10px; }
#wrapper
#header
#main
#footer

このブロックの中に内容を記述していけば完成する。

  div#wrapper { background-color:#eeeeee;margin: 10px; }
  div#header { background-color:#ffaaaa;margin: 0 10px; }
  div#main { background-color:#aaffaa;margin: 0 10px; }
  div#main.content1 { background-color:#44ff88;margin: 0 10px; }
  div#main.content2 { background-color:#88ff44;margin: 0 10px; }
  div#footer { background-color:#aaaaff;margin: 0 10px; }
#wrapper
#header
#main
content1
content2
#footer

2カラムレイアウト

メイン部分を2カラムのレイアウトで表示

2カラムレイアウトもブロック要素を並べることでWebページを構築していく点では同じである。

まずは前回と同様、全体を囲む#wrapperを作成し、その中にヘッダ部の#header、内容を表示する#main、フッタ部の#footerを表示する。

mainの中を、menuとcontentの2カラムで表示する。

  div#wrapper { background-color:#eeeeee;margin: 10px;width:500px;height:100px; }
  div#header { background-color:#ffaaaa;margin: 0 10px;width:400px;height:20px; }
  div#main { background-color:#aaffaa;margin: 0 10px;width:400px;height:40px; }
  div#footer { background-color:#aaaaff;margin: 0 10px;width:400px;height:20px; }
#wrapper
#header
#main
#footer

このブロックの中に内容を記述していけば完成する。

floatプロパティ

floatプロパティにleftを指定する。これで、floatプロパティにleftを指定した要素は左に配置することとなり、次の要素は右に配置されることとなる。

  div#wrapper { background-color:#eeeeee;margin: 10px;width:500px;height:100px; }
  div#header { background-color:#ffaaaa;margin: 0 10px;width:400px;height:20px; }
  div#main { background-color:#aaffaa;margin: 0 10px;width:400px;height:auto; }
  div#menu { background-color:#44ff88;margin: 0;float:left;width:100px; height:20px; }
  div#content { background-color:#88ff44;margin: 0;float:left;width:300px; height:40px; }
  div#footer { background-color:#aaaaff;margin: 0 10px; clear:both;width:400px;height:20px;}
#wrapper
#header
menu
content
#footer

float:left

つまり、float:leftを用いることで、右側に次の要素を配置することができる。

  div#box1 { background-color:#ffeeee;width:50px;height:50px;float:left; }
  div#box2 { background-color:#eef0f0;width:50px;height:50px;float:left; }
  div#box3 { background-color:#eeffee;width:50px;height:50px;float:left; }
  div#box4 { background-color:#eeeeff;width:50px;height:50px;float:left; }

box1
box2
box3
box4

float:right

逆に、float:rightを用いることで、左側に次の要素を配置することができる。

  div#box1 { background-color:#ffeeee;width:50px;height:50px;float:right; }
  div#box2 { background-color:#eef0f0;width:50px;height:50px;float:right; }
  div#box3 { background-color:#eeffee;width:50px;height:50px;float:right; }
  div#box4 { background-color:#eeeeff;width:50px;height:50px;float:right; }

box1
box2
box3
box4

3カラムレイアウト

clearプロパティ

clearプロパティにbothを指定する。これで、floatプロパティで指定した設定をクリアすることができる。

  div#box1 { background-color:#ffeeee;width:50px;height:50px;}
  div#box2 { background-color:#eef0f0;width:50px;height:50px;float:left; }
  div#box3 { background-color:#eeffee;width:50px;height:50px;float:right; }
  div#box4 { background-color:#eeeeff;width:auto;height:50px;float:none; }
  div#box5 { background-color:#f0eef0;width:50px;height:50px;clear:both; }

box1
box2
box3
box4
box5

何気にbox2,box3,box4の3カラムレイアウトができている。

この場合、box4をfloat:none;を指定し、width:auto;に指定することで、自動的に同一ブロック内で幅を自動的に拡張している。

clearプロパティは複数りようすることがあるため、idセレクタで宣言するのではなくクラスセレクタを用いて記述されることが多い。

  .clear { clear:both; }
以下のようにクラスセレクタの子要素の線を非表示にして利用されることもある。
  .clear { clear:both; }
  .clear hr { display:none; }
<div class="clear"><hr></div>

こうしておけば、線は表示されませんが編集時にhr要素によって区切りがわかりやすい。

ソリッドレイアウト、リキッドレイアウト

Webページのレイアウトを決めていく上で、サイズを固定長にするか、ブラウザのウインドウサイズに合わせてサイズを可変にするか、どちらか選択する必要がある。

ソリッドレイアウトでは横幅を固定するため、閲覧者の解像度によって受け取るイメージが変わってしまう。

例えば大型のディスプレイで見た場合にはコンテンツの表示部分が小さく見えてしまい、こじんまりとしたイメージを与えてしまう。さらに、表示する横幅未満の解像度の場合には横スクロールをしないと本文が読めなくなってしまうデメリットがある。

リキッドレイアウトではコンテンツの表示部分の大きさを閲覧者の解像度によって変化させるため、コンテンツを広げて表示することができる。さらに、リキッドレイアウトの中には、文字サイズの変更によってレイアウト幅が可変するエラスティックレイアウトと言うものがある。

しかし、デメリットとしてリキッドレイアウトの場合はウインドウサイズを小さくすることで表示が崩れてしまうことも多く、また、ウインドウサイズを広げすぎると余白があきすぎて間抜けなレイアウトとなってしまうため、一概にリキッドレイアウトにすべきと言うわけにも行かない。

上記の問題の対応策として CSS の min-width、max-widthプロパティを利用するという方法がある。ただし、過去の負の遺産の対応状況などの問題がある。

2010/04/30
ページのトップへ戻る