CSS3で実現！JS不要の便利＆時短技５選

2016年1月に古いIEのサポートが終了したことにより、CSS3を積極的に使っていく機会が増えたかと思います。CSS3が使えることにより、今までJSや画像を使って対応していたことが、CSSだけで対応できるようになりました。今回は、覚えておくと便利で、自分もよく使っているCSS3の機能についていくつか紹介したいと思います。

CSSで計算ができる

calc()プロパティを使うことにより、css上で計算ができるようになります。

書き方例

width: 70% ; /* IE8以下とAndroid4.3以下用 */
width: -webkit-calc(100% - 300px); /*iOSとSafari用*/
width: calc(100% - 300px);

デモ

例にあるように、％やpxといった異なる単位同士でも計算が可能なので、レスポンシブページのように、横幅が可変するものをコーディングするときなど、とても重宝します。Andoroid4.3以下はサポート外なので、それ用の記述をする必要があります。

要素の上下中央配置

従来のCSSでは一筋縄ではいかなかった上下中央配置も、CSS3では position と transform を使用することで、簡単に要素を上下中央に配置することが出来ます。

書き方例

/*親要素*/
.center {
width: 100%;
height: 400px;
position: relative;
}

/*上下中央に配置したい要素*/
.center .inner {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%); /*iOSとSafari用*/
transform: translate(-50%, -50%);
}

デモ

translate(X方向の距離, Y方向の距離)
子要素の位置情報が%で指定されているので、要素のサイズが可変しても、上下中央配置を保てます。

背景画像を複数指定する

1つの要素に、背景画像を複数設置することが出来ます。

書き方例

background-image: url(images/bg1.png),url(images/bg2.png);
background-position: 0 0,right bottom;
background-repeat: no-repeat,no-repeat;

デモ

書き方はとても簡単で、カンマで区切って画像を指定していくだけです。
background-positionやbackground-repeatも同様にカンマ区切りで記述していきます。3つ以上の設定もでき、その場合も同様にカンマ区切りで続けて書いていきます。もちろん、
background: url(images/bg1.png) 0 0 no-repeat,url(images/bg2.png) right bottom no-repeat;
のように、一括で指定することも可能です。

コンテンツを全画面表示にする

書き方例

width: 100vw;
height: 100vh;

デモ

全画面で表示したい要素に対し、width:100vw;とheight:100vh;を指定すると、要素が画面いっぱいに広がります。vwはビューポートの幅に対する割合、vhはビューポートの高さに対する割合を意味します。横幅いっぱいに表示するだけならば、width:100%でもいいのですが、高さをいっぱいに表示しようとすると、height:100%;では親要素の height に対する割合で計算されるので、思った通りの表示になりません。ブラウザサイズを変更しても、それに合わせて広がってくれるので、細かい設定なども必要ありません。

マウスオーバーでアニメーション効果をつける

書き方例

a.button {
width: 300px;
background: #007100;
color: #fff;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}

a.button:hover {
width: 350px;
color: #007100;
background: #fff;
}

※ボタンの細かい指定は省略

デモ

ボタンのマウスオーバー時に動きをつけてみました。重要なのはtransitionというプロパティです。allは全ての要素を、0.3sは0.3秒をそれぞれ意味しているので、上記では、全ての要素を0.3秒かけて変化させるということになります。
例えば、transition:background 0.5s;と指定すると、背景だけを0.5秒かけて変化させるということになります。この場合は背景のみが対象となるので、それ以外の要素は一瞬で切り替わります。transitionを使うことにより、カーソルが変わるだけのボタンよりも、動きのある、ちょっとリッチな感じのボタンになったと思います。

まとめ

いくつかのCSS3を紹介させていただきましたが、今回紹介した以外にもCSS3でできることはとても多く、今までjsや画像を使って対応しなければいけなかったことも、CSSのみで対応できることが増えました。
cssのみの知識で実装出来るので、JSの知識が無くてもちょっとした動きであれば実装できるようになりました。また、JSを使用しないのでバッティングの心配もありません。
CSS3は従来のCSSと比べ大幅に進化しており、transitionやtransformを使用して動きのあるサイトを簡単に作ることが可能になりました。もちろんJSを使用しなければ実装できない部分はたくさんありますが、今までのサイト制作にCSS3を追加することによって、よりよいサイト制作が出来るようになると思います。

WEBプログラマー ／ K.S