オリジナルテンプレートへの道のり

■ HTMLタグをCSSタグで装飾する 〜パート2〜
あの人気ブログ「動画の桜」の運営者エロ流さんによるデザイン講座第四回目です。

【今回のお題】 前回はCSSでHTMLを装飾する属性の一つで、オリジナルの名前を付けられる「class」について学びました。今回はもう一つの属性「id」属性の設定方法の紹介から始まります。

CSSの記述術・その2

■ 「id」という属性
「id」属性も以下のように使用することで、HTMLタグにオリジナルの名前をつけることが可能です。

HTMLファイル -----------------------------------------
<h2 class="tigers">阪神</p>
<h2 class="marines">ロッテ</p>
-------------------------------------------------------

ただし、CSSの記述は「class」属性とは違い、以下のようにセレクタの先頭に「#(シャープ)」をつけてください。

CSSファイル -----------------------------------------
#tigers {
color: #FFCC00;
}

#marines {
color: #000000;
}
-------------------------------------------------------

同じ機能を持っている属性ですが、「class」属性と「id」属性は使用回数に違いがあります。

「class」属性は、1つのページ内に何度使用してもOKですが、「id」属性は1つのページ内に一度しか使用してはいけません。

であれば、何度も使える「class」属性ばかり使えばいいのでは?という声が聞こえてきそうですが、確かにその通りですね。ただ、CSSファイルもCSSスタイルをたくさん記述すれば、一杯になって何が何だか分からなくなってしまいますよね。私の場合は、CSSを整理する為に記述方法の違う「id」属性を使っています。

「id」のこんな使い方

■ ページ内リンクのリンク先
皆さんも使われたことがあると思いますが、「id」属性は、ページ内リンクのリンク先としても使用することが出来ます。例えば、以下のように「阪神関連の記事」というテキストに「#tigers」というリンクを貼ってクリックすると、id="tigers"のある箇所までジャンプするのです。

HTMLファイル -----------------------------------------
<a href="#tigers">阪神関連の記事</a> ←このリンクをクリックすると
<p>野球関連記事</p>
<p id="tigers">阪神</p> ←ここまでジャンプします。
<p id="marines">ロッテ</p>
-------------------------------------------------------

以上が、これからCSSデザインをする上で必ず覚えておかなければならないCSS記述の基本になります。

注意事項

■ 記述の時に守るべきルール

  • セレクタの先頭に「数字」を使用してはいけません。
  • セレクタには、「_(アンダーバー)」や「−(ハイフン)」の使用は控えましょう。ブラウザによっては正常に表示されない場合があります。
  • 全角スペースを使用してはいけません。
  • 属性と値は小文字で記述しましょう。
次回予告
これでCSSでの基本的な記述法は終わりです。 次回からは実践的なデザインテクニックに入っていきます。次の段階に入る前に、今まで学んできた事を是非おさらいしておきましょう。

エロ流さんプロフィール

名前: HARU(ハル)
職業: ITベンチャー勤務、3流フォトグラファー
趣味: 写真、読書、3流映画鑑賞、一人温泉旅
夢: フォトグラファー