HTML STUDY
>
>

<span>でテキストを区別する

ここでは<span>にid属性やclass属性で任意の名前をつけてテキスト範囲でCSSを反映させる方法を解説していきます。

テキスト範囲というのはp要素で囲ったテキストなどのことを指します。

<span>をCSSでデザインする

<span>は特定の意味を持ちませんが、任意の名前をつけることによりテキスト範囲で他と区別することができます。<div>に比べて狭い範囲で使用できるといえるでしょう。

<span>にid属性やclass属性で名前をつけCSSでデザインをしていきます。id属性はひとつのid名に使えるタグは単一で、CSSの記述の際は最初に「#」をつけます。class属性は、ひとつのclass名に対して複数のタグに使用でき、CSSの記述の際には最初に「.」をつけます。

要素解説
<span>他のテキストと区別する
属性解説
iddiv要素に任意の名前を与える（ひとつの名前に一度のみ使用可）
classdiv要素に任意の名前を与える（ひとつの名前を複数回使用可）
CSSプロパティ解説
background-color背景色
color文字色

HTMLコード記述例

<p>span要素を使用して<span id="bg-green">テキストの一部</span>をCSSでデザインしています。</p>

<p>このように<span class="orange">id属性</span>や
<span class="orange">class属性</span>で名前をつけること
によって個別にCSSを反映させることが可能です。</p>

外部ファイルCSS記述例

@charset "utf-8";
#bg-green { background-color: #99ff99;}
.orange { color: orange;}

ブラウザ表示例

span要素を使用してテキストの一部をCSSでデザインしています。

このようにid属性やclass属性で名前をつけることによって個別にCSSを反映させることが可能です。

HTML文字 関連記事