クラスによるスタイル指定

特定の要素全体のスタイル指定

たとえば、スタイル定義ファイル(style.css)で、

p {color: red;}

とすると、全てのp要素(段落)が "red" つまり赤字になる。しかし、 ときには一部分だけスタイルを変えたいことがある。 典型的な例としては重要なところは 色を変えて書いたりすることが当てはまる。このような場合は、定義する スタイルにクラス名をつけておき、実際にスタイルを 変えたい個々の要素でそのクラス名を指定する。クラスは以下のように定義する。

sample.css 追加分

 .chuui {color: red;}

.chuui のように、ピリオドに続けて任意の英数字を 書いて定義するとそれはスタイルのクラス名となる。

このようにして定義したクラス名付きのスタイルは実際の要素では 以下のように利用する。

sample.html 追加分

<p class="chuui">みなさん注意して下さい………</p>
<p>ここは普通の文章</p>

↓
実際の見映え

みなさん注意して下さい………

ここは普通の文章

要素内の一部のスタイル指定

p要素(段落)にクラス指定を行なうと、その段落全体がクラスのスタイルに 支配される。そうではなくて、ある要素に含まれるテキストの 一部分だけにスタイルを適用したいことがある。

……そして1192年、源頼朝は 鎌倉幕府を開いた。

このような場合は、テキストの「ここからここまで」を括るためだけに 存在する、span要素を活用する。span要素は それだけで使っても何の働きもしない。

<p>あいうえお<span>かきくけこ</span>さしすせそ</p>

↓

あいうえおかきくけこさしすせそ

しかし、「かきくけこ」だけを括るという働きがあるので、これに スタイルを指定する。

style.css 追加分

.juyo {background-color: lavender;}

style.html 追加分

<p>あいうえお<span class="juyo">かきくけこ</span>さしすせそ</p>

↓

あいうえおかきくけこさしすせそ

ブロック全体のスタイル指定

【前提知識】

HTMLの要素にはいくつかあるが、

の2種類がある。前者をインライン要素、後者を ブロックレベル要素という。簡単にいえば、 行を変えないか、行を変えるかの違いである。

今回利用した span は、行を変えないインライン要素である。

前回紹介した、p, ul, ol, dl, table などはいずれも ブロックレベル要素であり、開始タグを書いたところで新たな ブロックが始まる(行が変わる)。

1つ以上のブロックレベル要素をまとめてスタイル指定を行なうには、 引用段落を意味する blockquote 要素か、 ブロックを括るためだけに存在する div 要素に クラス指定を与えたものを利用する。

たとえば、以下のような修飾を施す場合を考える。

今月のぽかぽかプレゼントの問題です。

【問題】

次のうち、大文字・小文字どちらで書いても良いのはどれか。

  1. e-mail アドレス
  2. WebページのURL
  3. Unixのコマンド

正解と思う番号を書いて2400年3月3日に下記の宛先までお送り下さい。正解 者には羽黒海岸「ホテル羽黒浜」の宿泊券2名様分をプレゼント致します。

宛先: ondanka@is.koeki-u.ac.jp

もし、【問題】の部分の装飾を無しにして、ベタに書くのであれば HTMLソースは以下のようになる。

 <p>今月のぽかぽかプレゼントの問題です。</p>
 <p>【問題】</p>
 <p>次のうち、大文字・小文字どちらで書いても良いのはどれか。</p>
 <ol>
  <li> e-mail アドレス
  <li> WebページのURL
  <li> Unixのコマンド
 </ol>
 <p>正解と思う番号を書いて2400年3月3日に
 下記の宛先までお送り下さい。
 正解者には羽黒海岸「ホテル羽黒浜」の宿泊券
 2名様分をプレゼント致します。</p>

 <p>宛先: <code>ondanka@is.koeki-u.ac.jp</code></p>

↓
実際の見映え

今月のぽかぽかプレゼントの問題です。

【問題】

次のうち、大文字・小文字どちらで書いても良いのはどれか。

  1. e-mail アドレス
  2. WebページのURL
  3. Unixのコマンド

正解と思う番号を書いて2400年3月3日に 下記の宛先までお送り下さい。 正解者には羽黒海岸「ホテル羽黒浜」の宿泊券 2名様分をプレゼント致します。

宛先: ondanka@is.koeki-u.ac.jp

このうち、【問題】の部分だけをまとめてそこだけ特別なものと分かる 装飾を施したい。この場合は、問題文全体を「引用されたもの」という 位置付けで考えて良いので、全体を blockquote で括る。

 <p>今月のぽかぽかプレゼントの問題です。</p>
 <blockquote>
  <p>【問題】</p>
  <p>次のうち、大文字・小文字どちらで書いても良いのはどれか。</p>
  <ol>
   <li> e-mail アドレス
   <li> WebページのURL
   <li> Unixのコマンド
  </ol>
 </blockquote>
 <p>正解と思う番号を書いて2400年3月3日に
 下記の宛先までお送り下さい。
 正解者には羽黒海岸「ホテル羽黒浜」の宿泊券
 2名様分をプレゼント致します。</p>

 <p>宛先: <code>ondanka@is.koeki-u.ac.jp</code></p>

↓
実際の見映え

今月のぽかぽかプレゼントの問題です。

【問題】

次のうち、大文字・小文字どちらで書いても良いのはどれか。

  1. e-mail アドレス
  2. WebページのURL
  3. Unixのコマンド

正解と思う番号を書いて2400年3月3日に 下記の宛先までお送り下さい。 正解者には羽黒海岸「ホテル羽黒浜」の宿泊券 2名様分をプレゼント致します。

宛先: ondanka@is.koeki-u.ac.jp

これだけでも十分【問題】の部分が目立つので良いHTML文書だが、 さらに効果を狙うには、グループ化したブロックに働くクラスを作成する。

スタイル定義ファイル(sample.css)追加分

.question {
  background-color: #b1efc9; /* 薄緑 */
  background-image: url(quote-bg.jpg);
  padding-left: 2em;
  border: 2px solid red;
}

そして、上記で作成した question クラスを【問題】の部分に 適用する。

HTMLファイル

 <p>今月のぽかぽかプレゼントの問題です。</p>
 <blockquote class="question">
  <p>【問題】</p>
  <p>次のうち、大文字・小文字どちらで書いても良いのはどれか。</p>
  <ol>
   <li> e-mail アドレス
   <li> WebページのURL
   <li> Unixのコマンド
  </ol>
 </blockquote>
 <p>正解と思う番号を書いて2400年3月3日に
 下記の宛先までお送り下さい。
 正解者には羽黒海岸「ホテル羽黒浜」の宿泊券
 2名様分をプレゼント致します。</p>

 <p>宛先: <code>ondanka@is.koeki-u.ac.jp</code></p>

以上の変更により【問題】の部分のスタイルが変わる。

今月のぽかぽかプレゼントの問題です。

【問題】

次のうち、大文字・小文字どちらで書いても良いのはどれか。

  1. e-mail アドレス
  2. WebページのURL
  3. Unixのコマンド

正解と思う番号を書いて2400年3月3日に下記の宛先までお送り下さい。正解 者には羽黒海岸「ホテル羽黒浜」の宿泊券2名様分をプレゼント致します。

宛先: ondanka@is.koeki-u.ac.jp

→ スタイルシートの使い方

(C)2004 OKOMA Lab. koeki-u.ac.jp