HTML5 と CSS3 の基本チュートリアル: 一般的なページ構成と header_html/css_WEB-ITnose の作成

この記事は、『HTML5 と CSS3 の基本チュートリアル』(第 8 版) の第 3 章、セクション 3 からの抜粋です。

この章のすべての記事:

セクション 1: 「Web ページの作成を開始するための基本的な HTML 構造」

セクション 2: ページ タイトルを作成する

セクション 3: 階層タイトルを作成する

3.4 通常のページ構成

あなた図 3.4.1 に示すような多数の Web サイトにアクセスしたことがあるはずです。コンテンツはさておき、図 3.4.2 に示すように、ページには 4 つの主なコンポーネント (ナビゲーション付きヘッダー、メイン コンテンツ領域に表示される記事、二次情報を表示するメモ欄、フッター) があることがわかります。

図 3.4.1 一般的なレイアウト。上部にメイン ナビゲーション、左側にメイン コンテンツ、右側にメモ列、下部にフッターがあります。ページをこのようにするには、CSS を追加する必要があります

図 3.4.2 ページの一般的な情報の種類。これは単なるアレンジですが、非常に一般的なものです

さて、CSS を導入しない限り、このようにページにスタイルを追加することはできません。 CSS については第 7 章で、テキストの書式設定や色の追加などの方法については第 10 章で、複数列レイアウトについては第 11 章で学習していきます。

ただし、これらの通常のページ構造に適用されるセマンティクスは、レイアウトに関係なく非常に似ています。この章の残りの部分では、これらの構造について説明します。ページの上部から下に向かって、ページの構造を定義するヘッダー、ナビゲーション、メイン、記事、セクション、サイド、フッターの使用法と、追加のスタイル情報を追加するために使用される一般的なコンテナー div について説明します。または他の目的を達成します。 div を除き、これらの要素は HTML5 のリリース後にのみ使用できます。

これらの要素を学習する過程では、サンプル レイアウト内の要素の位置を気にせず、その意味論に焦点を当ててください。

次に、ul (順序なしリスト) や a (リンク) などの他の要素についても簡単に説明します。これについては後続の章で詳しく説明します。

3.5 ヘッダーを作成する

ページ上に一連の紹介コンテンツまたはナビゲーションコンテンツを含む領域がある場合は、ヘッダー要素でマークする必要があります。

ページには任意の数のヘッダー要素を含めることができ、その意味はコンテキストに応じて異なります。たとえば、図 3.5.1 に示すように、ページの上部またはその近くにあるヘッダーは、ページ全体のヘッダー (ヘッダーと呼ばれることもあります) を表す場合があります。通常、ヘッダーには Web サイトのロゴ、メイン ナビゲーション (図 3.5.2)、その他のサイト全体のリンク、さらには検索ボックス (図 3.5.3) が含まれます。これは間違いなくヘッダー要素の最も一般的な使用形式ですが、これが唯一の形式であると誤解しないでください。

図 3.5.1 このヘッダーはページ全体のヘッダーを表します。これには、ページ全体のメイン ナビゲーションを表す一連のリンク (nav 要素内) が含まれています。オプションの role="banner" は、すべてのヘッダーに適用されるわけではありません。これはヘッダーがページレベルのヘッダーであることを明示的に示すため、アクセシビリティが向上します。この例も図 3.5.4 に示します。詳細については、セクション 3.13 を参照してください (nav 要素の role 属性値については、セクション 3.6 を参照してください)

図 3.5.2 ナビゲーション付きのページレベルのヘッダー

図 3.5.3 これは別の Web サイトです ヘッダー(スタイルを含む)。この形式のページレベルのヘッダーはオンラインで非常に一般的です。これには、サイト名 (通常はロゴ)、サイトの主要セクションへのナビゲーション リンク、および検索ボックスが含まれます

ヘッダーは、ページの奥深くにある一連の紹介コンテンツまたはナビゲーション コンテンツをマークアップするのにも最適です。たとえば、ブロック ディレクトリについては、図 3.5.4 を参照してください。

図 3.5.4 このページには 2 つのヘッダーがあり、1 つはページ全体用で、もう 1 つはよくある質問の親要素の記事用です。最初のヘッダーには h1 ～ h6 の見出しが含まれていませんが、2 番目のヘッダーには含まれていることに注意してください。さらに、ページレベルのヘッダーであるため、最初のヘッダーのみに role="banner" が付いています

ヘッダーには通常、独自のタイトル (h1~h6) が含まれますが、これは必須ではありません。たとえば、図 3.5.3 にはタイトルがありますが、図 3.5.1 にはタイトルがありません。

ヘッダー作成手順

(1) ヘッダーを作成する要素にカーソルを置きます。

(2) を入力します。

(3) さまざまなタイプのコンテンツを含むヘッダーのコンテンツを入力します。各コンテンツは独自の HTML 要素によってマークされます (そのほとんどについては、本書の残りの部分で説明します)。たとえば、ヘッダーには h1 ～ h6 のタイトル、ロゴ、ナビゲーション、検索ボックスなどを含めることができます。

(4) を入力します。

ヘッダーは必要な場合にのみ使用してください。ほとんどの場合、h1～h6 を使用することでニーズが満たされる場合は、ヘッダーでラップする必要はありません。

header と h1 ～ h6 要素のタイトル (セクション 3.3 を参照) は互換性がありません。それらはすべて独自の意味上の目的を持っています。

ヘッダー内にフッター要素や別のヘッダーをネストすることはできません。また、フッターまたはアドレス要素内にヘッダーをネストすることもできません。

例 (図 3.5.1 および図 3.5.4) のようにヘッダーに nav 要素を含める必要はありませんが、ヘッダーにナビゲーション リンクが含まれている場合、ほとんどの場合、nav を使用できます。図 3.5.4 に示す例では、ナビゲーションがページ内の主要なナビゲーション グループであるため、よくある質問のリンク リストをラップするのが適切です (セクション 3.6 で説明)。

HTML5 以前のバージョンでヘッダーが div 要素の関数をどのように置き換えるかを理解するには、セクション 3.12 を参照してください。

元のリンク

この記事はインターネットからのものです。あなたの権利が侵害されている場合は、QQ: 123464386 までご連絡ください。できるだけ早く対応いたします。