ホームページの作り方

CSSを使ったスタイリッシュなページ作り(HTML/CSS入門)

このページでは、CSS(カスケーディング・スタイル・シート)による画面レイアウト方法を紹介しています。

<<前へ(CSSスタイル)    <ページの先頭へ>    次へ(スタイル例)>>

ID要素の設定

「CSSスタイルシート」では、ページ内にひとつしかない要素(例えば「タイトル」)をIDとして定義し、何度も出てくる要素(例えば「章」)をclassとして定義します。

このような考えに基づいて、ホームページのレイアウトを考えると、例えば以下のようなレイアウトが考えられます。

id=title
id=side_menu


メニュー


id=contents


文章


id=footer

レイアウトは、これらのID毎にスタイルをCSSスタイルシートで定義してやり、HTML側では<div id=xxxx>と呼び出すことで実現できます。

IDに対するスタイルシート書式は、以下のようになります。

#ID名 {
   "アトリビュート名" : 値;
   "アトリビュート名" : 値;
   "アトリビュート名" : 値;
          :
}

例えばcontentsというIDの指定では以下のようになります。

#contents {
   width : 580px ;
   float : right ;
}

このように設定することで、580ピクセルの固定幅で(width:580px)、右側に段組される(float:right)レイアウトが出来上がります。

CSSでレイアウトするときにでてくる新しいアトリビュートである「float」要素は、左右の段組を行うために使います。

<<前へ(CSSスタイル)    <ページの先頭へ>    次へ(スタイル例)>>