9-7 classとは

class(クラス)とは名前が示す通り「部類」「種類」「組」という意味で、CSS特定のスタイルに名前を付けて、複数のページやタグ内で使用出来るようにする事を云います。

※ ちなみにclass名を使用する際の記述方法(class="任意の英数字")を 『class属性』 と呼びます。

[ 関連事項 : HP-TIPS > CSS > idとは ]

9-7-1 具体例 (クラス名のみ)

複数のタグに同じデザインを表示したい時に利用する事が出来る方法です。

CSS

<head> ~ </head> 内に記述して下さい。
<style type="text/css">
<!--
.caution {
color: #cc0000; /* 文字の色は赤 */
}
-->
</style>

[ 関連事項 : HP-TIPS > CSS > 外部スタイルシートの記述方法 ]


HTML

<body> ~ </body> 内に記述して下さい。
1. 関係者以外<strong class="caution">立ち入り禁止</strong>です。
2. 御用の方は必ず<u class="caution">受付</u>にお声をかけて下さい。

表示結果

1. 関係者以外立ち入り禁止です。
2. 御用の方は必ず受付にお声をかけて下さい。

CSS部分では .クラス名 { プロパティ: 値; } と書き込み、
(※ 黒い点「.」はピリオドです)
HTML部分で class="" とclass(クラス)名を指定すればOKです。(今回の見本のクラス名は「caution」になります)

※ 見本ではアンダーラインを引くタグである <u>を使用致しましたが、このタグは非推奨属性です。見本として提示致しましたが、あくまでも参考程度に留めておいて下さいね(^^;

[ 関連事項 : HP-TIPS > CSS > 基礎知識 > スタイルシートの書式 ]
[ 関連事項 : HP-TIPS > HPの作り方 > 非推奨要素・属性 ]

9-7-2 具体例 (要素名+クラス名)

要素名(<p>とか<div>等のタグ)の後に続けてクラス名を指定すると、その指定した要素の中でのみデザイン効果が表示されます。

CSS

<head> ~ </head> 内に記述して下さい。
<style type="text/css">
<!--
p.caution {
color: #cc0000; /* 文字の色は赤 */
font-weight: bold; /* 太字 */
}
-->
</style>

[ 関連事項 : HP-TIPS > CSS > 外部スタイルシートの記述方法 ]


HTML

<body> ~ </body> 内に記述して下さい。
<p class="caution">この行は指定したスタイルが表示されます。</p>
<p>しかし同じタグ内でも、クラス指定をしなかった物は表示されません。</p>
<p>違うタグ内で使用しても<span class="caution">モチロン</span>表示されません。</p>

表示結果

この行は指定したスタイルが表示されます。

しかし同じタグ内でも、クラス指定をしなかった物は表示されません。

違うタグ内で使用してもモチロン表示されません。

CSS部分では 要素名.クラス名 { プロパティ: 値; } と書き込み、
(※ 黒い点「.」はピリオドです)
HTML部分で class="" とクラス名を指定すればOKです。(今回の見本の要素は「p」、クラス名は「caution」になります)

[ 関連事項 : HP-TIPS > CSS > 基礎知識 > スタイルシートの書式 ]

9-7-3 具体例(クラス名+要素名)

先ほどとは逆に先にクラス名を記載し次に要素名(タグ)を書いた場合です。特定の要素名(<p>とか<div>等)全てにスタイルを指定するのではなく、決められた範囲内にのみデザイン効果を出したい場合に使用致します。

CSS

<head> ~ </head> 内に記述して下さい。
<style type="text/css">
<!--
.capter1 p {
color: #0000ff; /* 文字の色は青 */
}
-->
</style>

[ 関連事項 : HP-TIPS > CSS > 外部スタイルシートの記述方法 ]


HTML

<body> ~ </body> 内に記述して下さい。

<div class="chapter1">
<p>この行は指定したスタイルが表示されます。</p>
<span>この行は違うタグなので指定したデザインは表示されません。</span>
</div>

<div class="chapter2">
<p>クラス名が変わっているのでこの行も指定したスタイルは表示されません。</p>
</div>

表示結果

この行は指定したスタイルが表示されます。

この行は違うタグなので指定したデザインは表示されません。

クラス名が変わっているのでこの行も指定したスタイルは表示されません。

CSS部分では .クラス名 要素名 { プロパティ: 値; } と書き込み、
(※ 黒い点「.」はピリオドです)
HTML部分で class="" とクラス名を指定すればOKです。(今回の見本の要素は「p」、クラス名は「capter1」になります)

[ 関連事項 : HP-TIPS > CSS > 基礎知識 > スタイルシートの書式 ]

9-7-4 class名の付け方

使用出来る文字は半角英数字であれば自由に付ける事が出来ますが、コンピューターにも理解出来るように出来るだけ意味のある言葉にした方が良いのかも知れません。


※ class(クラス)名は半角の英字から始まり、数字とハイフン(-)で構成された単語で作成する事をお勧め致します。

[ 関連事項 : HP-TIPS > CSS > ページのレイアウト > 名前の付け方 ]