6日でできる 新HTML入門｜divタグとspanタグ
大きなまとまりはdivで囲み、文字の一部はspanで飾る。HTMLの範囲指定を理解して、CSSで扱いやすいページを作ろう。
HTMLでは、見出しを表すh1やh2、段落を表すp、リストを表すulやli、リンクを表すaなど、内容の意味に合わせて使うタグがたくさん用意されています。これらのタグを使うことで、文章の構造を分かりやすく整理できます。
一方で、Webページを作っていると、意味を表すためというよりも、CSSを適用するために範囲をまとめたい場面があります。たとえば、見出しと本文をひとまとめにして枠線で囲みたい場合や、文章の中にある特定の言葉だけを赤字にしたい場合です。
このようなときに使うのが、divタグとspanタグです。divタグは、複数の要素を大きなまとまりとして囲むために使います。ブロックとして扱われるため、レイアウトの大枠を作るときに便利です。spanタグは、文章の一部分だけを囲むために使います。インラインとして扱われるため、文章の流れを崩さずに、特定の文字だけに色や太字などの装飾を付けられます。
divタグとspanタグそのものには、特別な意味はありません。そのため、CSSのclassやidと組み合わせて使うことで、自由にデザインを指定できます。HTMLの構造を整えながら、必要な範囲にだけCSSを適用するための基本として、しっかり理解しておきたいタグです。
divタグは大きなまとまりを作るために使う
divタグは、複数の要素をひとつのグループとしてまとめるためのタグです。見出し、段落、画像、リストなどをまとめて囲み、そのまとまり全体にCSSを適用できます。
たとえば、旅行案内のページで、おすすめスポットの見出しと説明文をひとまとまりにしたい場合があります。このとき、h2とpをdivで囲むと、その範囲全体に枠線、背景色、余白、幅などを指定できます。
divタグの主な役割
| 役割 | 説明 |
|---|---|
| 複数の要素をまとめる | 見出し、段落、画像などをひとつのグループにできる |
| CSSをまとめて適用する | 囲んだ範囲全体に背景色や枠線を指定できる |
| レイアウトの土台を作る | カード、パネル、コンテナなどの構造を作れる |
| 意味を持たない汎用コンテナとして使う | 特定の意味を表すタグではなく、範囲指定に使える |
divタグは、ページの見た目を整えるための箱のような役割を持っています。特に、カード型のデザインや、セクションのまとまり、サイドバー、メニュー、記事一覧などを作るときによく使います。
ただし、divタグは便利だからといって何でも囲めばよいわけではありません。見出しにはh1やh2、段落にはp、リストにはulやliのように、意味に合ったタグを使うことが基本です。そのうえで、CSSを適用するためのまとまりが必要なときにdivを使うと、HTMLの構造が分かりやすくなります。
図1：divタグで複数の要素をまとめる
この図から分かること
divタグは、見出しや本文、画像などの複数の要素をひとつのまとまりとして囲むために使います。囲んだ範囲にCSSを指定すると、枠線、背景色、余白などをまとめて適用できます。ページ内の情報をカードやパネルのように整理したいときに便利です。
divタグで案内パネルを作る
次の例では、観光スポットの見出しと説明文をdivタグで囲み、ひとつの案内パネルとして表示します。
ファイル名： Lesson17-1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>街歩きガイド</title>
<style>
body {
font-family: sans-serif;
background-color: #FAFAFA;
}
div.panel {
width: 500px;
margin: 24px auto;
padding: 16px;
border: double 4px #336699;
background-color: #F5FBFF;
box-sizing: border-box;
}
h2 {
margin: 0 0 10px;
color: #224466;
}
p {
margin: 0;
line-height: 1.7;
}
</style>
</head>
<body>
<h1>週末の街歩きガイド</h1>
<div class="panel">
<h2>おすすめの散策コース</h2>
<p>川沿いの遊歩道を進むと、季節の花や古い街並みを楽しめます。休憩できるカフェも多く、初めて訪れる人にも歩きやすいコースです。</p>
</div>
</body>
</html>ブラウザの表示例
このHTMLでは、h2とpをdivタグで囲んでいます。divにはclass属性でpanelという名前を付けています。CSSではdiv.panelというセレクタを使い、panelクラスが付いたdivだけに装飾を指定しています。
div.panelには、width、margin、padding、border、background-colorなどを指定しています。これにより、見出しと本文をまとめた範囲全体が、枠線付きの案内パネルとして表示されます。
width: 500px;は、パネルの横幅を指定しています。margin: 24px auto;は、上下に24pxの外部余白を作り、左右をautoにすることでパネルを中央に配置しています。padding: 16px;は、パネルの内側に余白を作り、文字が枠線に近づきすぎないようにしています。
border: double 4px #336699;では、二重線、4px、青系の色を指定しています。borderを使うことで、divで囲んだ範囲が視覚的に分かりやすくなります。
このように、divタグは複数の要素をまとめ、そのまとまり全体にCSSを適用したいときに便利です。
divタグにclassを付けて使う理由
divタグは、そのまま使うだけでは見た目に変化はありません。divはあくまで範囲を作るためのタグなので、CSSと組み合わせてはじめて、見た目の調整に役立ちます。
特定のdivだけにCSSを適用したい場合は、class属性を使います。
<div class="panel">
内容
</div>CSSでは、次のように書きます。
div.panel {
border: solid 2px #336699;
}div.panelは、panelというclassが付いたdivタグを対象にするセレクタです。ページ内に複数のdivがある場合でも、panelクラスが付いたものだけにCSSを適用できます。
classを使うメリット
| メリット | 説明 |
|---|---|
| 特定の範囲だけ装飾できる | 必要なdivだけにCSSを適用できる |
| 同じデザインを使い回せる | 複数の要素に同じclassを付けられる |
| CSSを整理しやすい | 役割ごとにclass名を付けると管理しやすい |
| レイアウトの変更に強い | HTML構造とデザイン指定を分けて考えられる |
class名は、見た目だけでなく役割が分かる名前にすると扱いやすくなります。たとえば、青い枠だからblue-boxとするより、案内パネルならguide-panel、注意欄ならnotice-boxのように、内容の役割が分かる名前にすると後から見直しやすくなります。
divタグでレイアウトの大枠を作る
divタグは、ページ全体のレイアウトを組み立てるときにもよく使われます。たとえば、ページ全体を囲むcontainer、記事を囲むarticle-box、カードを囲むcard、サイドバーを囲むsidebarなどです。
HTML5では、header、nav、main、section、article、footerのように意味を持つタグもあります。そのため、意味がはっきりしている部分には、できるだけ意味に合ったタグを使うのが基本です。
一方で、純粋にデザイン上のまとまりを作りたい場合や、特別な意味を持たせる必要がない場合には、divタグが便利です。
divタグを使いやすい場面
| 場面 | 例 |
|---|---|
| カード型のまとまり | 商品カード、記事カード、プロフィールカード |
| レイアウト用の箱 | container、wrapper、grid-item |
| 装飾用の範囲 | 背景色を付ける範囲、枠線で囲む範囲 |
| 複数要素のグループ | 見出しと本文、画像と説明文 |
divタグは、意味を追加するためのタグというよりも、CSSで扱いやすい範囲を作るためのタグです。HTMLの意味構造を壊さない範囲で使うと、レイアウト作成がしやすくなります。
spanタグは文字の一部分を装飾するために使う
spanタグは、文章の一部分だけを囲むためのタグです。divタグが大きなまとまりを作るブロック要素であるのに対して、spanタグは文章の流れの中で使うインライン要素です。
たとえば、段落の中にある特定のキーワードだけを赤字にしたり、重要な語句だけを太字にしたりしたい場合に使います。
<p>この文章では<span class="keyword">重要語句</span>だけを強調します。</p>spanタグは、前後で改行されません。そのため、文章の流れを保ったまま、一部分だけにCSSを適用できます。
spanタグの主な役割
| 役割 | 説明 |
|---|---|
| 文字の一部を囲む | 段落の中の特定の語句だけを対象にできる |
| 改行せずに装飾できる | 文章の流れを崩さずに使える |
| CSSで細かく装飾できる | 色、太さ、背景色などを部分的に指定できる |
| 汎用的なインライン要素として使える | 特別な意味を持たない範囲指定に向いている |
spanタグもdivタグと同じように、それ自体には特別な意味はありません。CSSを適用する範囲を作るために使います。
図2：spanタグで文字の一部だけを装飾する
この図から分かること
spanタグは、文章の中にある一部分だけを囲むために使います。divタグのように大きなまとまりを作るのではなく、文章の流れを保ったまま、特定の語句だけに色や太字などのCSSを適用できます。
spanタグでキーワードを強調する
次の例では、文章の中にある用語だけをspanタグで囲み、赤字と太字で表示します。
ファイル名： Lesson17-2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML用語ミニ辞典</title>
<style>
body {
font-family: sans-serif;
line-height: 1.8;
}
span.keyword {
color: #CC0000;
font-weight: bold;
background-color: #FFF3F3;
padding: 2px 4px;
}
</style>
</head>
<body>
<h1>HTML用語ミニ辞典</h1>
<p>
HTMLでは、<span class="keyword">見出し</span>、<span class="keyword">段落</span>、
<span class="keyword">リンク</span>、<span class="keyword">画像</span>などをタグで表します。
</p>
</body>
</html>ブラウザの表示例
このHTMLでは、pタグの文章の中にspanタグを使っています。見出し、段落、リンク、画像という語句だけをspanで囲み、keywordというclassを付けています。
CSSではspan.keywordに対して、color、font-weight、background-color、paddingを指定しています。color: #CC0000;で文字を赤くし、font-weight: bold;で太字にしています。さらにbackground-colorで淡い背景色を付け、paddingで文字のまわりに小さな余白を入れています。
spanタグはインライン要素なので、文章の途中に入れても前後で改行されません。文章の自然な流れを保ったまま、特定の語句だけを目立たせることができます。
spanタグとstrongタグの違い
文字を強調したいとき、spanタグ以外にもstrongタグがあります。この2つは似ているように見えますが、役割が違います。
strongタグは、内容として重要であることを示すタグです。見た目だけでなく、意味として重要な語句に使います。
一方、spanタグは意味を追加するためのタグではありません。CSSを適用するために、文字の一部を囲むための汎用的なタグです。
spanタグとstrongタグの使い分け
| タグ | 役割 | 使いやすい場面 |
|---|---|---|
| span | 意味を追加せず、範囲だけを作る | 色を変える、背景色を付ける、装飾する |
| strong | 内容の重要性を示す | 本当に重要な語句を強調する |
たとえば、文章の中で重要な注意事項を示すならstrongタグが向いています。単に色を変えたい、見た目だけを調整したいという場合はspanタグが向いています。
CSSのためだけに文字の一部を囲みたい場合はspanタグを使う、と考えると分かりやすくなります。
ブロックレベル要素とインライン要素の違い
divタグとspanタグの違いを理解するには、ブロックレベル要素とインライン要素の考え方が大切です。
divタグはブロックレベル要素です。ブロックレベル要素は、ひとつの独立した箱のように表示され、通常は前後で改行されます。横幅は、指定しなければ親要素の幅いっぱいに広がります。
spanタグはインライン要素です。インライン要素は、文章の流れの中に表示され、前後で改行されません。文字と同じ行の中に収まります。
ブロックレベル要素とインライン要素の比較
| 種類 | 表示の特徴 | 代表的なタグ |
|---|---|---|
| ブロックレベル要素 | 前後で改行され、独立した領域として表示される | div、p、h1、h2、ul、ol、li、section |
| インライン要素 | 文章の流れの中に入り、前後で改行されない | span、a、img、strong、em、br |
ブロックレベル要素は、大きなレイアウトを作るときに向いています。インライン要素は、文章の中の一部分を扱うときに向いています。
図3：ブロックレベル要素とインライン要素の違い
この図から分かること
ブロックレベル要素は、独立した箱のように表示され、前後で改行されます。divタグはこのタイプです。インライン要素は、文章の流れの中に表示され、前後で改行されません。spanタグはこのタイプです。大きなまとまりを作るならdiv、文字の一部を装飾するならspanを使うと考えると分かりやすくなります。
divタグとspanタグの使い分け
divタグとspanタグはどちらも汎用的なタグですが、使う場面が違います。大きな範囲をまとめるならdivタグ、文章中の一部だけを囲むならspanタグを使います。
divタグとspanタグの比較
| タグ | 種類 | 主な用途 | 改行のされ方 |
|---|---|---|---|
| div | ブロックレベル要素 | 複数の要素をまとめる | 前後で改行される |
| span | インライン要素 | 文字列の一部を囲む | 前後で改行されない |
たとえば、見出しと本文をまとめて枠線で囲みたい場合はdivタグを使います。文章の中のキーワードだけを赤くしたい場合はspanタグを使います。
使い分けの基本は、範囲の大きさです。まとまり全体にCSSを当てたいならdiv、文章の一部だけにCSSを当てたいならspanです。
displayプロパティで表示のされ方を変える
ブロックレベル要素とインライン要素の表示のされ方は、CSSのdisplayプロパティで変更できます。
たとえば、aタグは通常インライン要素ですが、display: block;を指定すると、ブロックレベル要素のように表示できます。
a.menu-link {
display: block;
width: 220px;
margin: 10px auto;
padding: 10px;
background-color: #E3F2FD;}
このようにすると、リンクを横幅のあるボタンのように表示できます。
反対に、divタグにdisplay: inline;を指定すると、インライン要素のように文章の流れの中に表示できます。
div.note {
display: inline;
background-color: #EEF3FF;
padding: 2px 4px;
}ただし、divタグはもともと大きなまとまりを作るためのタグなので、文章の一部を囲む目的ならspanタグを使うほうが自然です。displayは便利ですが、まずはタグ本来の役割に合わせて使い分けることが大切です。
displayの主な値
| 値 | 表示の特徴 |
|---|---|
| block | ブロックレベル要素のように表示する |
| inline | インライン要素のように表示する |
| inline-block | 同じ行に並びながら幅や高さも指定できる |
| none | 要素を表示しない |
displayを使うと、要素の表示方法を柔軟に変えられます。特にinline-blockは、ボタンやラベルのように横並びにしつつ、paddingやwidthを指定したいときに便利です。
CSSセレクタと組み合わせて範囲を指定する
divタグやspanタグは、CSSセレクタと組み合わせることで力を発揮します。class属性を付けることで、特定の範囲だけにデザインを適用できます。
よく使う指定例
| 指定例 | 対象 |
|---|---|
| div.panel | panelクラスが付いたdivタグ |
| span.keyword | keywordクラスが付いたspanタグ |
| .panel | panelクラスが付いたすべての要素 |
| .keyword | keywordクラスが付いたすべての要素 |
div.panelのようにタグ名とclass名を組み合わせると、対象を少し限定できます。.panelのようにclass名だけで指定すると、タグの種類に関係なくpanelクラスが付いた要素にCSSを適用できます。
学習段階では、どの要素にCSSが当たっているのか分かりやすくするために、div.panelやspan.keywordのように書くと理解しやすくなります。慣れてきたら、class名だけの指定も使い分けていくとよいでしょう。
divタグとspanタグを使うときの注意点
divタグとspanタグは便利ですが、使いすぎるとHTMLが読みにくくなります。特に、意味のあるタグで表せる内容までdivだけで作ってしまうと、文書構造が分かりにくくなります。
たとえば、見出しにはh1やh2、段落にはp、リストにはulやli、リンクにはaを使います。そのうえで、複数の要素をまとめたいときにdivを使い、文章の一部だけを装飾したいときにspanを使います。
使い方の目安
| 目的 | 適したタグ |
|---|---|
| ページの大きなまとまりを作る | div |
| 見出しと本文をまとめてカードにする | div |
| 文章の中の一語だけ色を変える | span |
| 文章の中の短い語句に背景色を付ける | span |
| 内容として重要な語句を示す | strong |
| リンクを作る | a |
divタグとspanタグは、意味を持たない汎用的なタグです。だからこそ、使いどころを意識することが大切です。HTMLの意味を大切にしながら、CSSを当てるための範囲作りとして使うと、分かりやすく保守しやすいページになります。
使用タグ一覧と解説
この学習で登場した主なHTMLタグを整理しておきます。
| タグ | 用途 | 主な属性 |
|---|---|---|
| html | HTML文書全体を表す | lang |
| head | 文字コードやタイトルなどの情報を書く | なし |
| meta | 文字コードなどを指定する | charset |
| title | ブラウザのタブに表示されるタイトルを指定する | なし |
| style | HTML内にCSSを書く | なし |
| body | ブラウザに表示される内容を書く | なし |
| h1 | ページの大きな見出しを表す | なし |
| h2 | セクションの見出しを表す | なし |
| p | 段落を表す | なし |
| div | 複数の要素をまとめる汎用ブロック要素 | class、id |
| span | 文字列の一部を囲む汎用インライン要素 | class、id |
divタグは、複数の要素をまとめるための汎用的なブロック要素です。カード、パネル、コンテナなど、CSSでレイアウトや装飾をまとめて指定したい範囲に使います。
spanタグは、文章の一部を囲むための汎用的なインライン要素です。特定の語句だけに色、太字、背景色などを付けたいときに使います。
class属性は、CSSを適用する対象を指定するためによく使います。同じclass名を複数の要素に付ければ、同じデザインをまとめて適用できます。
divタグとspanタグを理解するとCSSが使いやすくなる
CSSでページを整えるときは、どの範囲にスタイルを当てるかを考えることが大切です。大きなまとまりに背景色や枠線を付けたいならdivタグが役立ちます。文章の中の一部分だけを強調したいならspanタグが役立ちます。
divタグは、レイアウトの箱を作るための基本です。spanタグは、文章内の小さな範囲を装飾するための基本です。この2つを使い分けられるようになると、HTMLとCSSの関係がかなり分かりやすくなります。
まずは、divで見出しと段落を囲んでカードを作る、spanでキーワードだけを色付けする、という基本的な使い方から練習するとよいでしょう。慣れてきたら、class名の付け方やdisplayの切り替えも組み合わせて、より柔軟なレイアウトや装飾に挑戦できます。