Web ページの純粋な CSS レイアウトを 1 つの記事でマスターする

この記事は純粋な CSS レイアウトの Web ページに関するもので、必要な方は参考にしていただければ幸いです。

最初の可能性は、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 構造を構築する必要があるということです。

じっくりと分析してページ構造を計画すると、次のようないくつかの部分が完成するかもしれません:

ロゴとサイト名

Mainページコンテンツ

サイトナビゲーション (メインメニュー)

サブメニュー

検索ボックス

儀式エリア (ショッピングカート、チェックアウトなど)

フッター (著作権および関連する法的通知)

通常、次のような DIV 要素を使用してこれらの構造を定義します。

＜div id="header"＞＜/div＞
＜div id="content"＞＜/div＞
＜div id="globalnav"＞＜/div＞
＜div id="subnav"＞＜/div＞
＜div id="search"＞＜/div＞
＜div id="shop"＞＜/div＞
＜div id="footer"＞＜/div＞

これはレイアウトではなく、構造です。これはコンテンツ ブロックの意味論的な記述です。構造を理解したら、対応する ID を DIV に追加できます。任意のコンテンツ ブロックを DIV コンテナ内に含めることができ、その中に別の DIV をネストすることができます。コンテンツ ブロックには、タイトル、段落、画像、表、リストなど、あらゆる HTML 要素を含めることができます。

上記によると、HTML の構造化方法はすでにわかっているので、レイアウトとスタイルを定義できるようになります。各コンテンツ ブロックはページ上のどこにでも配置でき、ブロックの色、フォント、境界線、背景、配置プロパティなどを指定できます。

上記は純粋な CSS レイアウト Web ページの完全な紹介です。CSS チュートリアル について詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。

以上がWeb ページの純粋な CSS レイアウトを 1 つの記事でマスターするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。