CodeZine(コードジン)

特集ページ一覧

Webサイトの制作/運用の効率化を図る
「ガイドライン策定」のすすめ(後編)

そこが知りたい! Web標準サイトの活かし方(2)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2009/01/13 14:00

目次

セレクタのルール

 セレクタには、複数の種類があり、またそれらを組み合わせて指定することもできるため、記述方法は制作者によってまちまちです。後のメンテナンス性を考慮して、セレクタの記述ルールを規定しておきましょう。

セレクタの扱い方

 要素名のセレクタを、タイプセレクタと呼びますが、これを基本にして、セレクタを拡張することができます。例えば「.examples」のようにclassセレクタだけで指定した場合、CSSを見ただけでは、スタイルの適用対象がどの要素であるのかを判断することができません。制作者以外の人が更新を担当した場合、スタイルの適用対象を特定するために、(X)HTMLを逐一確認しなければならないという手間が発生してしまうかもしれません。従って、どの要素にも適用させたい汎用スタイルとして指定する場合を除き、基本的には、「p.example」のように「タイプセレクタとclassセレクタを組み合わせて指定する」と決めておくと良いでしょう。

[リスト2]「classセレクタのみ」の記述(上)と、「タイプセレクタ.classセレクタ」の記述(下)
/* スタイルの適用対象となる要素が分からない */
.examples {
  background-color: #fff;
  color: #030;
}
/* スタイルの適用対象はp要素 */
p.examples {
  background-color: #fff;
  color: #030;
}

子孫セレクタの扱い方

 また、子孫セレクタの扱い方についてもルールを定めておくと、後々の更新作業で役立ちます。例えば、次のサンプルのような(X)HTMLがあった場合、「div#category a {...}」としても、「div#category ul li a {...}」としても、どちらも「"category"というid名のdiv要素に包括されるa要素」に対してスタイルが適用されるわけです。この両方の記述が混在すると、コードの内容を理解するのが難しくなりますから、子孫セレクタの記述方法の使い分けルールを明記しておくと良いでしょう。

[リスト3](X)HTMLソース
<div id="category">
  <h2><a href="...">カテゴリー</a></h2>
    <ul>
      <li><a href="...">サブカテゴリー1</a></li>
      <li><a href="...">サブカテゴリー2</a></li>
      <li><a href="...">サブカテゴリー3</a></li>
    </ul>
</div>

 使い分けルールの例としては、次のような案が挙げられます。

子孫セレクタの使い分けルールの例
  1. スタイルの適用対象を広い範囲で汎用的に指定する場合は、子孫セレクタの途中の階層を省略する
  2. スタイルの適用対象を特定する場合には、子孫セレクタの階層を利用する

 先のサンプルの(X)HTMLソースで言えば、「h2要素内のa要素も、ul要素内のa要素もスタイルの適用対象としたい場合」が(1)にあたります。この場合、下記サンプルの最初の例のように、子孫セレクタの階層を利用して記述するよりも、その下の例のように、子孫セレクタの途中の階層を省略して、まとめてしまった方がコードを簡略化することができます。

[リスト4]CSSソース:スタイルの適用対象は「div#categoryに含まれるh2要素内のa要素」および「div#categoryに含まれるul要素内のa要素」
div#category h2 a {
  color: #00c;
  background-color: transparent;
}
div#category ul a {
  color: #00c;
  background-color: transparent;
}
[リスト5]CSSソース:スタイルの適用対象は「div#categoryに含まれるすべてのa要素」
div#category a { /* 途中の子孫セレクタを省略 */
  color: #00c;
  background-color: transparent;
}

 一方、スタイルの適用対象を特定し「div#category内のh2要素内のa要素」と「div#category内のul要素内のa要素」のそれぞれに、異なるスタイルを適用させたい場合が(2)にあたります。この場合は、子孫セレクタの階層を利用して次のように記述します。

[リスト6]CSSソース:子孫セレクタの階層を利用してスタイルの適用対象を個別に指定
div#category h2 a {
  color: #000;
  background-color: #fff;
}
div#category ul a {
  color: #fff;
  background-color: #000;
}

 このように使い分けルールを規定しておくと、スタイルの適用範囲を特定しやすく、現場の混乱を防ぐことができるでしょう。

セレクタマップの利用

 また、別途、セレクタのツリー構造を示した「セレクタマップ」を作成しておくのも有効です。子孫セレクタを省略する場合であっても、「セレクタマップ」と照らし合わせて使用することで、スタイルの適用対象を理解しやすくなります。

図3:セレクタマップの例(page-layout.css)
図3:セレクタマップの例

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:そこが知りたい! Web標準サイトの活かし方

もっと読む

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト 宮本麻矢(ミヤモト マヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5