もくじ

同じタグに異なるスタイル

id属性とclass属性

ここまで、タグごとのスタイルの指定をしてきました。しかし、同じタグでも異なるスタイルを指定したい場合がでてきます。そんなときは、idclassという属性を指定することで実現できます。

属性とはahrefの様に、開始タグの中に書かれる、ある種の指示です。

<abcd efgh="ijkl">内容</abcd>
      属性   値

という要素(abcdはあくまで架空のタグです)があった時に、この要素には「efghという属性がついていて、その値はijklである」といいます。

属性にはいろいろありますが、ここではid属性とclass属性を紹介します。

id属性

開始タグに本文中にid="name"の様に書き加えます。nameの部分は目的に応じてわかりやすい文字列を入れます。半角英数文字に限ります。1文字目は英字で後は英字と数字を組み合わせます。英数字の他に-_など若干の記号が許される場合もありますが、無用なトラブルを避けるために英数字にしておきましょう。(htmlとしての規定、xml文書としての制限、cssで使用する場合の制約、バージョンによる違い、ブラウザの対応など考慮すべきことがたくさんになりますので面倒です)

あるh2要素だけを文字色を赤にするには、そこにid="mail"という属性を書きます。mailは名前の例です。電子メールの見出しの場所なのでこの名前にしました。

<h2 id="mail">電子メール</h2>

こうしておいて、スタイルシートにはこのように指定をします。

h2#mail {color:#ff0000;}

idの場合は同じidを複数の場所に書けないので、h2を省くことも可能です。

#mail {color:#ff0000;}

idはタグの中に付ける目印です。同じページに同じものが2つあってはいけません。h2にid="mail"としたのなら、h1にもpにもこのidをつけることはないので、タグ名を省いても問題ないのです。

では次のように指定されていた場合はどうなるでしょうか。

h2 {color:green;  background-color:palegreen;}
h2#mail {color:red;}

<h2 id="mail">の部分は、背景色は他のh2要素と同じくpalegreenの色が付き、文字色だけredになります。

id属性は、他にも役割があります。リンク先のファイル名に加えてページ内の場所を示すことにも使います。(これをフラグメント指定といいます)また、JavaScriptなどで文書中のオブジェクトの指定などにも使用します。

属性の名前はタグの役割を考えてつけます。赤くしたいからid="red"などと安易な名前を付けてはいけません。

class属性

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です。

無印,kiso,ouyouがそれぞれ緑橙赤になっています

クラスの名前は文章の役割を中心に考えましょう。上の例では「基礎」と「応用」のクラス分けをしています。これを「橙」と「赤」のクラス分けにしようとclass="orange"class="red"にするのはよくありません。後でデザインの都合で水色と青の組み合わせにしようと方針が変わった時に、class="red"が青色で表示されるというちぐはぐなことになってしまいます。

スタイルシートに次のように書くこともできます。

.kiso {color:orange;}

この場合、<h2 class="kiso">だけでなく、<p class="kiso">なども指定の対象になります。

class はグループ分けなので、同じ種類のタグでも異なるタグでも複数のタグに同じ名前を付けることができます。しかし、id はたとえ異なるタグの中でも同じページには同じ名前が2つあってはいけません。

課題です joho2.html

joho.htmlをコピーしてjoho2.htmlとし、同じ種類のタグ(ここでは、h2またはpまたはh2,p両方)にclass(やid)を使って異なるスタイルを適用したものにしなさい

参考です 新しいファイルを作る方法

方法 その1

自分で作成した、joho.html を元にしてつくる方法です。

エディタの新規作成をクリックしてエディタの新しいウインドウを作る。

joho.htmlを開いて、必要な部分を「コピー」し、新しいウインドウに「貼り付け」をする。

保存時に joho2.html という名前をつけるが、早めに一度保存するとタグに色がつくので楽に編集できる。public_html の中に保存するのは同じである。

もちろん編集が終わったら、必ず上書き保存をする。

方法 その2

自分で作成した、joho.html を元にしてつくる方法です。
joho.html をエディタで開く。すぐにメニューバーの[ファイル]から[別名で保存]を選ぶ。public_html の中に joho2.html という名前で保存する。

これで編集中のファイルは joho.html でなく、joho2.html になっているので、このまま編集を続ける。残したいものを残し、他は削除してしまう。

この方法では似たようなページを作るときはよいが、全く違うページを作るときは削除する量が多く煩わしいかもしれない。行にまたがってドラッグし、いっぺんに削除するのがいいだろう。

一番注意すべきなのは、すぐに名前を付けて保存すること。joho.html のままで編集していて、間違って上書き保存してしまうと、joho.html の内容が失われてしまう。

もちろん編集が終わったら、必ず上書き保存をする。

方法 その3

ファイルマネージャを使ってコピーし、ファイルの名前をjoho2.htmlにしたあとエディタで開いて編集する。エディタで開いているファイルの名前を変更する時はいったんファイルを閉じてから行うか、「方法 その2」で済ませる。

gnomeのファィルマネージャでは次の方法が使える

  1. ファイルのアイコンを、[Ctrl]キーを押しながら近くにドラッグ。joho.htmlならjoho(コピー).htmlという名前のファイルができるので、右クリックをして[名前の変更]を選択。joho2.htmlにする。
  2. ファイルのアイコンを、右クリックをして[コピー]を選び、近くの何もないところで右クリックをして[貼り付け]を選ふ。後は上と同じ。