コンテンツにスキップ

HTML Living Standard/フロー・コンテンツ

リンクを追加
出典: フリー教科書『ウィキブックス（Wikibooks）』

フロー・コンテンツ

[編集]

フロー・コンテンツは、HTML文書の中で最も一般的なコンテンツカテゴリであり、通常、文書の主要部分を構成します。このカテゴリには、段落、見出し、リスト、リンク、セクション要素など、多くのHTMLの要素が含まれています。

定義

[編集]

フロー・コンテンツは、文書の構造や本文を表現する要素群です。これらの要素は、通常、親要素内に自由に配置できますが、一部の要素には特定のコンテキストでのみ使用できるものもあります。

フロー・コンテンツに分類される要素の多くは、他のフロー・コンテンツ要素を子要素として含めることができます。

主な要素

[編集]

フロー・コンテンツに含まれる主な要素を以下に示します：

  • セクショニング要素
    • <div> — 汎用的なコンテナ。
    • <section> — セクションを定義。
    • <article> — 独立したコンテンツ（記事、ブログ投稿など）。
    • <aside> — 補足的なコンテンツ。
    • <header> — 文書またはセクションのヘッダー。
    • <footer> — 文書またはセクションのフッター。
  • テキスト関連要素
    • <p> — 段落を定義。
    • <blockquote> — 長い引用を表現。
    • <pre> — 整形済みテキスト（改行や空白を維持）。
  • リスト要素
    • <ul> — 順序なしリスト。
    • <ol> — 順序付きリスト。
    • <li> — リストの項目。
  • リンクとナビゲーション要素
    • <a> — ハイパーリンクを作成。
    • <nav> — ナビゲーションリンクのセクション。
  • インライン要素
    • <span> — テキストの汎用インラインコンテナ。
    • <strong> — 重要なテキストを強調。
    • <em> — 意味的な強調。
    • <br> — 改行。
  • 埋め込み要素
    • <img> — 画像を埋め込む。
    • <audio> — 音声を埋め込む。
    • <video> — 動画を埋め込む。
    • <iframe> — 埋め込みフレーム。
  • フォーム要素
    • <form> — フォーム全体を定義。
    • <input> — 入力フィールドを定義。
    • <button> — ボタンを作成。
    • <label> — 入力フィールドにラベルを付ける。

フロー・コンテンツの特性

[編集]
  • 入れ子構造
    フロー・コンテンツは、多くの場合、他のフロー・コンテンツ要素を子要素として含むことができます。ただし、要素ごとに特定の使用ルールがあるため、それを遵守する必要があります。
  • 親子関係
    フロー・コンテンツ要素は、通常、<body> 要素の子要素として配置されます。また、セクショニング要素やコンテナ要素（<div>など）の中に配置することも可能です。

使用例

[編集]

以下は、典型的なフロー・コンテンツを使用したHTML文書の例です： 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フロー・コンテンツの例</title>
</head>
<body>
  <header>
    <h1>フロー・コンテンツの例</h1>
    <nav>
      <ul>
        <li><a href="#section1">セクション1</a></li>
        <li><a href="#section2">セクション2</a></li>
      </ul>
    </nav>
  </header>

  <section id="section1">
    <h2>セクション1</h2>
    <p>これは段落の例です。</p>
    <blockquote>
      <p>これは引用の例です。</p>
    </blockquote>
    <img src="example.jpg" alt="サンプル画像">
  </section>

  <section id="section2">
    <h2>セクション2</h2>
    <ul>
      <li>リスト項目1</li>
      <li>リスト項目2</li>
    </ul>
    <form action="/submit" method="post">
      <label for="name">名前：</label>
      <input type="text" id="name" name="name">
      <button type="submit">送信</button>
    </form>
  </section>

  <footer>
    <p>&copy; 2025 フロー・コンテンツの例</p>
  </footer>
</body>
</html>

注意事項

[編集]
  • フロー・コンテンツの要素を正しく入れ子にすることで、文書の構造と可読性を向上させることができます。
  • 一部のフロー・コンテンツ要素（例：<p>）は、他の特定のフロー・コンテンツ要素（例：<div>）の中に直接配置できません。HTML Living Standardの仕様を確認してください。

関連項目

[編集]

関連仕様

[編集]
"https://ja.wikibooks.org/w/index.php?title=HTML_Living_Standard/フロー・コンテンツ&oldid=266918" より作成