ユーザーID パスワード

技術情報

  • FAQ よくある質問
  • 個人ユーザー向けサービスのお手続きについて
  • M2Mソリューション
  • (PR)FAQを利用してお問い合わせコスト削減

コード&コラム Web編 〜実践!HTML5〜

第3章 Photo Gallery

1 |2 |3 |4 次へ

CSS3とは

従来のスタイルシートの最新版であり、これまでの仕様に対しさらに改良されいくつかの便利な機能が備わりました。
CSS3は未だ仕様策定中ではありますが、主要ブラウザでの対応は既に始まっており、今日様々なWebサイトで利用されています。
しかしながら、仕様策定段階であり正式に勧告されていない為、CSS3を利用する際は各ブラウザ用のベンダープレフィックスを付ける必要があります。
ベンダープレフィックスとは、各ブラウザが独自の拡張機能を実装する際にそれが拡張機能である事を明示する為に付ける接頭辞の事です。

各ブラウザ毎のベンダープレフィックス
ブラウザベンダープレフィックス
Mozilla Firefox-moz-
Google Chrome、Apple Safari-webkit-
Opera-o-
Microsoft Internet Explorer-ms-

今回はCSS3で追加された特に重要なモジュールである、セレクタ、トランスフォーメーション、アニメーションを紹介します。



セレクタ

CSS3で追加されたセレクタを見る前にセレクタの概念について再度おさらいしましょう。
CSSはスタイルを適用する対象であるセレクタとスタイル情報を設定する宣言ブロックから構成されます。


p { color : #ff0000; }

この場合は、pが「セレクタ」であり、color : #ff0000が宣言ブロックとなり、更にcolorがプロパティ、そして#ff0000が値となります。
また、htmlの中で<p>〜</p>で括られた全体を「要素」と呼びます。
これらを踏まえたうえでCSS3に追加されたセレクタの一覧、並びに使い方を見ていきます。

CSS3で追加されたセレクタ一覧
セレクタ説明記述例
E[foo^="bar"]"foo" 属性の値が "bar" から始まる E 要素p[class^="test"]
E[foo$="bar"]"foo" 属性の値が "bar" で終わる E 要素p[class$="test"]
E[foo*="bar"]"foo" 属性の値に "bar" という文字列を含む E 要素p[class*="samp"]
E:root文書のルート要素であるE要素:root
E:nth-child(n)n番目の子であるE要素p:nth-child(4)
E:nth-last-child(n)後ろから数えてn番目の子である E 要素p:nth-last-child(2)
E:nth-of-type(n)n 番目にある E 要素p:nth-of-type(2)
E:nth-last-of-type(n)同じ型をもつ要素のうち後ろから数えて n 番目にある E 要素p:nth-last-of-type(3)
E:last-child最後の子である E 要素p:last-child
E:first-of-type同じ型をもつ要素のうちの最初の E 要素p:first-of-type
E:last-of-type同じ型をもつ要素のうち最後の E 要素p:last-of-type
E:only-child唯一の子である E 要素p:only-child
E:only-of-type同じ型をもつ要素が他にない唯一の E 要素p:only-of-type
E:emptyテキストノードを含め子を持たないE 要素p:empty
E:target参照URIの目標となっているE 要素:target:before
E:enabled有効 (:enabled) となっているE要素input[type="checkbox"]:enabled
E:disabled無効 (:disabled)となっているE要素input[type="checkbox"]:disenabled
E:checkedチェックボックスやラジオボタンなどでチェックされた状態のE要素input:checked
E:not(selector)sであるセレクタ にマッチしない E要素:not(p)
E ~ FE 要素のあとに現れる F 要素p~ul

サンプルコード

第1章
Audio/Video

第2章
Canvas

第3章
Photo Gallery

第4章
神経衰弱ゲーム