wulin.com HTMLチュートリアル列に戻るには、ここをクリックしてください。 CSSチュートリアルを閲覧したい場合は、ここをクリックしてください。
上：マークアップ言語 - 画像の交換。第15章<body>のスタイルを指定します
コンテンツと表示効果を個別に設定する利点の1つは、柔軟性です。 CSSを使用してWebサイトのレイアウト（第12章で使用される方法）を制御することにより、Webサイト全体の設計要素を制御し、いくつかのルールを変更し、すぐに数千ページを劇的に更新できます。
CSSを使用してレイアウトを制御する便利な例の1つは、<body>のスタイルを指定することです。クラスまたはIDを<body>タグに追加することで、ページ上の任意のタグをカスタマイズできます。繰り返される定義の問題はまったくありません。
この章では、<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 = header>
...ヘッダー情報はこちら...
</div>
<div id = content>
...ここのコンテンツ...
</div>
<div id =右>
...右の列情報...
</div>
<div id = footer>
...フッター情報...
</div>
CSSルールを#contentおよび#footerに加えて、絶対的な位置決め方法を使用して#rightに入れるのに十分な右右パッチを使用します。この例では、190ピクセルで十分です。
#content、#footer {
マージン：10px 190px 10px 10px;
}
インデックスページの場合、マークアップ構造はまったく同じであるため、共有CSSルールをコピーする必要はありませんが、＃Contentの左側に3番目の列（#Left）として追加<div>が追加されます。
<div id = header>
...ヘッダー情報はこちら...
</div>
<div id = content>
...ここのコンテンツ...
</div>
<div id =左> ...左の列情報... </div> <div id =右> ...右の列情報... </div><div id = footer>
...フッター情報...
</div>
この3列構造の場合、＃Contentと#Footerに右外のパッチを設定して右の列に対応するだけでなく、新しく追加された左列に対応するために左外のパッチを設定する必要があります。
ただし、左外のパッチは、ダブル列のみがあるプリセットテキストページレイアウトと一致する10ピクセルに設定されています。
うわー、私たちは立ち往生しています、どうすれば続けるべきですか？読み続けてください。
前のページ1 2 3次のページ全文を読む