前回の 基本的なタグ – HTML基礎 その3 では 基本的なHTMLタグ について学習しました。

今回は、前回少しだけ説明した divspan などの汎用的なタグの使い方について学習します。

また、ここでは CSS(Cascading Style Sheets についても少しだけ触れますが、詳しい学習は CSS基礎 で行います。

前回学習したように、aタグ や imgタグ などの多くのタグには 決められた意味、決められた役割 があります

しかし、divタグ や spanタグ は 決まった意味や役割のない汎用的なタグになります

要素 簡単な説明
<div> 汎用タグ(特に意味はないが汎用的に使用できる)
<span> テキストタグ(特に意味はないがテキストを囲む際に使用する)

divspan タグは、特に意味がないため、基本的にはどこにでも使用することができます

ただ spanタグはテキストを囲む場合に使用するタグとなっているため、その用途に従ったほうが良いでしょう。

また、この記事の最後に紹介する CSS を使用することで、特に意味のないこれらのタグが 非常に有用なタグ になります。

  • divタグは最もよく使用されます。

ブロックとインラインを活用する

HTML display block vs inline

汎用タグの使い方のひとつは、デフォルトの 表示方法 を利用することです。 

以下は、divタグ と spanタグ の表示方法になります。

要素 デフォルトの表示方法 表示方法の説明
<div> block(ブロック) 表示方法が block の要素は、常に新しい行から始まり、横幅を目一杯使用します
<span> inline(インライン 表示方法が inline の要素は、新しい行からは始まらず、必要な横幅だけ使用します

このデフォルト値を利用すれば、表示方法がインラインの要素を divタグ で囲むことで 常に新しい行から表示させることができます

以下の例では、表示方法が inline(インライン) である imgタグ を、divタグ で囲み、どのように表示されるかについて確認をしています。

表示の開始位置 と 使用する横幅 のそれぞれの違いが分かると思います。
また、コーディング例では省略していますが、使用している横幅が分かりやすいように、imgタグ と divタグ の背景色を変えています。

コーディング例


<p>横並びに画像が表示されます</p>
<img src="https://picsum.photos/200" alt="画像1">
<img src="https://picsum.photos/200" alt="画像2">
<p>縦並びに画像が表示されます</p>
<div>
    <img src="https://picsum.photos/200" alt="画像1">
</div>
<div>
    <img src="https://picsum.photos/200" alt="画像2">
</div>
                

表示結果

横並びに画像が表示されます
*小さい画面では縦に表示されます

画像1 画像2

縦並びに画像が表示されます

画像1
画像2

タグごとに、この様な異なる特性があるということを意識しておいてください

また、その他のタグの デフォルトの表示方法 について興味のある方は以下を参照してください。暗記して覚える必要はありません

HTML Block and Inline Elements

  • タグによって「デフォルトの表示方法」が異なります。

CSSと一緒に使用する

HTML Attributes(属性)

HTMLのタグ には style という全てのタグに共通して使用できる属性があります。
この style属性 を使用することで CSS を宣言することができ、要素を装飾することが可能になります

CSSの構文

CSS は HTML とは異なる言語のため書き方も異なります。

ここでは、style属性に記述する際のCSSの基本的な構文について簡単に説明しますが、より詳しい 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 を適用させることができます

  • 親要素のスタイルは子要素にも適用されます。
  • 子要素に親要素と同一のスタイルが設定されていれば、子要素のスタイルが優先されます。

課題

divタグ と spanタグ にはそれぞれどんな特徴がありますか?説明してください。

汎用タグは何と一緒に使うことで有用なタグになりますか?説明してください。

HTMLタグ の 表示方法 の違いによって、それぞれどの様な特徴がありますか?

「block(ブロック)」と「inline(インライン)」ついて説明してください。