プロっぽくなった！こっそり使いたい「動きのある」CSSテクニック

• 作成：2014/06/2
• 更新：2014/11/01
• Web制作 >

WebデザインギャラリーやWPテーマなどで「見栄えのする」サイトが使っている効果など。今回はCSSのみで実現できる、動きあるエフェクトをメモしておきます。

エンジニア速報は Twitter の@commteで 1 日 5 回配信しています。

もくじ

マスク

• １．マスク・キャプション
• ２．円形キャプション
• ３．全画面+オーバーレイ
• ４．ストライプの背景

フルスクリーン系

• ５．スライド＋フルスクリーン
• ６．全画面背景動画
• ７．パララックス
• ８．フルスクリーンにフィット
• ９．背景画像をブラウザごとに最適化
• １０．メガメニュー

画像可変

• １１．画像で枠線を表現する
• １２．半透明＋フィルタ
• １３．文字以外を透明にしてレイヤーさせる

図形

• １４．ループ＋ローディング
• １５．3Dボックス
• １６．矢印ナビ

画像切り抜き

• １７．六角形
• １８．卵型＋星形

高解像度ディスプレイ対応

• １９．ピクセル比に応じて画像を指定

マスク

Transitionプロパティはループがなく、自然と最初の状態に戻るという特徴があります。マウスホバーなどのキッカケを与えて動かしたいときに使用します。

１．マスク・キャプション

マウスオーバー時に透過レイヤーさせ、文字を重ねて表示させる様々な方法をデモとコード付きで解説してあります。

transition-durationプロパティはどれくらいかけて変化させるか（実行時間）、transition-delayプロパティはいつ変化させるか（開始されるまでの時間）を意味します。transform:translate()は表示位置を移動、transform: scale();は拡大です。

• CSSのみで実装するキャプションエフェクト 20 | NxWorld

２．円形キャプション

円形のホバーエフェクトアニメーション。transition: all 0.8s ease-in-out;のease~は、ease(ゆっくり) ease-in(ゆっくり→最高速) ease-out(最高速→ゆっくり) ease-in-out(ゆっくり→最高速→ゆっくり) linear(等速変化) 。

• デモ
• gudh/ihover · GitHub

３．全画面+オーバーレイ

オーバーレイでメニューを出します。visibilityプロパティでボックスを消さず、表示・非表示を切り替えています。

visibility: visible;

• Fullscreen Overlay Effects | Codrops

４．ストライプの背景

repeating-linear-gradient()を使うと簡単にストライプができます。サンプルの45deg（45度）はストライプの角度(この場合、to right にすると縦縞)、色、始点、終点といった感じです。

例：background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px );

• Stripes in CSS | CSS-Tricks

IE9以下でグラデーションを使用したい場合は、filterを使います。

フルスクリーン系

５．スライド＋フルスクリーン

フルスクリーン背景画像のスライドショーをCSSのみで表示。

• CSS3フルスクリーン背景スライドショー | CSSPRO

６．全画面背景動画

レスポンシブ対応でvideo要素に対応していないブラウザでは、代替の背景画像が表示されるとのこと。jQueryプラグインではtubularといったものもあります。

• スクリプト無し、動画をページの背景いっぱいに表示する方法 | コリス

７．パララックス

CSSだけで作るパララックス。

• Pure CSS Parallax Scrolling - CodePen

８．フルスクリーンにフィット

background-size: cover;は縦横比を維持したまま、指定領域に画像が必ず表示されている状態にします。

• background-size:coverで背景画像をフルスクリーンにフィットさせたレスポンシブウェブデザイン | Dress Cording
• CSSだけで背景を画面全体にする方法 | Ri-mode Rainbow | No:1053

９．背景画像をブラウザごとに最適化

background-size: contain;を使うと縦横比を維持したまま、指定領域に画像のすべてが表示されるようにします。

• 好きなCSSプロパティは background-sizeのcoverとcontain - ksk1015のブログ

１０．メガメニュー

メニューアイコンをクリックすると、横幅いっぱいに落ちてくるメガメニュー。フルスクリーン系のサイトによく合いそうです。

• Mega Menu Pure CSS and HTML by Joni - CodePen

画像可変

１１．画像で枠線を表現する

区切り線を入れると情報の区切りが明確になるので可読性が向上します。hrを使わずにborder-imageを使います。１枚の画像で上下左右の画像ボーダーを実現できます。

• border-image の使いどころや注意点 | Webamb | ウェブアンブ

１２．半透明＋フィルタ

CSS3ではfilterプロパティでフィルタをかけることができます。ベンダープレフィックスと一緒に使用してください。例：ぼかす場合は-webkit-filter: blur(10px);、白黒にする場合は-webkit-filter: grayscale(1);など。

• CSS filter プロパティで 「半透明ガラス」 効果を再現してみる | WWW WATCH

１３．文字以外を透明にしてレイヤーさせる

rgba()はcolor やbackground-color の値を透明度と同時に指定できます。例えばalpha の値 .3 は30%を表します。

セレクタ { color : rgba(赤, 緑, 青, アルファ); }

• CSS3 要素を透明に出来る Opacity と RGBa の使い方 | CSS Lecture

図形

１４．ループ＋ローディング

ループさせるような同じ動きを繰り返すアニメーションであれば、CSS Animations を使います。Animationsプロパティはウィンドウ読み込みと同時に動かせます。キーフレームの定義は、「@-webkit-keyframes」+「任意の名前」、始まりと終わりの状態は「%」を使います。

• Single Element CSS Spinners
• CSS Loader - CodePen

１５．3Dボックス

最近WordPressテーマでよく見かけるようになってきた3Dのボタンやボックス。

• Pure CSS 3D Box - CodePen

１６．矢印ナビ

矢印をからめたナビゲーションスタイル一覧。マウスホバーで横幅を変え、コンテンツを表示したり様々なエフェクトを実現します。画像ギャラリーやスライドなどに。

• Arrow Navigation Styles | Codrops

画像切り抜き

１７．六角形

linear-gradient()で角度を変更し、画像を六角形にくり抜く方法。プロフィール写真やアイコンなどを囲んだり、かわいい見せ方ができそうです。

• CSSで画像を六角形にくり抜く - Weblog - Hail2u.net

１８．卵型＋星形

こちらはradial-gradient()を使い卵型、linear-gradientで星形で画像をくり抜く方法。

• CSSで卵形と星形に切り抜く - Weblog - Hail2u.net

高解像度ディスプレイ対応

１９．ピクセル比に応じて画像を指定

鮮明な写真を使うとき、ボケが目立たないように高解像度ディスプレイ用に画像を最適化したいところです。image-set関数を仕様するとデバイスピクセル比に応じて画像を指定することができます。現在ではChrome/safariなどで対応してます。

例：background:-webkit-image-set( url(1x.png) 1x, url(2x.png) 2x );

• レスポンシブイメージを実現するCSS4のimage-set - to-R