HOME

body要素

文書の最上位(本当はhtml要素が最上位)である<body>要素を基点としてひとつだけ指定すれば、下位のあらゆる要素(ページまたはサイト全体のレイアウト、デザイン、スタイルなど)をコントロールできる。

同じサイトでの、二段組と三段組のレイアウト

インデックスページ:ナビゲーション用
三段レイアウト
記事ページ:インデックスからのリンク先
二段レイアウト
記事ページ

マークアップ

段組レイアウトを実現するために、絶対配置を使用(12章参照)

<div id="header">
  ・・・ヘッダ・・・
</div>

<div id="content">
  ・・・コンテンツ・・・
</div>

<div id="right">
  ・・・右カラム・・・
</div>

<div id="footer">
  ・・・フッタ・・・
</div>

CSS

#rightカラムを配置するのに十分な右マージン(ここでは190ピクセル)を#contentと#footerに指定する。

#content, #footer {
	margin: 10px 190px 10px 10px;
	}
インデックスページ

マークアップ

マークアップ構造は記事ページとまったく同じ。
#contentの左にもうひとつ別のカラム(#left)のための</div>を追加する。

<div id="header">
  ・・・ヘッダ・・・
</div>

<div id="content">
  ・・・コンテンツ・・・
</div>

<div id="left">
  ・・・左カラム・・・
</div>

<div id="right">
  ・・・右カラム・・・
</div>

<div id="footer">
  ・・・フッタ・・・
</div>

CSS

マークアップ構造が同じなので、CSSルールをコピーする必要はない。
ところが、、、
右カラムを収めるための右マージンが#contentと#footerに必要なことは同じだが、左カラムを収めるための左マージンも必要となる。
記事ページのCSSで設定した10ピクセルの左マージンを上書きするために、<body>要素にclass属性を書き加え、インデックスのページであることを示すことにより、固有のルールを作成する。

<body class="index">

#content, #footer {
	margin: 10px 190px 10px 10px;
	}
#body.index #content, body.index #footer {
	margin-left: 190px;
	}

▲このページのトップへ

カラム以外の用途として

ページ上にあるどんな要素もカスタマイズすることができる。

見出しの色を変える

CSS

すべてのページにデフォルトカラーを宣言する。
インデックススタイルのページにだけ次の宣言を適用する。
デフォルトと異なるルールだけを追加すればよい。

h1 {
	font-size: 140%;
	color: purple;
	}
body.index h1 [
	color: orange;
	}

▲このページのトップへ

クラス属性を追加することによるナビゲーションリスト

<body>要素に添付したid属性を使用して、ユーザがどのページにいるかを示すナビゲーションを変化させる

1章のおさらい

マークアップ

<ul id="minitabs">
    <li><a href="/apples/">Apples</a></li>
    <li><a href="/spaghetti/">Spaghetti</a></li>
    <li><a href="/greenbeans/">Green Beans</a></li>
    <li><a href="/milk/">Milk</a></li>
</ul>

CSS

#minitabs {
	margin: 0;
	padding: 0 0 20px 10px;
	border-bottom: 1px solid #9fb1bc;
	}
#minitabs li {
	margin: 0;
	padding: 0;
	display: inline;
	list-style-type: none;
	}
#minitabs a {
	float: left;
	line-height: 14px;
	lont-weight: bold;
	padding: 0 12px 6px 12px;
	text-decoration: none;
	color: #708491;
	}
#minitabs a:hover {
	color: #000;
	background: url(tab_pyra.gif) no-repeat bottom center;
	}

現在位置を示すために<a>にクラス属性を追加する

<li><a href="/spaghetti/" class="active">Spaghetti</a></li>

#minitabs a.active {
	color: #000;
	background: url(tab_pyra.gif) no-repeat bottom center;
	}
<body>タグを利用して、マークアップに手を加えずにユーザがいるページを示す方法

マークアップ

<li>タグにid属性を追加する

<ul id="minitabs">
    <li id="apples_tab"><a href="/apples/">Apples</a></li>
    <li id="spag_tab"><a href="/spaghetti/">Spaghetti</a></li>
    <li id="beans_tab"><a href="/greenbeans/">Green Beans</a></li>
    <li id="milk_tab"><a href="/milk/">Milk</a></li>
</ul>

<body>要素にidを追加する

<body id="apples">

または

<body id="beans">

などなど・・・

CSS

タブをライトアップするためには、どのid名が<body>にあるかに応じて、個々の組み合わせについてそうするように伝えるCSS宣言を書く

body#apples #apples_tab a, body#spag #spag_tab a, body#beans #beans_tab a,
body#milk #milk_tab a {
	border-bottom: 4px solid #696;
	padding-bottom: 2px;
	color: #000;
	}

▲このページのトップへ