[CSS]角丸やシャドウだけではないCSS3の大切な三つのテクニック
Post on:2010年8月19日
sponsors
CSS3って角丸とかシャドウとかグラデーションでしょ、という人に知っておいてほしいCSS3の大切なテクニックを紹介します。
3 Advanced CSS3 Techniques You Should Learn
デモページ（※キャプチャはChrome）
[ad#ad-2]
1. Advanced Selectors
CSS3で最も重要といってもよい特徴の一つが「Advanced Selectors」です。簡単に説明すると、特定のHTMLエレメントに対してIDを使用しないで、スタイルを適用できるものです。
リスト要素で配置した下記のデモを見てください。
背景色を奇数番目はブルーに、更に5番目はレッドにしています。
HTML
HTMLは非常にシンプルです。
|
1 2 3 4 5 6 7 |
<ul> <li>First Line</li> <li>Second Line</li> <li>Third Line</li> <li>Fourth Line</li> <li>Fifth Line</li> </ul> |
CSS
まずは、デフォルトのスタイリングです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
* { margin: 0; padding: 0; } ul { list-style-type: none; margin: 2%; border: 1px solid #ccc; padding: 5px; width: 44%; float: left; } ul li { margin-bottom: 5px; padding: 2px; } |
ここまでのスタイルは下記のように表示されます。
奇数番目に特定のスタイルを適用するために、ul要素に疑似クラスを使用します。
|
1 |
ul:first-child li:nth-child(odd) |
「odd」は奇数番、「first-child」は親要素の最初の子要素にスタイルを適用するものです。
奇数番目の背景色をスタイルするには、下記のように指定します。
|
1 2 3 4 |
ul:first-child li:nth-child(odd) { background-color: #d2fffe; border: 1px solid #000; } |
特定のポジションのみスタイルを反映させることも可能です。5番目のみ背景色をスタイルするには、下記のように指定します。
|
1 2 3 |
body > ul:first-child li:nth-child(5) { background: #ffd2d2; } |
2. Animations
今までアニメーションをウェブで実装にはFlashかJavaScriptが必要でした。しかし今日ではCSS3で数行のコードを記述するだけで、アニメーションが実装できるようになりました。
アニメーションを実装するのもシンプルな記述で可能です。マウスホバーで拡大するアニメーションからはじめてみましょう。
HTML
classもIDも無しで、シンプルなものとなっています。
|
1 2 3 |
<div> <h1>Hover over to see animation</h1> </div> |
CSS
まずは、デフォルトのスタイリングです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
div:first-of-type { width: 200px; height: 200px; background: blue; color: #fff; clear: both; } h1 { color: #fff; font: 30px/1.5 Helvetica, Arial, sans-serif; width: 150px; margin: 25px auto; } |
ここまでのスタイルは下記のように表示されます。
次に、アニメーションをつくるために「div:first-of-type」に下記のプロパティを指定します。
|
1 2 3 |
-webkit-transition-property: background, border; -webkit-transition-duration: 2s, 1s; -webkit-transition-timing-function: linear, ease-in-out; |
「first-of-type」は、その要素の子要素からみて最初の要素にスタイルを適用するものです。「first-child」は最初の子要素があった場合のみ適用されますが、「first-of-type」は指定した要素の親要素内で最初の要素に適用されます。
アニメーション用のプロパティは、「transition-property」は背景と境界線、「duration」は持続時間、「transition-timing-function」は変化のさせ方とタイミングを指定します。
では、デモ版のスタイルに進みましょう。
まずは、ホバー時のスタイルです。
|
1 2 3 4 |
div:first-of-type:hover { background: #ccc; order: 20px solid blue; } |
次に、アニメーションのスタイルです。
|
1 2 3 4 5 6 7 8 |
"> div:last-child { width: 95%; height: 100px; -webkit-transition: -webkit-transform 3s ease-in; background: rgba(0,0,0,.5); cursor: pointer; } |
注意すべき点は、背景色の指定にRGBaを使用していることです。
[ad#ad-2]
3. Media Queries
三番目に紹介する最後のCSS3のテクニックはメディアのクエリです。これはユーザーがページを見る際に、条件付きのCSSを加えられるようにするものです。これの利点は、ユーザーの状態によってどのようにウェブページを表示するべきか新しい規則を作ることができるということです。
例えば、表示領域のサイズが800px以下の場合、そのサイズに最適化したレイアウトに変更することができます。
CSS
前述のデモに下記のスタイルを適用します。
|
1 2 3 4 5 6 7 |
@media screen and (max-width:800px) { ul { float: none; max-width: auto; width: auto; } } |
更に、多くの@mediaを設定することも可能です。
CSS
600px以下の場合は、非表示します。
|
1 2 3 4 5 |
@media screen and (max-width:600px) { ul:last-of-type { display: none; } } |
これは特にブラウザとは表示領域のサイズが異なるモバイル機器で、ウェブページを見る際に有効な手段となるでしょう。
対応ブラウザ
「Advanced Selectors」「Media Queries」はたいていのモダンブラウザ（Firefox, Chrome, Safari）で動作します。「Animations」はWebkitベースのブラウザ（Chrome, Safari）で動作します。
sponsors
