CSSでレイアウト

html5でざっとマークアップしてきましたが皆さんが普段ご覧になられているホームページに比べるとなんとも味気ない仕上がりになっています。それはレイアウトもデザインもhtmlにマークアップするだけではできないからです。あくまでもhtmlは構造の担当者なのです。デザインやレイアウトの担当はCascading Style Sheet （カスケーディング・スタイルシート）です。略されてCSSやスタイルシートと呼ばれています。CSSでレイアウトする前にまずラフデザインを起こします。

コンテンツの内容は下図のサンプルサイトでマークアップした内容と同じものです。

スタイルシートをhtmlに読み込む。

これからレイアウトをスタイルシートに記述していきます。基本的にスタイルは拡張子が.cssのスタイルシートに記述します。htmlに書き込むこともできますが、管理が不便になりますし、他のページで使い回せないので外部ファイル化します。 以前つくったwwwフォルダ内にcssと言うフォルダを作成し、新規でテキストファイルをつくりstyles.cssと名付けてcssフォルダに保存します。 以前つくったindex.htmlのhead内に
<link rel="stylesheet" type="text/css" href="css/styles.css">
を追記します。

これでstyles.cssを読み込む準備ができました。

CSSを読み込む準備ができたところでラフデザインを再現するためのマークアップを見直しました。下図のようになります。

前回マークアップしたものにdivというタグを追加しました。緑色の箇所です。divタグはそれ自体に意味を持たないタグでレイアウトによく使われます。