前回の 基本的なタグ – HTML基礎 その３ では 基本的なHTMLタグ について学習しました。
今回は、前回少しだけ説明した div や span などの汎用的なタグの使い方について学習します。
また、ここでは CSS（Cascading Style Sheets） についても少しだけ触れますが、詳しい学習は CSS基礎 で行います。
今回の学習内容
汎用タグの役割
前回学習したように、aタグ や imgタグ などの多くのタグには 決められた意味、決められた役割 があります。
しかし、divタグ や spanタグ は 決まった意味や役割のない汎用的なタグになります。
| 要素 | 簡単な説明 |
|---|---|
<div> |
汎用タグ（特に意味はないが汎用的に使用できる） |
<span> |
テキストタグ（特に意味はないがテキストを囲む際に使用する） |
div と span タグは、特に意味がないため、基本的にはどこにでも使用することができます。
ただ spanタグはテキストを囲む場合に使用するタグとなっているため、その用途に従ったほうが良いでしょう。
また、この記事の最後に紹介する CSS を使用することで、特に意味のないこれらのタグが 非常に有用なタグ になります。
-
divタグは最もよく使用されます。
ブロックとインラインを活用する
汎用タグの使い方のひとつは、デフォルトの 表示方法 を利用することです。
以下は、divタグ と spanタグ の表示方法になります。
| 要素 | デフォルトの表示方法 | 表示方法の説明 |
|---|---|---|
<div> |
block（ブロック） | 表示方法が block の要素は、常に新しい行から始まり、横幅を目一杯使用します。 |
<span> |
inline（インライン | 表示方法が inline の要素は、新しい行からは始まらず、必要な横幅だけ使用します。 |
このデフォルト値を利用すれば、表示方法がインラインの要素を divタグ で囲むことで 常に新しい行から表示させることができます。
以下の例では、表示方法が inline（インライン） である imgタグ を、divタグ で囲み、どのように表示されるかについて確認をしています。
表示の開始位置 と 使用する横幅 のそれぞれの違いが分かると思います。
また、コーディング例では省略していますが、使用している横幅が分かりやすいように、imgタグ と divタグ の背景色を変えています。
コーディング例
<p>横並びに画像が表示されます</p>
<img src="https://picsum.photos/200" alt="画像１">
<img src="https://picsum.photos/200" alt="画像２">
<p>縦並びに画像が表示されます</p>
<div>
<img src="https://picsum.photos/200" alt="画像１">
</div>
<div>
<img src="https://picsum.photos/200" alt="画像２">
</div>
表示結果
横並びに画像が表示されます
*小さい画面では縦に表示されます
縦並びに画像が表示されます
タグごとに、この様な異なる特性があるということを意識しておいてください。
また、その他のタグの デフォルトの表示方法 について興味のある方は以下を参照してください。（暗記して覚える必要はありません）
- タグによって「デフォルトの表示方法」が異なります。
CSSと一緒に使用する
HTMLのタグ には style という全てのタグに共通して使用できる属性があります。
この style属性 を使用することで CSS を宣言することができ、要素を装飾することが可能になります。
ここでは、
style属性 を使用して説明しますが、普段の用途は「テスト」など素早く表示して確認したい場合などの使用に限定すべきと記載されています。style - HTML: HyperText Markup Language | MDN
CSSの構文
CSS は HTML とは異なる言語のため書き方も異なります。
ここでは、style属性に記述する際のCSSの基本的な構文について簡単に説明しますが、より詳しい CSS の書き方については次回以降の学習で行います。
基本的な書き方は変わらないので、ここで覚えておいてください。
上記では、color という 属性 に red という 値 を設定しています。
CSS の 属性 には多くの種類があり、様々な値を設定することで スタイル の指定を行うことができます。
- CSSは「属性」に「値」を設定します。
コーディング例
<div style="font-size: 23px;">
<p>朝のあいさつは<span style="color: green;">おはよう</span>です。</p>
<p>昼のあいさつは<span style="color: orangered;">こんにちは</span>です。</p>
<p>夜のあいさつは<span style="color: darkblue;">こんばんは</span>です。</p>
</div>
上記の例では、divタグ の style属性 に font-size（文字の大きさ） を 23px で表示するように指定しています。
また、spanタグ のstyle属性 に color（文字色）を宣言し、それぞれの色を装飾するようにしています。
こうすることで、divタグの子孫 は 文字の大きさ が 23px となり、spanタグ内の文字色はそれぞれの色になります。
表示結果
朝のあいさつはおはようです。
昼のあいさつはこんにちはです。
夜のあいさつはこんばんはです。
HTMLタグの多くは、タグそのものに意味があるために使い方も決まっています。
汎用タグの 何にでも使える という特性を利用することで、要素の親子関係を作り 効率的に CSS を適用させることができます。
- 親要素のスタイルは子要素にも適用されます。
- 子要素に親要素と同一のスタイルが設定されていれば、子要素のスタイルが優先されます。
