since: 21st/May/2002; Last Modified: 10th/Dec./2006
極々、例外的な場面で、ある特定の要素だけにスタイルを指定する事も出来ます。この時は、当該要素の開始タグ中に、 style 属性で記述します。 HTML 文書にスタイルを混入させる指定方法ですから、可能な限り避けるべきです。
style 属性の指定は、 XHTML も HTML も同じです。
<p style="background: #ffc; font-size: 1.5em">いづれの御時にか、女御、更衣あまた
さぶらひたまひけるなかに、いとやむごとなき際にはあらぬが、すぐれて時めきたまふあ
りけり。</p>
<p>はじめより我はと思ひ上がりたまへる御方がた、めざましきものにおとしめ嫉みたま
ふ。同じほど、それより下臈の更衣たちは、ましてやすからず。朝夕の宮仕へにつけても
、人の心をのみ動かし、恨みを負ふ積もりにやありけむ、いと篤しくなりゆき、もの心細
げに里がちなるを、いよいよあかずあはれなるものに思ほして、人のそしりをもえ憚らせ
たまはず、世のためしにもなりぬべき御もてなしなり。</p>
前節で作成した sampleApply2.html の p 要素を、上記の p 要素に置き換えて、 sampleApply3.html として保存してください。ブラウザで開いて表示を確認してください。
style 属性を記述するときには、それが CSS で記述されていることを明示するために、meta 要素が必要です。HTML 4 では次のように記述します。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>CSS とはなんだろうか</title>
:
XHTML はこの記述をすべきではないとされています。つまり、XHTML では style 属性を記述しても、その値が CSS として解釈すべきであることを文書中で明示的に指定する方法がありません。
style 属性は要素の開始タグ中に記述するので、 HTML 文書の意味のマークアップと表示体裁の指定が混在した文書になります。これではメンテナンス効率がよくありません。 style 属性は、意味と表示体裁が等価である場合に限るべきです。たとえば、「赤」と言う文字の色を「赤」で表示することは、責められる用法ではないと思います。
style 属性は見栄えを指定しているだけであり、意味を示していませんので、出来るだけ使わない方が望ましい事は間違いありません。特定の要素の表示体裁を指定したい場合は、 HTML の id 属性か、 class 属性を使います。
属性 style の利用は可能な限り避けた方が無難です。ここでは、その回避方法として、次の三つを紹介します。
id 属性を与える要素を一意的に識別するための属性です。 a 要素によるハイパーリンクの目的地にもなります。たとえば、上の例の場合は、次のようにしてみましょう：
<p id="first-paragraph">いづれの御時にか、女御、更衣あまたさぶらひたまひけるなかに、いとや
むごとなき際にはあらぬが、すぐれて時めきたまふありけり。</p>
<p>はじめより我はと思ひ上がりたまへる御方がた、めざましきものにおとしめ嫉みたま
ふ。同じほど、それより下臈の更衣たちは、ましてやすからず。朝夕の宮仕へにつけても
、人の心をのみ動かし、恨みを負ふ積もりにやありけむ、いと篤しくなりゆき、もの心細
げに里がちなるを、いよいよあかずあはれなるものに思ほして、人のそしりをもえ憚らせ
たまはず、世のためしにもなりぬべき御もてなしなり。</p>
上の例の第一段落は、 "first-paragraph" という文字列で識別可能です。
先ほど作った sampleApply3.html の p 要素を上記の id 属性を使った例のように書き換えて、ファイル名を sampleApply31.html にして保存してください。
id を与えた p 要素に適用する外部スタイルシートを、ファイル名 sampleApply31.css にして、内容に次のように記述して保存してください。
p#first-paragraph { background: #cfc;
font-size: 1.5em }
id 属性が与えられた要素に対するスタイルは、要素名に "#first-paragraph" のように続けます。id="hogehoge" が与えられた h1 要素に対するスタイルの場合は、 h1#hogehoge {...省略...} になるわけです。
先ほど作成／編集／保存した sampleApply31.html から、この外部スタイルシートにリンクするように、 head 要素を次のように書き換えて保存してください。
<head>
<title>源氏物語 第一帖 桐壺 第一段</title>
<link rel="stylesheet" href="./atomic.css" type="text/css" media="screen" />
<link rel="stylesheet" href="./sampleApply31.css" type="text/css" media="screen" />
</head>
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>源氏物語 第一帖 桐壺 第一段</title>
<link rel="stylesheet" href="./atomic.css" type="text/css" media="screen">
<link rel="stylesheet" href="./sampleApply31.css" type="text/css" media="screen">
</head>
sampleApply31.html をブラウザで表示すると、 id="first-paragraph" が与えられた段落は、背景色が薄緑になっていることが確認できます。
id 属性の属性値は、当該 HTML 文書の中で一回だけしか使えません。 id="first-paragraph" が、一つの HTML 文書の中で一回しか記述されないと言う事です。これは要素を問いません。 p 要素に対して一回 id="first-paragraph" と記述したら、他の p 要素は勿論、 h1 要素だろうが a 要素だろうが、開始タグ中に id="first-paragraph" と記述する事は出来ません。id 属性は要素を識別するためのものなので、複数回出現すると、要素を特定できなくなってしまうからです。
id 属性は一つの HTML 文書内に一回だけしか現れず、要素を特定するために使うものでした。一方、複数回の出現が許され、要素を分類するために使うのが、 class 属性です。
たとえば、プロフィールを記述した段落が、一つの文書内に複数回現れるならば、それらの段落全ての開始タグに class="profile" を記述すれば、それらの段落は profile クラスに属する段落となります。
class 属性にせよ、 id 属性にせよ、属性値には任意の文字列が許されますが、半角英数文字しか使えません。プロフィールなら profile、注意書きなら note など、意味を把握できる文字列を使うべきです。スタイルシートを適用する対象としてだけ捕らえ、 class="style1" などとすることは望ましくありません。これでは意味がわかりませんね。何故スタイルシートを適用するのか、その意味が把握できるようにしておいた方が、後々のメンテナンスも楽になります。
sampleApply31.html のp 要素を次のように書き換え、ファイル名を sampleApply32.html として保存してください。
<p class="first-paragraph">いづれの御時にか、女御、更衣あまたさぶらひたまひける
なかに、いとやむごとなき際にはあらぬが、すぐれて時めきたまふありけり。</p>
<p>はじめより我はと思ひ上がりたまへる御方がた、めざましきものにおとしめ嫉みたま
ふ。同じほど、それより下臈の更衣たちは、ましてやすからず。朝夕の宮仕へにつけても
、人の心をのみ動かし、恨みを負ふ積もりにやありけむ、いと篤しくなりゆき、もの心細
げに里がちなるを、いよいよあかずあはれなるものに思ほして、人のそしりをもえ憚らせ
たまはず、世のためしにもなりぬべき御もてなしなり。</p>
外部スタイルシート sampleApply32.css を新たに作成し、内容を次のように記述して保存してください。
p.first-paragraph { background: #fcc;
font-size: 1.5em }
class 属性が与えられた要素に対するスタイルは、要素名に ".first-paragraph" のようにして続けます。例えば、class="hogehoge" が与えられた h1 要素に対するスタイルの場合は、 h1.hogehoge {...省略...} になるわけです。
先ほど編集／保存した sampleApply32.html からこの外部スタイルシートへリンクするために、 head 要素を次のように書き換えて保存します。
<head>
<title>源氏物語 第一帖 桐壺 第一段</title>
<link rel="stylesheet" href="./atomic.css" type="text/css" media="screen" />
<link rel="stylesheet" href="./sampleApply32.css" type="text/css" media="screen" />
</head>
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>源氏物語 第一帖 桐壺 第一段</title>
<link rel="stylesheet" href="./atomic.css" type="text/css" media="screen">
<link rel="stylesheet" href="./sampleApply32.css" type="text/css" media="screen">
</head>
sampleApply32.html をブラウザで表示すると、class="first-paragraph" を与えた段落の背景色が薄紅になっている事が分かります。
class 属性と id 属性はむやみに使わないようにしましょう。便利なのですが、使いすぎると管理する負荷が高くなるからです。属性の値には、意味を表わす文字列を選択し、体系的に管理する必要があります。
ここでは、最初の段落を識別するために、最初の p 要素に class 属性や id 属性を与えました。CSS 2.0 互換のブラウザの場合は、最初の段落を識別するように CSS を記述することもできます。今の場合は、 first-child 擬似要素が使えます。
HTML には特別のことは施しません。sampleApply2.html を用います。
p:first-child { background: #fcf;
font-size: 1.5em }
上記の CSS を外部スタイルシート sampleApply33.css として保存してください。
sampleApply2.html から、上記の CSS へのリンクを作成したものを、sampleApply33.html として保存します。
<head>
<title>源氏物語 第一帖 桐壺 第一段</title>
<link rel="stylesheet" href="./atomic.css" type="text/css" media="screen" />
<link rel="stylesheet" href="./sampleApply33.css" type="text/css" media="screen" />
</head>
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>源氏物語 第一帖 桐壺 第一段</title>
<link rel="stylesheet" href="./atomic.css" type="text/css" media="screen">
<link rel="stylesheet" href="./sampleApply33.css" type="text/css" media="screen">
</head>
sampleApply33.html をブラウザで表示すると、最初の段落の背景色が薄紫になっている事が分かります。
|
|
| 図：first-child 擬似要素を指定した例 |