[CSS]角丸やシャドウだけではないCSS3の大切な三つのテクニック

CSS3って角丸とかシャドウとかグラデーションでしょ、という人に知っておいてほしいCSS3の大切なテクニックを紹介します。

デモのキャプチャ

3 Advanced CSS3 Techniques You Should Learn
デモページ(※キャプチャはChrome)

[ad#ad-2]

1. Advanced Selectors

CSS3で最も重要といってもよい特徴の一つが「Advanced Selectors」です。簡単に説明すると、特定のHTMLエレメントに対してIDを使用しないで、スタイルを適用できるものです。

リスト要素で配置した下記のデモを見てください。
背景色を奇数番目はブルーに、更に5番目はレッドにしています。

デモのキャプチャ

デモページ

HTML

HTMLは非常にシンプルです。

CSS

まずは、デフォルトのスタイリングです。

ここまでのスタイルは下記のように表示されます。

デモのキャプチャ

奇数番目に特定のスタイルを適用するために、ul要素に疑似クラスを使用します。

「odd」は奇数番、「first-child」は親要素の最初の子要素にスタイルを適用するものです。
奇数番目の背景色をスタイルするには、下記のように指定します。

特定のポジションのみスタイルを反映させることも可能です。5番目のみ背景色をスタイルするには、下記のように指定します。

2. Animations

今までアニメーションをウェブで実装にはFlashかJavaScriptが必要でした。しかし今日ではCSS3で数行のコードを記述するだけで、アニメーションが実装できるようになりました。

アニメーションを実装するのもシンプルな記述で可能です。マウスホバーで拡大するアニメーションからはじめてみましょう。

デモのキャプチャ

デモページ

HTML

classもIDも無しで、シンプルなものとなっています。

CSS

まずは、デフォルトのスタイリングです。

ここまでのスタイルは下記のように表示されます。

デモのキャプチャ

次に、アニメーションをつくるために「div:first-of-type」に下記のプロパティを指定します。

「first-of-type」は、その要素の子要素からみて最初の要素にスタイルを適用するものです。「first-child」は最初の子要素があった場合のみ適用されますが、「first-of-type」は指定した要素の親要素内で最初の要素に適用されます。

アニメーション用のプロパティは、「transition-property」は背景と境界線、「duration」は持続時間、「transition-timing-function」は変化のさせ方とタイミングを指定します。

では、デモ版のスタイルに進みましょう。
まずは、ホバー時のスタイルです。

次に、アニメーションのスタイルです。

注意すべき点は、背景色の指定にRGBaを使用していることです。

[ad#ad-2]

3. Media Queries

三番目に紹介する最後のCSS3のテクニックはメディアのクエリです。これはユーザーがページを見る際に、条件付きのCSSを加えられるようにするものです。これの利点は、ユーザーの状態によってどのようにウェブページを表示するべきか新しい規則を作ることができるということです。

例えば、表示領域のサイズが800px以下の場合、そのサイズに最適化したレイアウトに変更することができます。

デモのキャプチャ

デモページ

CSS

前述のデモに下記のスタイルを適用します。

更に、多くの@mediaを設定することも可能です。

CSS

600px以下の場合は、非表示します。

これは特にブラウザとは表示領域のサイズが異なるモバイル機器で、ウェブページを見る際に有効な手段となるでしょう。

対応ブラウザ

Advanced Selectors」「Media Queries」はたいていのモダンブラウザ(Firefox, Chrome, Safari)で動作します。「Animations」はWebkitベースのブラウザ(Chrome, Safari)で動作します。

sponsors

top of page

©2018 coliss