【HTML】span要素の使い方【テキストの汎用的な範囲を指定します】

Program

span要素を使えば、テキストの汎用的な範囲を指定できます。

シンプルなspan要素の指定方法

先ず、span要素によるテキストの汎用的な範囲の指定方法を紹介します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>span要素</title>
</head>
<body>
    <p>国境の長いトンネルを抜けると<span>雪国</span>であった。</p>
</body>
</html>

body要素の中に、「文のかたまり(段落)」を示すp要素があります。

p要素の中には、span要素の内容として指定されたフレーズ「雪国」があります。

「雪国」は、span要素の内容として指定されていますが、ブラウザの表示結果の通り、表示されるスタイルは、p要素として指定されたその他のテキストと同じままです。つまり、テキストの「汎用的な範囲」として指定されたに過ぎない状態となってます。

style属性を使ってspan要素の内容「雪国」の表示を設定する

では、span要素の内容「雪国」の表示スタイルを、style属性を使って設定する方法を紹介します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>span要素</title>
</head>
<body>
    <p>国境の長いトンネルを抜けると<span>雪国</span>であった。</p>
    <p>国境の長いトンネルを抜けると<span style="background-color:aquamarine; color:blue;">雪国</span>であった。</p>
</body>
</html>

先ほどのプログラムに、style属性の内容を含めたspan要素を含む文章を追加しました。

追加した文章では、span要素にstyle属性が指定されています。そして、style属性には、「雪国」の表示スタイルの指定に関する「プロパティ」及び「(プロパティ)値」のセットを2セット設定しました。

1つ目の「プロパティ」及び「(プロパティ)値」のセットは、background-colorプロパティにaquamarine値を指定してあります。

また、2つ目の「プロパティ」及び「(プロパティ)値」のセットは、colorプロパティにblue値を指定してあります。

このため、ブラウザの表示結果の通り、「雪国」の表示スタイルは、背景色を水色としつつ、テキストの色を青色とすることができました。

つまり、span要素により汎用的な範囲を指定し、その指定された範囲について、更にstyle属性を用いて表示スタイルを設定することで、指定された範囲の表示スタイルをアレンジすることができます。

class属性を使ってspan要素の内容「雪国」の表示スタイルを設定する

次に、span要素の内容「雪国」の表示スタイルを、class属性を使って設定する方法を紹介します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>span要素</title>
<link href="css/style_c.css" rel="stylesheet">
</head>
<body>
    <p>国境の長いトンネルを抜けると<span>雪国</span>であった。</p>
    <p>国境の長いトンネルを抜けると<span style="background-color:aquamarine; color:blue;">雪国</span>であった。</p>
    <p>国境の長いトンネルを抜けると<span class="snow_country">雪国</span>であった。</p>
</body>
</html>
@charset "UTF-8";

.snow_country {
    background-color:bisque;
    color:blueviolet;
}

先ほどのプログラムに、class属性を指定したspan要素を含む文章を追加しました。

追加した文章では、class属性の値として「snow_country」を指定しています。

更に、外部ファイル(スタイルシート)を読み込むため、head要素の中にlink要素を追加しています。

link要素では、href属性とrel属性を指定しています。

href属性は、読み込む外部ファイルのURL、つまり外部ファイルの場所を指定するための属性です。URLの指定には、ファイルの階層構造と、読み込むファイル名とが指定されます。

また、rel属性は、読み込む外部ファイルの用途を指定する属性です。

ここで、外部ファイルとしての「style_c.css」ファイルに記述した通り、class属性として指定した「snow_country」への表示スタイルの適用について、「プロパティ」及び「(プロパティ)値」のセットを2セット設定しました。

1つ目の「プロパティ」及び「(プロパティ)値」のセットは、background-colorプロパティにbisque値を指定してあります。

また、2つ目の「プロパティ」及び「(プロパティ)値」のセットは、colorプロパティにblueviolet値を指定してあります。

そして、ブラウザの表示結果の通り、「雪国」の表示スタイルを変更することができました。

以上から、span要素によってテキストの汎用的な範囲を指定しつつ、class属性の指定およびlink要素を用いた外部ファイル(スタイルシート)の読み込みを行うことで、テキストの表示スタイルをアレンジすることができました。

各種ブラウザでの表示結果

span要素の各種ブラウザにおける最新のサポート状況は、以下のようになってます。

【HTML】Internet ExplorerGoogle ChromeMicrosoft EdgeSafariFirefoxOpera
span要素
〇:サポートあり、△:制限あり、×:サポートなし。?:不明

以上、span要素の使い方について、ご参考になさってください!

タイトルとURLをコピーしました