CSSだけでアニメーションやエフェクトがつけられるCSS3の便利な機能をまとめてみた

ハム氏
ねぇねぇ、CSSとCSS3は別物なの?
なっちゃそ
全くの別物ということではなくて、CSSに便利な機能が加わった規格なんだよ。だからバージョンを混ぜると動かないということは起こらないよ。CSS3はものすごく便利なプロパティが多いから是非使いこなせるようになってね。

 

CSS3ってなに?

CSS3は全く新しい言語というわけではなく、元々のCSSのバージョンに新たに便利な仕様が加わったものという考え方ができます。

なので、従来のバージョンとも互換性があるし、バージョンを混ぜたことで意図しない表示がされるということも起こらないので安心して使ってくださいね。

CSSにはソースのバージョンを表す記述がないので自分が書いているソースがCSS1なのかCSS2.1なのかを意識することは普通ありません。なので普段使っているCSSに便利なプロパティが追加されて表現の幅が広がったんだなと思っていればOKです。

また、CSS3はHTML5とセットで扱われることが多いですが、これは必須ではなく必要であればHTML4とCSS3を合わせて使用しても問題なく実装することができますよ。

そしてですね、なんと CSS3は要素にアニメーションをつけることができるので以前まではJavaScriptを使用しないと実現できなかった動きをCSS完結で表現することができます。

ハム氏
なるほどー。JavaScriptを使わなくていいのはかなり助かるね。
なっちゃそ
うん、実際かなり助かってるし、最近はCSSで実現できる動きはCSSでつけちゃうのが一般的みたいだね。

 

CSS3から使えるようになった便利なプロパティを紹介するよ

 

なっちゃそ
CSS3に関しては実際にどんな機能が使えるのかを見てもらったほうが早いと思うので早速ですがプロパティの紹介をしていきたいと思います。

text-shadowプロパティ

文字に影をつけることができるプロパティです。

設定する値の意味はそれぞれこんな感じ

{text-shadow: 横方向のズレ幅 下方向のズレ幅 ぼかし具合 影色;}

 

box-shadowプロパティ

作成したボックスに影をつけることができるプロパティです。

設定する値の意味はそれぞれこんな感じ

{box-shadow:横方向のズレ幅 下方向のズレ幅 ぼかし具合 影色;}
 
 

border-radiousプロパティ

要素の角を丸くすることができるプロパティです。

角丸の四角形から完全な円形まで柔軟に表現することができます。

設定する値の意味はそれぞれこんな感じ

{border-radious:円の半径の長さ;}
 
 

rgbaプロパティバリュー

指定した色に対して透明度を設けることができるプロパティバリューです。

colorプロパティ以外にもborder-color・background-color・text-shadow・box-shadowなどに指定することができます。

設定する値の意味はそれぞれこんな感じ

{color: rgba(赤色の数値, 緑色の数値, 青色の数値, 透明度);}
 
 

box-sizing プロパティ

ボックスサイズ(width/height)右方の算出方法を指定することができるプロパティです。

 

値にはcontent-boxborder-boxをとることができ、それぞれ

content-box

→paddingとborderの幅を要素の幅と高さに含めない値。すなわちデフォルト値。

border-box

→paddingとborderの幅を要素の幅と高さに含める値。
つまり、paddingやborder-widthの幅に関係なくwidthに指定した値で表示されるからいちいち計算しなくても崩れたりしない。

という意味を持っています。

 

 

columnsプロパティ

文章のカラム幅とカラム数を指定することができるプロパティです。

カラム幅をcolumn-width、カラム数をcolumn-countで個別に指定することもできますが、columnsプロパティでまとめて指定するのが一般的です。

設定する値の意味はそれぞれこんな感じ

{columns : カラム数 カラム幅;}
 
 

opacityプロパティ

要素の透明度を調節するプロパティです。

文字色、背景色などを半透明にすることができます。

透明度の値は1〜0.0まであって、1がデフォルトの色一番濃い色(一番濃い色)数字が小さくなるに従って薄くなっていきます。

設定する値の意味はそれぞれこんな感じ

{opacity: 10.0までで指定;}
 
 

transitionプロパティ

要素にアニメーションをつけるためのプロパティです。

値には

・アニメーションさせたいプロパティ
・どのくらいの時間をかけてアニメーションさせるか
・どのような動きでアニメーションさせるか(イージング)
・どのくらい遅れてアニメーションさせるか

をそれぞれ指定します。

設定する値の意味はそれぞれこんな感じ

{translate: プロパティ 時間 イージング 遅延}

値の間は半角スペースで区切ってね

 

まとめ

いかがでしたか?

CSSを駆使すればドロップダウンのメニューやアコーディオン仕様、ハンバーガーメニューの実装までJSなしでできちゃいます。

さらに、これまで画像でしか表現できなかったシャドウや透明感なども簡単に実装できるし、何より画像をいちいち修正しなくていいのでメンテナンスがめちゃめちゃ楽です!

CSS3には今回紹介したもの以外にも便利なプロパティがたくさんあるので、随時追記していきますね。

 

ではでは。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です