CSSを使えばレイアウトも簡単です。テーブルレイアウトに慣れていると、最初は難しいかもしれません。それは難しいことではありません。動機が異なるだけで、実際にはより理にかなっています。
どのセクションを選択しても、このページの各セクションを別個のセクションとして扱うことができます。このブロックをそのブロックに絶対的にまたは相対的に置き換えることができます。
位置決め
属性のpositionは、要素が絶対的、相対的、静的、または固定的であるかどうかを定義するために使用されます。
静的値は要素のデフォルト値であり、HTML に表示される通常の順序で生成されます。
relative は static に似ていますが、top、right、bottom、left プロパティを使用して元の位置をオフセットできます。
Absolute は、要素を HTML の通常のフローから分離し、要素を完全に独自の位置決めの世界に送信します。このちょっとクレイジーな世界では、この絶対的な要素は上下左右の値が設定されていればどこにでも配置することができます。
また、Fixed は絶対と同様に動作しますが、ページを基準にしてブラウザ ウィンドウを基準にして絶対要素を配置するため、理論上、ページがスクロールしても固定要素はブラウザのビューポート内に完全に残ります。理論的にはなぜですか?少なくとも、Mozilla と Opera では正常に動作しますが、IE では動作しません。
絶対配置レイアウトの使用
HTML で次のようなルールを使用することにより、絶対配置を使用して従来の 2 列レイアウトを作成できます。
ソース コードの例 [www.52css.com]
<div id="navigation">
<ul>
< li ><a href="this.html">これ</a></li>
<li><a href="that.html">あれ</a></li>
<li><a href= " theOther.html">The Other</a></li>
</ul>
</div>
<div id="content">
<h1>Ra ra バンジョー バンジョー</h1>
<p>Ra ra へようこそバンジョー バンジョー ページ。ラ ラ バンジョー バンジョー。</p>
<p>(ラ ラ バンジョー バンジョー)
。
次の CSS を適用します。
ソース コードの例 [www.52css.com]
#navigation {
position: abstract; left: 0;
}
#content
{
margin-left: 10em
;長さ 10em のナビゲーション バーが左側に設定されます。ナビゲーションは絶対的に配置されるため、ページの残りの部分のフローには影響を与えません。そのため、コンテンツ領域の左境界線の幅をナビゲーションの幅と同じに設定するだけで済みます。バー。
とても簡単です！ただし、この 2 列のアプローチに制限されるものではありません。スマートな配置により、必要な数のブロックをレイアウトできます。たとえば、3 番目の列を追加する必要がある場合は、HTML に「navigation2」ブロックを追加し、次の CSS を適用
でき
ます
。
left: 0; width: 10em;
}
#navigation2 {
位置: 絶対; right: 0;
}
#content {
margin: 0 および right と left を設定します。 margin to 10em */
}
要素を絶対配置することの唯一の副作用は、要素が独自の世界に存在するため、最終的にどこに配置されるかを正確に決定する方法がないことです。上記の例をナビゲーションが少なく、コンテンツ領域が多い領域で使用する場合は問題ありませんが、特に長さと幅に相対値を使用する場合は、下に脚注のようなものを配置することを諦めなければならないことがよくあります。本当にそうしたい場合は、絶対に配置するのではなく、フロートさせてください。
Float
Floating は要素を同じ行の左または右に移動し、周囲のコンテンツはフローティングします。
フローティングは、ページ内に小さな要素を配置するためによく使用されます (このサイトの元のデフォルト CSS では、HTML 基本ガイドと CSS 基本ガイドの「次のページ」リンクは右側にフロート表示されます。以下も参照してください: first-in pseudo-elements文字の例) だけでなく、ナビゲーション列などの大きなブロックでも使用できます。
次の HTML の例では、次
の CSSを
適用できます。
ソース コードの例 [www.52css.com]
#
navigation2 {
float
:
right;
}
margin: 0 10em;
}
次の要素が浮動オブジェクトの周囲に回り込まないようにする場合は、clear プロパティを使用できます。 Clear: left は左側の要素をクリアし、clear: right は右側の要素をクリアします。clear: Both は左側と右側の要素の両方をクリアします。したがって、たとえば、ページ フッターが必要な場合は、ID が「footer」である HTML にブロックを追加して、次の CSS を使用
でき
ます
。
}
はい、わかりました。脚注は、列の長さに関係なく、すべての列の下に表示されます。
ページの「大きな」ブロックに重点を置き、一般的な位置決めとフローティング
について説明
しましたが、これらのメソッドはそれらのブロック内の任意の要素にも使用できることに注意してください。配置、フローティング、ボーダー、パディング、ボーダーを組み合わせることで、レイアウトに関しては CSS なしではテーブルでできることは何もありません。
テーブル レイアウトを使用する唯一の理由は、古いブラウザに対応したい場合です。ここで CSS が実際に進歩を示します。ユーザビリティの高いページは、テーブルベースのページのファイル サイズのほんの一部です。