since: 21st/May/2002; Last Modified: 22nd/May/2002
style 要素で定義したスタイルは当該文書だけに適用されます。このとき、当然ですが指定した対象全てに適用されます。上の例の場合は、 sampleApply2.html 中の全ての p 要素に対して適用されます。
極々、例外的な場面で、ある特定の要素だけにスタイルを指定する事も出来ます。この時は、当該要素の開始タグ中に、 style 属性で記述します。 HTML 文書にスタイルを混入させる指定方法ですから、可能な限り避けるべきです。
style 属性の指定は、 XHTML も HTML も同じです。
<p style="background: #ffc; margin: 1em 4em">坂口安吾は、「堕落論」、
「日本文化私観」、「白恥」、「桜の森の満開の下」、「夜長姫と耳男」などが有名な
物書きです。明治３９年新潟に生まれ、第二次大戦後１０年、昭和３０年に脳溢血で没
しました。享年４８歳。無頼派として有名であり、「反逆」と「堕落」がキーワードで
す。神田のアテネ・フランセで仏文を学んだ経験からか、「生」、「生活」、「肉体」、
「実質」にこだわり、「枯淡」、「諦念」、「侘び錆び」を徹頭徹尾否定します。</p>
<p>私は自分の欲望に忠実である事が「誠実」と言う事だと考えます。己の欲するところ
を外的要因で為さぬのならば、それは単純に敗北を意味する。この点で、常軌を逸したと
ころには必ず真実が宿り、強靭であれば正義だと思っています。逆に言えば、己の為すと
ころは、己の欲するところである事が必然的な結論になります。絶望は愚か者の結論。坂
口安吾は絶望して取り澄ますことを嫌い、七転八倒、顛倒混乱、羞恥の底にもがき苦しむ
ことを望みます。全く同感です。</p>
前節で作成した sampleApply2.html の p 要素を、上記の p 要素に置き換えて、 sampleApply3.html として保存してください。ブラウザで開いて表示を確認してください。
style 属性は要素の開始タグ中に記述するので、 HTML 文書の意味のマークアップと表示体裁の指定が混在した文書になります。これではメンテナンス効率がよくありません。 style 属性は、意味と表示体裁が等価である場合に限るべきです。たとえば、「赤」と言う文字を「赤」とすることは、責められる用法ではないと思います。
style 属性は見栄えを指定しているだけであり、意味を示していませんので、出来るだけ使わない方が望ましい事は間違いありません。特定の要素の表示体裁を指定したい場合は、 HTML の id 属性か、 class 属性を使います。
要素を一意的に識別するための属性で、 a 要素の目的地になりえます。たとえば、上の例の場合は、次のようにしてみましょう：
<p id="profile">坂口安吾は、「堕落論」、「日本文化私観」、「白恥」、「桜の森の
満開の下」、「夜長姫と耳男」などが有名な物書きです。明治３９年新潟に生まれ、第二
次大戦後１０年、昭和３０年に脳溢血で没しました。享年４８歳。無頼派として有名であ
り、「反逆」と「堕落」がキーワードです。神田のアテネ・フランセで仏文を学んだ経験
からか、「生」、「生活」、「肉体」、「実質」にこだわり、「枯淡」、「諦念」、「侘
び錆び」を徹頭徹尾否定します。</p>
<p>私は自分の欲望に忠実である事が「誠実」と言う事だと考えます。己の欲するところ
を外的要因で為さぬのならば、それは単純に敗北を意味する。この点で、常軌を逸したと
ころには必ず真実が宿り、強靭であれば正義だと思っています。逆に言えば、己の為すと
ころは、己の欲するところである事が必然的な結論になります。絶望は愚か者の結論。坂
口安吾は絶望して取り澄ますことを嫌い、七転八倒、顛倒混乱、羞恥の底にもがき苦しむ
ことを望みます。全く同感です。</p>
上の例の第一段落は、 "profile" という文字列で識別可能です。第一段落に、 "profile" という ID が与えられました。
先ほど作った sampleApply3.html の p 要素を上記の id 属性を使った例のように書き換えて、ファイル名を sampleApply31.html にして保存してください。
id を与えた p 要素に適用する外部スタイルシートを、ファイル名 sampleApply31.css にして、内容に次のように記述して保存してください。
p#profile { background: #cfc;
margin: 1em 4em }
id 属性が与えられた要素に対するスタイルは、要素名に "#profile" のように続けます。id="hogehoge" が与えられた h1 要素に対するスタイルの場合は、 h1#hogehoge {...省略...} になるわけです。
先ほど作成／編集／保存した sampleApply31.html から、この外部スタイルシートにリンクするように、 head 要素を次のように書き換えて保存してください。
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; 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" />
<?xml-stylesheet href="./atomic.css" type="text/css" media="screen" ?>
<link rel="stylesheet" href="./sampleApply31.css" type="text/css" media="screen" />
<?xml-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="profile" が与えられた段落は、背景色が薄緑になっていることが確認できます。
id 属性の属性値は、当該 HTML 文書の中で一回だけしか使えません。 id="profile" が、一つの HTML 文書の中で一回しか記述されないと言う事です。これは要素を問いません。 p 要素に対して一回 id="profile" と記述したら、他の p 要素は勿論、 h1 要素だろうが a 要素だろうが、開始タグ中に id="profile" と記述する事は出来ません。id 属性は要素を識別するためのものなので、複数回出現すると、要素を特定できなくなってしまうからです。
id 属性は一つの HTML 文書内に一回だけしか現れず、要素を特定するために使うものでした。一方、複数回の出現が許され、要素を分類するために使うのが、 class 属性です。
たとえば、プロフィールを記述した段落が、一つの文書内に複数回現れるならば、それらの段落全ての開始タグに class="profile" を記述すれば、それらの段落は profile クラスに属する段落となります。
class 属性にせよ、 id 属性にせよ、属性値には任意の文字列が許されますが、半角英数文字しか使えません。プロフィールなら profile、注意書きなら note など、意味を把握できる文字列を使うべきです。スタイルシートを適用する対象としてだけ捕らえ、 class="style1" などとすることは望ましくありません。これでは意味がわかりませんね。何故スタイルシートを適用するのか、その意味が把握できるようにしておいた方が、後々のメンテナンスも楽になります。
sampleApply31.html のp 要素を次のように書き換え、ファイル名を sampleApply32.html として保存してください。
<p class="profile">坂口安吾は、「堕落論」、「日本文化私観」、「白恥」、「桜
の森の満開の下」、「夜長姫と耳男」などが有名な物書きです。明治３９年新潟に生まれ、
第二次大戦後１０年、昭和３０年に脳溢血で没しました。享年４８歳。無頼派として有名
であり、「反逆」と「堕落」がキーワードです。神田のアテネ・フランセで仏文を学んだ
経験からか、「生」、「生活」、「肉体」、「実質」にこだわり、「枯淡」、「諦念」、
「侘び錆び」を徹頭徹尾否定します。</p>
<p>私は自分の欲望に忠実である事が「誠実」と言う事だと考えます。己の欲するところ
を外的要因で為さぬのならば、それは単純に敗北を意味する。この点で、常軌を逸したと
ころには必ず真実が宿り、強靭であれば正義だと思っています。逆に言えば、己の為すと
ころは、己の欲するところである事が必然的な結論になります。絶望は愚か者の結論。坂
口安吾は絶望して取り澄ますことを嫌い、七転八倒、顛倒混乱、羞恥の底にもがき苦しむ
ことを望みます。全く同感です。</p>
外部スタイルシート sampleApply32.css を新たに作成し、内容を次のように記述して保存してください。
p.profile { background: #fcc;
margin: 1em 4em }
class 属性が与えられた要素に対するスタイルは、要素名に ".profile" のようにして続けます。class="hogehoge" が与えられた h1 要素に対するスタイルの場合は、 h1.hogehoge {...省略...} になるわけです。
先ほど編集／保存した sampleApply32.html からこの外部スタイルシートへリンクするために、 head 要素を次のように書き換えて保存します。
<head> <meta http-equiv="content-type" content="application/xhtml+xml; 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" /> <?xml-stylesheet href="./atomic.css" type="text/css" media="screen" ?> <link rel="stylesheet" href="./sampleApply32.css" type="text/css" media="screen" /> <?xml-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="profile" を与えた段落の背景色が薄紅になっている事が分かります。