CSSレイアウトを勉強していますか？まだ純粋な CSS レイアウトを完全にマスターできていませんか?通常、学習を妨げる状況は 2 つあります。
1 つ目の可能性は、CSS によるページ処理の原理を理解していないことです。ページの全体的なパフォーマンスを考慮する前に、まずコンテンツのセマンティクスと構造を検討し、次にセマンティクスと構造用の CSS を追加する必要があります。この記事では、HTML を構造化する方法について説明します。
もう 1 つの理由は、非常によく知られたプレゼンテーション レイヤーのプロパティ (cellpadding、hspace、align=left など) について困惑しており、それらをどの CSS ステートメントに変換すればよいかわからないことです。最初の問題を解決し、HTML の構造化方法を理解したら、元のプレゼンテーション属性を置き換えるためにどの CSS を使用するかを詳しく説明したリストを提供します。
構造化HTML
私たちが初めてWebページ制作を学ぶときは、絵やフォント、色、配置図などを考えて、まずデザインをどうするかを考えます。次に、Photoshop または Fireworks を使用してそれを描画し、小さな絵に切り取ります。最後に、HTML を編集して、すべてのデザインをページに復元します。
HTML ページを CSS (CSS フレンドリー) でレイアウトしたい場合は、「外観」を最初に考えるのではなく、ページのコンテンツのセマンティクスと構造を最初に考える必要があります。
外見は最も重要なことではありません。適切に構造化された HTML ページは、どのような外観でも表示できます。CSS Zen Garden はその典型的な例です。 CSS Zen Garden は、CSS の力を最終的に認識するのに役立ちます。
HTML はコンピューター画面上で読むためだけのものではありません。 Photoshop で慎重にデザインした画像は、PDA、携帯電話、スクリーン リーダーでは表示されない場合があります。ただし、適切に構造化された HTML ページは、CSS のさまざまな定義を使用して、どこにでも、どのネットワーク デバイスでも表示できます。
考え始める
一部の作家はセマンティクスとも呼ぶ構造とは何かを学ぶことから始めます。この用語が意味するのは、コンテンツ ブロックと各コンテンツが果たす目的を分析し、これらのコンテンツの目的に基づいて対応する HTML 構造を構築する必要があるということです。
じっくりと腰を据えてページ構造を分析して計画すると、次のような結果になる可能性があります。
ロゴとサイト名
メインページのコンテンツ
サイトナビゲーション (メインメニュー)
サブメニュー
検索ボックス
機能エリア (ショッピング カート、チェックアウトなど)
フッター (著作権および関連する法的通知)
通常、次のように DIV 要素を使用してこれらの構造を定義します。
<div id=header></div>
<div id=content></div>
<div id=globalnav></div>
<div id=subnav></div>
<div id=search></div>
<div id=ショップ></div>
<div id=footer></div>
レイアウトではなく、構造です。これはコンテンツ ブロックの意味論的な記述です。構造を理解したら、対応する ID を DIV に追加できます。任意のコンテンツ ブロックを DIV コンテナ内に含めることができ、その中に別の DIV をネストすることができます。コンテンツ ブロックには、タイトル、段落、画像、表、リストなど、あらゆる HTML 要素を含めることができます。
上記に基づいて、HTML を構造化する方法はすでに理解しているので、レイアウトとスタイルを定義できるようになります。各コンテンツ ブロックはページ上のどこにでも配置でき、ブロックの色、フォント、境界線、背景、配置プロパティなどを指定できます。
セレクターの使用は素晴らしいことです
ID の名前は、特定のコンテンツ ブロックを制御する手段であり、このコンテンツ ブロックを DIV でラップし、一意の ID を追加することで、CSS セレクターを使用して、タイトル、リスト、画像などの各ページ要素の外観を正確に定義できます。 、リンクまたは段落など。たとえば、#header の CSS ルールを作成する場合、それは #content の画像ルールとはまったく異なるものになる可能性があります。
別の例: 異なるルールを使用して、異なるコンテンツ ブロックでリンク スタイルを定義できます。このようなもの: #globalnav a:link または #subnav a:link または #content a:link異なるコンテンツ ブロック内の同じ要素に異なるスタイルを定義することもできます。たとえば、#content p と #footer p を通じて、それぞれ #content と #footer の p のスタイルを定義します。構造的に言えば、ページは画像、リンク、リスト、段落などで構成されます。これらの要素自体は、どのネットワーク デバイス (PDA、携帯電話、またはインターネット TV) に表示されるかには影響しません。これらは、任意のパフォーマンスの外観として定義できます。
注意深く構造化された HTML ページは非常にシンプルで、すべての要素が構造的な目的で使用されます。段落をインデントする場合は、blockquote タグを使用する必要はありません。p タグを使用し、CSS マージン ルールを p に追加するだけで、インデントの目的を達成できます。 p は構造化タグ、margin はプレゼンテーション属性です。前者は HTML に属し、後者は CSS に属します。 （これが構造と表現の分離です。）
適切に構造化された HTML ページには属性タグがほとんどありません。コードは非常にクリーンで簡潔です。たとえば、元のコード <table width=80% cellpadding=3 border=2 align=left> は、HTML 内に <table> のみを記述できるようになり、パフォーマンスを制御するすべてのものは CSS で記述されます。構造化 HTML では、 table が記述されます。テーブルであり、他のものではありません (レイアウトや配置に使用されるなど)。
自分自身を構造化する練習をする
上記は最も基本的な構造にすぎません。実際のアプリケーションでは、必要に応じてコンテンツ ブロックを調整できます。 DIV のネストは頻繁に発生し、コンテナー レイヤー内に次のような構造を持つ他のレイヤーがあることがわかります。
<div id=navcontainer>
<div id=globalnav>
<ul>リスト</ul>
</div>
<div id=subnav>
<ul>別のリスト</ul>
</div>
</div>
ネストされた div 要素を使用すると、プレゼンテーションを制御するための CSS ルールをさらに定義できます。たとえば、#navcontainer にリストを右にセンタリングするルールを与え、#globalnav にリストを左にセンタリングするルールを与え、#subnav に別のルールを与えることができます。リスト全体を異なるパフォーマンスで中央に配置するルール。
従来の方法を CSS に置き換える
次のリストは、従来の方法を CSS に置き換えるのに役立ちます。
HTML 属性と対応する CSS メソッド
HTML 属性 CSS メソッドの説明
整列=左
整列=右 浮動小数点: 左;
float: right; CSS を使用して、画像、段落、div、タイトル、テーブル、リストなどの要素をフローティングします。
float 属性を使用する場合は、float 要素の幅を定義する必要があります。
marginwidth=0 leftmargin=0 marginheight=0 topmargin=0 margin: 0; CSS を使用すると、body 要素だけでなく、任意の要素にマージンを設定できます。さらに重要なのは、要素の上下左右を指定できることです。別途マージン値。
vlink=#333399 alink=#000000 link=#3333FF a:link #3ff;
a:訪問しました: #339;
a：ホバー：#999;
a:アクティブ: #00f;
HTMLでは、リンクの色は本文の属性値として定義されています。リンクのスタイルはページ全体で同じです。 CSS セレクターを使用すると、ページのさまざまな部分でリンク スタイルを変えることができます。
bgcolor=#FFFFFF 背景色: #fff; CSS では、body 要素や table 要素だけでなく、任意の要素に対して背景色を定義できます。
bordercolor=#FFFFFF border-color: #fff; 任意の要素に上、右、下、左の境界線を設定できます。
境界線=3
cellpacing=3 border-width: 3px; CSS を使用すると、表の境界線を統一スタイルとして定義したり、上、右、下、左の境界線の色、サイズ、スタイルをそれぞれ定義したりできます。
table、td、または th セレクターを使用できます。
ボーダーレス効果を設定する必要がある場合は、CSS 定義を使用できます。
<br クリア=左>
<br クリア=右>
<br クリア=すべて>
クリア：左。
クリア：そうです。
クリア：両方。
2 列または 3 列のレイアウトの多くは、位置決めに float 属性を使用します。フローティングレイヤーに背景色や背景画像を定義する場合は、クリア属性を使用できます。
セルパディング=3
vspace=3
hspace=3 padding: 3px; CSS を使用すると、任意の要素にパディング属性をそれぞれ上、右、下、左に設定できます。パッドは透明です。
align=center テキスト整列：中央;
マージン右: 自動; マージン左: 自動;
Text-align はテキストに対してのみ機能します。
div や p などのブロックレベルの要素は、margin-right: auto および margin-left: auto; を使用して水平方向に中央揃えにすることができます。
残念な技術と作業環境
ブラウザによる CSS のサポートが不完全なため、CSS が従来の方法と同じ効果を達成できるようにするために、いくつかのトリック (ハック) を採用したり、環境 (回避策) を確立したりする必要がある場合があります。たとえば、ブロック レベルの要素では、水平方向のセンタリング手法やボックス モデルのバグ手法などを使用する必要がある場合があります。これらのテクニックはすべて、Molly Holzschlag の記事「Integrated Web Design: Strategies for Long-Term CSS Hack Management」で詳しく説明されています。
CSS テクニックに関するもう 1 つのリソースは、Big John と Holly Bergevin による「Position is Everything」です。
float の動作を理解する
Eric Meyer の「Containing Floats」は、レイアウトに float 属性を使用する方法を習得するのに役立ちます。 Float 要素は場合によってはクリアする必要がある場合があります。「構造マークアップを使用せずに Float をクリアする方法」を読むと非常に役立ちます。