ここまで、タグごとのスタイルの指定をしてきました。しかし、同じタグでも異なるスタイルを指定したい場合がでてきます。そんなときは、id
とclass
という属性を指定することで実現できます。
開始タグに本文中にid="name"
の様に書き加えます。name
の部分は目的に応じてわかりやすい文字列を入れます。半角英数文字に限ります。1文字目は英字で後は英字と数字を組み合わせます。英数字の他に-_
など若干の記号が許される場合もありますが、無用なトラブルを避けるために英数字にしておきましょう。(htmlとしての規定、xml文書としての制限、cssで使用する場合の制約、バージョンによる違い、ブラウザの対応など考慮すべきことがたくさんになりますので面倒です)
<h2 id="mail">電子メール</h2>
スタイルシートにはこのように指定をします。
h2#mail {color:#ff0000;}
id="name"
が指定されているh2要素だけにこのスタイルが適用されます。
またはこのようにh2を省くことも可能です。
#mail {color:#ff0000;}
idはタグの中に付ける目印です。同じページに同じものが2つあってはいけません。また、全部の要素につける必要はありません。必要な物にだけ付けます。
では次のように指定されていた場合はどうなるでしょうか。
h2 {color:green; background-color:palegreen;}
h2#mail {color:red;}
<h2 id="mail">
の部分は、背景色は他のh2
要素と同じくpalegreenの色が付き、文字色だけredになります。
id属性は、他にも役割があります。リンク先のファイル名に加えてページ内の場所を示すことにも使います。(これをフラグメント指定といいます)また、JavaScriptなどで文書中のオブジェクトの指定などにも使用します。赤くしたいからid="red"
などと安易な名前を付けてはいけません。
id属性が特定の場所に名前を付ける役割ですが、class属性はクラス分け(分類)のための物です。同じ種類のものに同じ名前を付けます。
名前の付け方はid属性と同じで、半角英数文字に限ります。1文字目は英字で後は英字と数字を組み合わせます。
例えば、本文中に
<h2>電子メール</h2> ………………………………… <h2>ウェブページ</h2> ………………………………… <h2 class="kiso">課題1</h2> ………………………………… <h2 class="kiso">課題2</h2> ………………………………… <h2 class="ouyou">課題3</h2> ………………………………… <h2 class="ouyou">課題4</h2> …………………………………
とあって、スタイルに
h2 {color:green; background-color:palegreen;} h2.kiso {color:orange;} h2.ouyou {color:red;}
としてあれば、どのグループにも入らないh2はgreen
に,class="kiso"
というグループのh2はorange
に、class="ouyou"
というグループのh2はred
にするということができます。背景色は全部palegreen
です。
クラスの名前は文章の役割を中心に考えましょう。上の例では「基礎」と「応用」のクラス分けをしています。これを「橙」と「赤」のクラス分けにしようとclass="orange"
、class="red"
にするのはよくありません。後でデザインの都合で水色と青の組み合わせにしようと方針が変わった時に、class="red"
が青色で表示されるというちぐはぐなことになってしまいます。
スタイルシートに次のように書くこともできます。
.kiso {color:orange;}
この場合、<h2 class="kiso">
だけでなく、<p class="kiso">
なども指定の対象になります。
class はグループ分けなので、同じ種類のタグでも異なるタグでも複数のタグに同じ名前を付けることができます。しかし、id はたとえ異なるタグの中でも同じページには同じ名前が2つあってはいけません。
joho.htmlをコピーしてjoho2.htmlとし、同じ種類のタグ(ここでは、h2またはpまたはh2,p両方)にclass(やid)を使って異なるスタイルを適用したものにしなさい
自分で作成した、joho.html を元にしてつくる方法です。
エディタの新規作成をクリックしてエディタの新しいウインドウを作る。
joho.htmlを開いて、必要な部分を「コピー」し、新しいウインドウに「貼り付け」をする。
保存時に joho2.html という名前をつけるが、早めに一度保存するとタグに色がつくので楽に編集できる。public の中に保存するのは同じである。
もちろん編集が終わったら、必ず上書き保存をする。
自分で作成した、joho.html を元にしてつくる方法です。
joho.html をエディタで開く。すぐにメニューバーの[ファイル]から[別名で保存]を選ぶ。public の中に joho2.html という名前で保存する。
これで編集中のファイルは joho.html でなく、joho2.html になっているので、このまま編集を続ける。残したいものを残し、他は削除してしまう。
この方法では似たようなページを作るときはよいが、全く違うページを作るときは削除する量が多く煩わしいかもしれない。行にまたがってドラッグし、いっぺんに削除するのがいいだろう。
一番注意すべきなのは、すぐに名前を付けて保存すること。joho.html のままで編集していて、間違って上書き保存してしまうと、joho.html の内容が失われてしまう。
もちろん編集が終わったら、必ず上書き保存をする。
ファイルマネージャを使ってコピーし、ファイルの名前をjoho2.htmlにしたあとエディタで開いて編集する。エディタで開いているファイルの名前を変更する時はいったんファイルを閉じてから行うか、「方法 その2」で済ませる。
gnomeのファィルマネージャでは次の方法が使える