-
保存版！CSS3で出来る素敵なデザインやアニメーションをまとめてみた
2014年12月16日
まとめ系
主要ブラウザで使うことの出来る「CSS3」ですが、IE8に対応していないためにCSS3の基本や使い方は知っていても実務等では使う機会が少なかった(クライアントワークではIE8が対応ブラウザに含まれていたため)方もいらっしゃると思います。そうするとふと「あれ、あのプロパティはどう使うんだっけ？」とか「この要素だけにスタイルを適応するCSS3は何だっけ…？」など忘れてしまうこともしばしば…。
最近ではIE8のシェアは低くなり、またスマホサイト制作の機会も増えたためクライアントワークでもCSS3を活用したWeb制作が増えてきました。そこで今回は、まず覚えておくと便利な機能の復習とそれを応用し「これCSS3だけで作れるの!?」というような驚きの作品の数々をまとめてみました！
CSS3とは
そもそも「CSS3」とは何のことでしょうか。改めてその定義を確認してみましょう。
「CSS」は、ウェブページの見栄え（デザイン）を定義するための言語として、広く使われています。「Cascading Style Sheets」の略ですが、単に「スタイルシート」とも呼ばれます。最初のCSSである「CSS1」の規格は、1996年に確定しました。その後、仕様に改良を加えた「CSS2」、「CSS2.1」が公表され、その最新版が「CSS3」です
CSS3は従来のCSSとの互換性を保ちつつ便利な機能が増えた「今までのCSS(スタイルシート)の改良版」ということですね。具体的にはデザインに関する機能がより高くなり、アニメーションまで実装できるようになりました。
すると今まで画像やJavascriptに頼ってきた部分をCSSだけで実装することが可能になり、サイト全体の軽量化に貢献し(SEOの観点でも非常に大切なこと)、CSSで一括管理するので運用性も高くなります。その上で今回はCSS3で新しく追加された機能の中でも”特に覚えておきたい機能”と、それを応用した実例をまとめてみました！
覚えておくと便利なセレクタ
ドロップシャドウ
CSS3の「box-shadow」は指定した要素にドロップシャドウ(影)を付けることができます。ドロップシャドウを付けることで要素が浮かび上がって見え、目立たせることができます。以下は「box-shadow」プロパティの基本形式です。
1box-shadow: 10px 10px 10px rgba(0,0,0,0.5);1番目の数値が「横方向」の値で、”10px”と指定すると右に10px影が移動し”-10px”と指定すると左に10px移動します。2番目の数値は「下方向」の値で、”10px”と指定すると下に10px移動し”-10px”と指定すると上に10px移動します。3番目の数値は「ぼかし具合」で、”0″を指定すると影の輪郭がはっきりし、数値を上げることでぼかし具合を強めます。最後は「色の値」で指定した色が影の色になります。
▼記事リンク
box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ | コリス角丸とグラデーション
CSS3の「border-radius(角丸)」と「linear-gradient(グラデーション)」を使用したボタンの作り方です。従来まで画像で作っていたボタンをCSSのみで実装することにより、サイトの軽量化を図ることができます。軽量化はユーザーのストレスを軽減するだけでなく、サイトの表示速度が向上しSEOの観点からしても非常に大切なことです。
▼角丸の基本
CSS3 角丸を表現する border-radius | CSS Lecture
▼グラデーションの基本
CSS3 グラデーション（gradient）の指定方法 | CSS Lecture
▼角丸とグラデーションを応用した例
CSSだけでここまでできる！キレイなボタンの作り方 | Web制作会社スタイルn番目の子となる要素にスタイルを適用
CSS3の「E:nth-child(n)」という擬似クラスは「指定した番号(または範囲)だけそのスタイルを適応する」ときに使用します。以下は”ul要素の中にある3番目のli要素だけ色を変えたい”ときの記述例です。
1234ul li:nth-child(3) {/*指定したいスタイル*/}この擬似クラスを使うことにより3番目のli要素にわざわざ別のクラスを付けなくても独自のスタイルを適応することができるので、運用性の向上が図れます。
▼記事リンク
Useful :nth-child Recipes | CSS-Tricks要素を均等に横並び
CSS3の「display:table-cell」は要素を均等に横並びにすることができます。「float」でも要素を横並びに出来ますが、横幅が可変するスマホサイトでは「display:table-cell」を使用することにより可変に対応できます。スマホサイトのナビゲーションなどでよく使われるプロパティですね。
▼記事リンク
[意外と知らないCSS]スマホ制作に便利！display:table-cellを使った横並びのレイアウト | Cappee Designボックスモデルの定義を変える
CSS3の「box-sizing」は要素の”ボックスモデルの定義”を指定することができます。「ボックスモデルっ何？」という方はボックスモデル｜CSSの基本が非常に参考になります。このプロパティはレスポンシブデザインやスマホサイトで重用するプロパティですね。個人的にたまに「あれ？サイズが合わない！」という時に”box-sizing: border-box;”が適応されていて混乱するときがあります…。
▼記事リンク
レスポンシブデザインに便利！今さらCSS3のbox-sizingについて話してみます｜Webpark指定領域をオーバーしたときに省略符号
CSS3の「text-overflow:ellipsis」は指定した領域(文字数ではない)をオーバーしたときに省略記号「…」を付与するプロパティです。システムで出力するパンくずリストや記事の見出しが長くなった際に活用できそうです。従来までJavascriptで文字数を指定して省略符号を付けていたのが、今ではCSSで実装出来るのが凄いですね。
▼記事リンク
[意外と知らないCSS]テキストが領域をこえた場合に「…」を表示するtext-overflow:ellipsis | Cappee Designテキスト選択時のハイライトカラー
CSS3の「::selection」はテキスト選択時のハイライトカラーを変更でき、選択時の文字色指定も可能です。ハイライトカラーはテキスト選択時にしか気づかないですが、こういう細かいこだわりが出来ると素敵ですね。サイトのキーカラーに合わせているサイトが多いみたいですね。
▼記事リンク
[CSS]テキスト選択時のハイライトのカラーを変更するスタイルシート | コリスjQueryを置き換えるCSS3テクニック
アコーディオンメニュー
アコーディオンメニューはスマホサイトでよく見かける「クリックするとメニューが表示され再度クリックすると閉じる」機能のことです。スマホサイトはパソコンサイトと違い限られた狭いスペースに要素を配置しなければなりません。ナビゲーションなどにはアコーディオンという「普段は閉じているが必要なときにだけ展開する」という機能を付けること狭いスペースでも配置することができ、また画面遷移を減らすことが出来るのでユーザビリティの向上を図ることができます。スマホサイトには必須のUIですね。
▼記事リンク
CSSだけで動きのあるアコーディオン・メニュー | Ri-mode Rainbow | No:2888モーダルウィンドウ
モーダルウィンドウは「ダイアログ」のようにクリックすると浮かび上がるように表示される要素のことです。例えば写真を配布しているギャラリーサイトでは写真がずらーっと並んでいますが、表示されているサイズが小さくどんな写真が良く分からないですよね。そこで、その写真をクリックすると浮かび上がるように拡大された写真が表示されます。これがモーダルウィンドウです。詳細を表示したいときや画面遷移するほどでもないコンテンツを表示するときに活用出来ますね。
▼記事リンク
CSS（CSS3）のみでLightbox風モーダルウィンドウを作成する方法 | BlackFlagCSS3で実現するアニメーション
多彩なホバー効果
アニメーションとは少し違いますがCSS3では多彩なホバー効果(ボタン上にカーソルを合わせると動く処理)を付けることができます。例えばボタン上にカーソルを合わせたとき、ボタンの色がパッと変わるのではなくふわっと色が変わるほうが優しさを感じることができます。Webサイトのテイストによってベストなホバー効果を付けることで様々な表情を伝えることができます。思わず「お～！すごい…」と思うようなホバー効果が記事に記載されています。
▼記事リンク
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α | NxWorldアニメーションの基本
CSS3は要素を回転したり移動したり、縮小や拡大など様々なアニメーション効果を付けることができます。アニメーションを加えることでユーザーの目を惹きつけインパクトを与えたり、アニメーションならではの伝え方をすることによってユーザーが理解しやすくなるものもあります。アニメーションの基本を知り、様々な場面で活用出来ると良いですね。個人的に「CSS3の難しい所」のひとつでもあります。
▼記事リンク
CSS3 アニメーションの基礎 @keyframes transform | Ri-mode Rainbow | No:1339写真を揺らす
CSS3で画像をゆらゆらと揺らす方法です。画像が揺れているのはアクセントの一つとして可愛らしくて面白いですね。落ち着いたサイトのアクセントとして使えそうです。
▼記事リンク
[CSS]画像をゆらゆらと振り子のようにアニメーションで揺らすスタイルシート | コリスローディング
読み込み中に表示されるローディングアニメーションの実装方法です。従来ではGIF画像を用いて実装していましたがCSS3のみで実装することが可能です。画像を使わず少しでも軽量化することはとても大切ですね。
▼記事リンク
画像を使わないでCSS3で様々なローディング用アニメーションをつくってみよう | HTML5でサイトをつくろうエンドロール
映画のエンドロールのような表現もCSS3で実装することができます。@keyframesを使用したアニメーションで、様々な応用表現が可能になりそうです。勉強になりますね。
▼記事リンク
CSS3だけで映画のエンドロール風エフェクトを表現した「Movie Credits」 | co-jinCSS3で実現するデザイン
吹き出し
何かに対してコメントを付ける際に使用する吹き出しです。メインのボタン部はdiv要素で作り、吹き出し部分(矢印など)はbeforeやafterなどの擬似要素を用いてデザインしています。div要素はpositionにrelativeを指定し、擬似要素にはabsoluteを指定して配置しています。「CSS3だけでこんなに出来るのか」と感動してしまう吹き出しです。
▼記事リンク
【5パターン】画像を使わず CSS3 のみで作れる吹き出しを作ってみた – Pure CSS3 Balloons | Strongholdリンクマーク
リンクを表す矢印などのリンクマークをCSS3のみで実装する方法です。スマホはタッチ操作でホバー効果がないため「リンクがリンクと分かる」ように配慮しなければなりません。その際に必要なのがリンクマークです。リンクマークがあればホバー効果がなくても「リンクがリンクと分かる」からです。スマホサイトに必須のリンクマークをCSS3でデザインすることで、解像度の種類が多いスマホ上で綺麗に表示できます。スマホサイト制作の際に愛用している技術の一つです。
▼記事リンク
スマホ用サイトに便利！リンクを表す矢印をCSSだけで作る方法｜Webparkパンくずリスト
サイト構造を明確化するパンくずリストをCSS3で実装する方法です。パンくずリストはユーザーが「自分はサイトの中のどの階層にいるんだ？」と迷うことがないように設置するものです。またSEOの観点でもクローラーがサイト内を巡回しやすくなるので良い評価に繋がると考えられています。
▼記事リンク
Flat CSS3 Breadcrumbすりガラス
CSS3で背景をすりガラスのようにデザインする方法です。すりガラスはデザイン的に非常に美しく、また圧迫感を与えないのでヘッダーやちょっとした要素の背景に良いかもしれませんね。ソースはiOS7のすりガラスをモデルとしているようです。
▼記事リンク
iOS 7 Blurred Headerまるで画像/FLASHのような実装例
アイコン
HTMLとCSS3で作成されたアイコンです。「ここまでやるか…」というような息を飲む作品ばかりですね。アイコン下のボタンを押すことによってHTMLとCSSのコードを表示することができ、ZIPファイルをダウンロードすることもできます。「吹き出しをCSSのみで実装する方法」と同様にメインはdiv要素で作り、サブ要素はbeforeやafterなどの擬似要素を用いてデザインしています。
▼記事リンク
One div – The single element HTML/CSS icon databaseストップウォッチ
HTMLとCSS3で作成されたストップウォッチです。スタート・一時停止・再開・リセットなどストップウォッチに必要な機能が実装されています。各要素に”animation-duration”を使用してアニメーションの時間を指定しているようです。
▼記事リンク
Stopwatch in CSS – CSS3だけで実装されたストップウォッチ MOONGIFT宇宙空間…？
HTMLとCSS3で作成された引きこまれそうな宇宙空間のようなアニメーションです。要素を囲っている”wrap”というクラスに”transform-style: preserve-3d;”を指定することによって3Dで描画しています。Google chromeの”要素を検証”やFireFoxの”Firebug”でソースを見ると面白いです。
▼記事リンク
Hyperspaceまとめ
いかがでしたか？CSS3は従来のCSSの改良版とはいえ、個人的には大幅な進化を感じます。特にアニメーションに関してはまだまだ分からないことも多くあり、これからマスターしていきたいですね。CSS3を駆使してWeb制作を楽しみましょう！
この記事をシェアする
SNSでもご購読できます