CSS3って何?注目機能をピックアップ

2011年6月1日(水)
宮本 麻矢(著)山田 祥寛(監修)

より便利になったCSS3の追加セレクタ

CSS3の特徴としては、CSS2.1よりも、属性セレクタや擬似クラスなどのセレクタが大幅に拡張されている点が挙げられます。

CSS2.1の属性セレクタでは完全一致による指定しかできませんでしたが、CSS3では、より細かく部分一致で指定できます。次のサンプルは、リンクの種類によってウィンドウアイコンやpdfアイコンを表示するものです。

3

図3:アイコンによってクリック前にリンク先の内容がわかる

これまでは、a要素にclass属性を指定して制御するのが一般的でしたが、「a要素のhref属性がhttpで始まる」という指定や「a要素のhref属性がpdfで終わる」という指定を属性セレクタで制御できて便利です。

[リスト01]CSS3の属性セレクタでは部分一致による指定が可能

a[href^=http]{  /* a要素のhref属性がhttpで始まる場合 */
  background:url("window.gif") no-repeat right center;
  padding-right: 30px;
}
a[href$=pdf]{  /* a要素のhref属性がpdfで終わる場合 */
  background:url("pdf.gif") no-repeat right center;
  padding-right: 30px;
}

また擬似クラスセレクタにおいても、HTMLソースをシンプルにできる便利なものが増えています。次のサンプルは、横並びのテキストリンクの間に区切り線を入れたよく使われるナビゲーションです。

3

図4:間に区切り線のある横並びのテキストリンク

これは、li要素をinline表示にして横並びにし、border-rightプロパティで区切り線を表現したものです。末尾に不要な区切り線が表示されないようにするため、CSS2.1では、最後のli要素にclass属性を追記して制御するのが一般的です。CSS3であれば、last-child擬似クラスで、簡単に最後のli要素に対してスタイルを適用することができるので、HTMLにデザインのためのコードを加える必要がありません。

[リスト02]last-child擬似クラスで、末尾の区切り線を表示しない

ul#nav li {
  display: inline; /* インライン表示で横並びに */
  border-right: 1px solid #ccc; /* 右側に区切り線 */
}
ul#nav li:last-child {
  border-right: none; /* 最後のli要素の場合、区切り線を表示しない */
}

次の表2は、CSS3で追加されたセレクタです。

表2:CSS3で追加されたセレクタ一覧

パターン 説明
E[foo^="bar"] 属性「foo」の値が「bar」と前方一致するE要素
E[foo$="bar"] 属性「foo」の値が「bar」と後方一致するE要素
E[foo*="bar"] 属性「foo」の値が「bar」と部分一致するE要素
E:root ドキュメントのルートにあるE要素
E:nth-child(n) n番目の子要素E
E:nth-last-child(n) 最後からn番目の子要素E
E:nth-of-type(n) 兄弟関係にあるもののうちn番目のE要素
E:nth-last-of-type(n) 兄弟関係にあるもののうち後ろからn番目のE要素
E:last-child 最後の子要素E
E:first-of-type 兄弟関係にあるもののうち最初のE要素
E:last-of-type 兄弟関係にあるもののうち最後のE要素
E:only-child 兄弟関係の要素がない子要素E
E:only-of-type ある要素内で唯一の要素E
E:empty an 子要素(テキストノードを含む)を持たないE要素
E:target 参照URIのターゲットであるE要素
E:enabled 有効にされているUI要素E
E:disabled 無効にされているUI要素E
E:checked チェック状態のUI要素E(例えば、ラジオボタンやチェックボックスなど)
E:not(s) セレクタs以外のE要素
E ~F E要素の後に出現するF要素

ベンダープレフィックスとは

CSS3の仕様は、まだ策定段階にあるため、将来的には変更される可能性もあります。あくまで先行実装であるということを識別するため、仕様が草案段階にある時に、これら機能を利用する場合は、プロパティや値の先頭にベンダープレフィックス(接頭辞)を付けることが推奨されています。

ベンダープレフィックスは、前後に「-」を付けたベンダー識別子でブラウザの種類を特定するもので、FirefoxのようなMozilla系ブラウザなら「-moz-」、Google ChromeやSafariなどのwebkit系のブラウザなら「-webkit-」となります。

表3:ベンダープレフィックスの種類

ベンダープレフィックス ブラウザ
-moz- Mozilla系ブラウザ(Firefox)
-webkit- webkit系ブラウザ(Google Chrome、Safari)
-o- Opera
-ms- Internet Explorer

ベンダープレフィックスは、草案が勧告候補になった時には、外すよう推奨されています。また、FirefoxやGoogle Chrome、Operaなどのブラウザでは、一部のCSS3の機能が、ベンダープレフィックス無しでも動作するようになっています。したがって現状では、ベンダープレフィックス付きの指定と、将来に備えたベンダープレフィックス無しの指定の両方を併記するのが良いでしょう。

[リスト03]現状では、ベンダープレフィックス無しと有りの記述を併記するのがベター

  -webkit-border-radius: 10px; /* webkit系ブラウザ(Google Chrome、Safari)用 */
  -moz-border-radius: 10px; /* Mozilla系ブラウザ(Firefox)用 */
  border-radius: 10px;  /* 将来の標準のCSS */
  • 「CSS3って何?注目機能をピックアップ」サンプルプログラム

著者
宮本 麻矢(著)山田 祥寛(監修)
WINGSプロジェクト

有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表:山田祥寛)。おもな活動は、Web開発分野の書籍/雑誌/Web記事の執筆。ほかに海外記事の翻訳、講演なども幅広く手がける。2011年3月時点での登録メンバは36名で、現在もプロジェクトメンバーを募集中。執筆に興味のある方は、どしどしご応募頂きたい。著書多数。
http://www.wings.msn.to/

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています