スタイルシートのclass名とは？

HTMLとCSSの入門10講座

HTMLの基礎と外部スタイルシートの基礎が理解できたところで、もっと細かなデザインをスタイルシートで行っていきましょう。

今回は下記のHTMLタグのサンプルを使って説明します。外部スタイルシートはまだ何も記入していません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>サンプルページ</title>
<link rel=stylesheet type="text/css" href="style.css">
</head>

<body>

<ul>
<li>liタグは、リストを作ることができます</li>
<li>liタグは、リストを作ることができます</li>
<li>liタグは、リストを作ることができます</li>
<li>liタグは、リストを作ることができます</li>
<li>liタグは、リストを作ることができます</li>
</ul>

</body>
</html>
  • liタグは、リストを作ることができます
  • liタグは、リストを作ることができます
  • liタグは、リストを作ることができます
  • liタグは、リストを作ることができます
  • liタグは、リストを作ることができます

前回までは、タグに対してスタイル属性をつけてきました。HTMLの中でそのタグが何度も使われている場合は、全てのタグにそのデザインが適応されます。

ではもし、全部のタグにデザインを適応したくない場合はどうしたらよいでしょうか。

スタイルシートのclassにデザインする

上記のHTMLソースの<li>（リスト）タグで説明します。<li>タグは、<ul></ul>の中にいくつもリストを書くことができます。この<li>タグのうち、一つだけ背景をピンクにしたい場合、外部スタイルシートの　li　に　background-color:pink　(背景色＝ピンク)を指定してしまうと、全ての<li>タグに囲まれた文字の背景がピンクになってしまいます。

<ul>
<li>liタグは、リストを作ることができます</li>
<li>liタグは、リストを作ることができます</li>
<li>liタグは、リストを作ることができます</li>
<li>liタグは、リストを作ることができます</li>
<li>liタグは、リストを作ることができます</li>
</ul>
li{background-color:pink}
  • liタグは、リストを作ることができます
  • liタグは、リストを作ることができます
  • liタグは、リストを作ることができます
  • liタグは、リストを作ることができます
  • liタグは、リストを作ることができます

この<li>タグの１個だけの背景をピンクにしたい場合は、CSSの　li　に　background-color:pink　を書くのではなく、　 . (ドット)クラス名　に　background-color:pink　を指定します。このクラス名は半角英数字なら何でも良いです。今回は　.pink　という名前に　background-color:pink　を指定します。

.pink{background-color:pink}

この　.pink　というスタイルシートのクラスは、HTMLタグに入力することができます。今回は複数ある<li>のうち２番目の<li>タグに半角スペースを入力し、　class="pink" と付け足します。

<ul>
<li>liタグは、リストを作ることができます</li>
<li class="pink">liタグは、リストを作ることができます</li>
<li>liタグは、リストを作ることができます</li>
<li>liタグは、リストを作ることができます</li>
<li>liタグは、リストを作ることができます</li>
</ul>
  • liタグは、リストを作ることができます
  • liタグは、リストを作ることができます
  • liタグは、リストを作ることができます
  • liタグは、リストを作ることができます
  • liタグは、リストを作ることができます

スタイルシートのクラス名を指定した<li>タグだけ背景がピンクになりましたね。

今回スタイルシートに作成した　.pink　というクラスは、ほかのHTMLタグのどこにでも、何回でも使うことができます。例えば２番目と４番目の<li>タグに　<li class="pink">とすれば、そのclass属性が入った全ての<li>タグの背景がピンクになります。

次に、１ページのHTMLファイルの中で、一度しか使えないスタイルシートのIDについて説明しますが、その前にスタイルシートのclassに関するまとめを確認しておきましょう。

  1. スタイルシートのclass名スタイルシートに半角英数字で . (ドット)クラス名　として、デザインを記入することができる
  2. HTMLタグにクラス名を入力HTMLタグに半角英数でスペースを入れた後、class="クラス名" の形で入力し、そのタグにだけCSSで指定したデザインを適応させる
  3. スタイルシートのクラスは、何回でもどこのHTMLタグにでも使うことができる