HTMLの区塊について

HTML <div> と <span>

HTML は <div> と <span> を使用して要素をグループ化できます。

HTML 区塊要素

大多数の HTML 要素は区塊要素またはインライン要素として定義されています。

区塊要素は、ブラウザで表示されるときに通常新しい行で始まり（および終了）します。

例: <h1>, <p>, <ul>, <table>

<h1> の例

<h1> 要素は主にページの主見出しを示すために使用されます。

<h1>これは見出し1です</h1>

結果：

これは見出し1です

<p> の例

<p> 要素は段落を示します。

<p>これは段落です。複数の文を含むことができます。</p>

結果：

これは段落です。複数の文を含むことができます。

<ul> の例

<ul> 要素は順不同リストを示します。リスト項目は <li> 要素で定義されます。

<ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ul>

結果：

項目1
項目2
項目3

<table> の例

<table> 要素は表を示します。表の行は <tr> 要素で定義され、表のセルは <td> 要素で定義されます。表のヘッダーセルは <th> 要素で定義されます。

<table border="1">
    <tr>
        <th>ヘッダー1</th>
        <th>ヘッダー2</th>
    </tr>
    <tr>
        <td>データ1</td>
        <td>データ2</td>
    </tr>
</table>

結果：

ヘッダー1	ヘッダー2
データ1	データ2

HTML インライン要素

インライン要素は、表示されるときに通常新しい行で始まりません。

例: <b>, <td>, <a>, <img>

<b> の例

<b> 要素はテキストを太字にします。

<b>これは太字のテキストです</b>

結果：

これは太字のテキストです

<td> の例

<td> 要素は表のデータセルを示します。前述の <table> の例で説明した通りです。

<a> の例

<a> 要素はハイパーリンクを作成します。

<a href="https://www.japanitguide.com">これはリンクです</a>

結果：

これはリンクです

<img> の例

<img> 要素は画像を表示します。画像のソースは src 属性で指定します。

<img src="https://www.japanitguide.com/dist/images/logo/logo-ly.webp" alt="ITチュートリアル">

結果：

HTML <div> 要素

HTML <div> 要素は区塊要素であり、他の HTML 要素のコンテナとして使用できます。

<div> 要素には特定の意味はありません。それ以外に、区塊要素であるため、ブラウザはその前後で改行を表示します。

CSS と一緒に使用する場合、<div> 要素は大きな内容ブロックにスタイル属性を設定するために使用できます。

<div> 要素のもう一つの一般的な用途はドキュメントのレイアウトです。これは、レイアウトの定義に表を使用する古い方法に取って代わりました。<table> 要素をドキュメントのレイアウトに使用することは、表の正しい使用法ではありません。<table> 要素は、表形式のデータを表示するためのものです。

<div style="background-color: lightblue; padding: 20px;">
    これは <div> 要素内のコンテンツです。
</div>

HTML <span> 要素

HTML <span> 要素はインライン要素であり、テキストのコンテナとして使用できます。

<span> 要素にも特定の意味はありません。

CSS と一緒に使用する場合、<span> 要素は部分的なテキストにスタイル属性を設定するために使用できます。

<p>このテキストの一部を <span style="color: red;">赤色</span> にします。</p>

結果：

このテキストの一部を赤色にします。

HTML グループ化タグ

タグ	説明
<div>	文書の領域を定義し、区塊要素 (block-level)
<span>	文書内のインライン要素をグループ化するために使用される、インライン要素 (inline)