マークアップ言語 -

123WORDPRESS.COM HTML チュートリアルセクションに戻るには、ここをクリックしてください。 CSS チュートリアルを表示するには、ここをクリックしてください。
上記:マークアップ言語 - 画像の置換。第 15 章 <body> のスタイルの指定コンテンツと表示を分離する利点の 1 つは柔軟性です。CSS を使用して Web サイトのレイアウトを制御することで (第 12 章で使用した方法)、Web サイト全体のデザイン要素を制御できます。いくつかのルールを変更するだけで、数千のページを一度に大幅に更新できます。
CSS を使用してレイアウトを制御することの便利さを示す例の 1 つは、<body> にスタイルを指定することです。<body> タグにクラスまたは ID を追加することで、ページ上の任意のタグをカスタマイズできます。定義の繰り返しを心配する必要はありません。
この章では、<body> タグにクラスを追加することで、同じマークアップ構造を使用して 2 つの異なるレイアウト構成を切り替える方法について説明します。2 列または 3 列のレイアウトは、CSS レイアウト手法を使用して Fast Company の Web サイトを再設計したときのようなものです。課題の 1 つは、すべてのページで同じナビゲーションとフッター領域が共有されているにもかかわらず、2 つの異なるレイアウトを作成する必要があることです。
最初のレイアウトは「インデックスページ (ホームページ)」です (図 15-1 を参照)。これはナビゲーション機能を備えたページであり、ユーザーは Web サイトのディレクトリ構造をドリルダウンし続けることができます。これらのページでは、3 列のレイアウトを使用することにしました。

図 15-1 Fast Company の 3 列の「インデックスページ」は、2 番目のページレイアウト、つまり「コンテンツページ」を示しています (図 15-2)。目的地のように感じられるページはすべてこのレイアウトを使用します。読みやすさを向上させるために、左の列を省略して 2 つの列 (1 つの大きな列をコンテンツ用、もう 1 つを広告用) を残すことにしました。

図 15-2 Fast Company の 2 列の「コンテンツページ」の例。
これを説明する理由は、ページレイアウトの大きな謎を解いたことを証明するためではなく、<body>タグにクラスを追加することで、列の幅を調整し、ページ形式に応じて3番目の列を配置または省略できることを実証するためです。このような効果を作成する場合、ルールはまったく繰り返されず、追加のスタイルシートも導入されません。マークアップとスタイル構造2つのページで共有されるマークアップ構造の説明を開始すると、これらの説明が意味をなすようになります。列レイアウトを実現するために、第12章で説明した絶対配置方法が使用されます。コンテンツページの簡略化されたマークアップ構造は次のようになります。

<div id="ヘッダー">
...ヘッダー情報はここにあります...
</div>
<div id="コンテンツ">
...コンテンツはここにあります...
</div>
<div id="right">
...右列の情報...
</div>
<div id="フッター">
...フッター情報...
</div>

CSS ルールを使用して、絶対配置を使用して #right に収まる大きさの右外側パッチを #content と #footer に追加します。この例では、190 ピクセルで十分です。