class属性(当該要素のクラス名)。

class属性(当該要素のクラス名)・目次。

class属性とは。

class属性は、当該要素に関して、クラス名を与えます。

クラス名とは、要素に与える名前の事で、以下のような使い方が考えられます。

より明確にHTMLの要素を定める

HTMLでは、任意に要素を定義出来ません。

このため、HTMLの要素に適切なものが無い場合や既存の要素を拡大解釈して利用する場合などに利用されます。

例えば、英語文書で外来語を記述する場合、本来定義語と言う意味の<dfn>要素を拡大解釈して用いる場合、

<dfn class="loan">tempura</dfn>

等と記述する事で外来語だと示す事が出来ます。

要素の持つ意味を区別する。

或いは、同じ要素でも意味が異なると言う場合に意味を記述すると言う使い方も出来ます。

例えば、プログラムの出力で正常な出力とエラーメッセージとで区別したい場合は、出力サンプルを表す<samp>要素に対して、

<samp class="ok">お答えは 2です。</samp>
<samp class="err">値が正しくありません!</samp>

等と記述する事で区別出来ます。

CSSのセレクタとして利用する。

CSSではクラスセレクタと言うセレクタが用意されており、これによりスタイルを依り柔軟に定める事が出来ます。

そこで、特定のスタイルを当てたい要素にclass属性を当てると言う事になります。

注意
  • スタイルそのものを表すクラスは好ましくないと考えられております。例えば、危険を強調するため赤文字で表現したい箇所では、

    <p>駅ホームの端を歩くのは<strong class="red">非常に危険</strong>です。</p>

    などとせず、

    <p>駅ホームの端を歩くのは<strong class="danger">非常に危険</strong>です。</p>

    などと記述すべきとされております。

    これは、スタイルシートの差替えのときに意味が無くなる恐れがあるからです。

    • class="red"と書いておいて、スタイルを黒地に変更した際に赤文字より黄文字の方が目を惹くという事でこの要素のスタイルを黄色に変更したら、おかしいですよね。
  • そもそも、スタイルの為だけにclass属性を記述する事自体が好ましくないと言う意見もあります。

class属性が利用できる文書型。

class属性HTML 4.01以降で利用出来ます。

class属性の実装について。

class属性はCSSに対応しているユーザエージェントなら必ず実装している筈です。

但し、複数クラスには対応していないものもあります。

携帯電話でもWAP 2.0準拠ブラウザを実装している端末なら必ず実装されているものです。

class属性を利用出来ない要素。

class属性は、以下の要素以外で利用出来ます。

class属性の値。

class属性の値に利用出来るクラス名は空白文字を除く任意の文字列となります。

複数のクラスを空白文字で区切って並べる事も出来ます。

但し、この場合、ネットスケープ 4.x及びインターネットエクスプローラ 4.xなどの旧型のユーザエージェントで利用出来ない場合があります。

尚、CSSのセレクタにする場合などには、CSSの文法に従ったクラス名を与える必要があります。

また、CSSでのセレクタとして用いるクラス名として、スタイルを指定するのは好ましくありません。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com