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

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

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

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

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

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

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

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

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

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

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

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

• メインタイトル
• タグライン
• キービジュアル
• サイトナビゲーション(閲覧補助：利用規約、サイトマップ等へのリンク)
• グローバルナビゲーション(サイトのコンテンツへのリンク)
• ローカルナビゲーション（カテゴリー内の中分類、小分類でまとめたリンク）
• パンくずリスト
• メインコンテンツ
• 検索窓

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

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

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

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

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

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カラムレイアウトもブロック要素を並べることで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

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要素によって区切りがわかりやすい。

• 固定（ソリッド）レイアウト

  横幅固定のレイアウト。

• 可変（リキッド）レイアウト

  ブラウザのウィンドウサイズに合わせて、伸縮するレイアウト。

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

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

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

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

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