すごく役立った!サイト制作でさりげなく使われているCSSテクニックまとめ

前回コーポレートサイト制作が捗るjQuery プラグインをまとめましたが、今回はCSS版ということで、使用頻度が高いものと、これから必要になりそうなものを、忘れないようにメモしておきます。コーポレートサイトやWeb サービスサイトでさりげなく使われているものや、今後増えそうなものなど。
エンジニア速報は Twitter の@commteで配信しています。
もくじ
横並び
ナビゲーションメニュー
コンテンツメニュー
テーブル
リスト
透過処理
図形を描く
Webフォントの活用例
画像処理
時間的変化
背景
横並び
1.今までの回り込み解除

これまで多く使われていた回り込み解除する方法から。浮いた親要素の高さを算出します。回り込み解除は親要素にoverflow: hidden;
でOK。IE対策でzoom属性zoom:1;
も同時に設定します。他はclearfix
や clear:both;
など。
clearfixに比べ手軽ですが、ボックスからはみ出た部分を隠してしまうので印刷やドロップシャドウで問題が出やすいので使い分けが必要です。
2.横並びや並び順

フレキシブルボックスレイアウトにより、上下左右中央位置などが以前より簡単にマークアップできるようになりましたね。
float の解除を気にしなくていい flexbox を使うことにより横並びや並び順の変更など柔軟にレイアウトを変えられるように。最初にdisplay: flex;
を記述します。複雑なレイアウトをシンプルに実現できます。
3.均等に並べる/段組み

IE8からですけどdisplay:table-cell
を使えば、要素を横並びにするときに幅を指定しなくても均等に並べることができます。スマホ専用メインであれば積極的に使いたいですね。
floatに比べて、display: table-cell;
のすごいところは、border-rightなどで区切り線を入れたときにコンテンツ量に合わせて同じ高さで表示されるところです。
- スマホ制作に便利!display:table-cellを使った横並びのレイアウト | Cappee Design
- CSS「display: table」と「display: table-cell」で出来ること | アイビーネットblog
ナビゲーションメニュー
4.多階層 ドロップダウン

transition
を指定することでマウスオーバー時のアニメーションを設定できるようになります。
5.amazon風 メガドロップダウン

ECサイトや企業サイトなどによく使われるメガドロップダウンメニュー。
6.ドロワーメニュー

最近増加傾向にあるスペースの制限を解決するUI。すでに多いですけど、これからもガンガン増えていくと思います。横からスライドして出てくるメニューの実装方法。
コンテンツメニュー
7.モーダルウィンドウ

モバイル向けページ作成の場合、ページ表示の問題を解決するために、ページ遷移を減らす施策としてポップアップ表示が増えてきました。以下、CSS(CSS3)のみで実装するモーダルウィンドウ。
8.アコーディオン

レスポンシブ対応でCSSのみで作るドロップダウンとアコーディオン切り替えメニュー。
9.タブパネル

コンテンツ部分の表示をフェードインによって制御している例。動作サンプル付き。
テーブル
10.ストライプテーブル

セルを見やすくするには罫線と余白の使い方がポイントとなりますが、こちらはjQueryのCSS3セレクターを利用して、奇数行のth要素、偶数行のtr要素にそれぞれclass属性を追加し、ストライプを作ることによって見やすい表にする方法。
11.レスポンシブ+テーブル

IEの問題が残されてますが、レスポンシブでのテーブルの見せ方と対応方法はこちらが一番参考になるかと。
リスト
12.カウント数を出力

「counter-increment」を使うと番号を自動的に付けることができます。counterプロパティを適用する要素にbefore、after要素を付けcontentプロパティでカウンタ名を指定することで連番を挿入することができます。詳しくはcounter-incrementプロパティで。
13.要素の前後に文字や画像

「content」は対応する全ての要素の前後に内容(文字列や画像等)を追加するプロパティ。例えばh3の直前に「♪」を入れる場合は要素の直前にbefore、指定する文字はcontentに♪と入れるだけでh3全てに自動で♪が入ります。他にも指定の文字だけでなく、urlで画像、counter関数で番号、attr関数で属性値なども表示可能です。
透過処理
14.影・背景だけ透明にする

ボタンなんかにつけると見栄えがよくなります。rgbaのほうを使います。opacityは不透明を表し、rgbaの最後につけるalphaは色の透明度を表します。opacityはセレクタ全体が不透明、rgbaは背景色や影だけ透明にすることが可能です。
rgba()はcolor やbackground-color の値を透明度と同時に指定できます。例えばalpha の値 .3 は30%を表します。
セレクタ { color : rgba(赤, 緑, 青, アルファ); }
15.色相・彩度・明度・透明度を指定

hsla()メソッドでは左から順に、色相(h)・彩度(s)・明度(L)・透明度(a)のパラメータを使い色を表現できます。色相の0が赤、彩度0%でモノクロ、明度0%で黒、アルファは0が透明といった感じ。
セレクタ { color : hsla (色相, 彩度, 明度, アルファ); }
#sample {background-color: hsla(0, 100%, 50%,1); }
図形を描く
16.正円形を描く

border-radius: 50%;
で円を描くことができます。これもWPテーマや企業サイト内で使っているところが増えてきました。
17.三角形を描く

吹き出しやリボンを作るときに、覚えておくと便利です。ボーダーの左右と上に異なる指定をすることで▼をつくります。
18.吹き出し

チャットや投稿ページなどで吹き出しを表現したりすることもあるかと思います。画像を使わずにCSSだけで吹き出し(三角形)を描画する方法。
19.矢印

スマホによくついている画像を使わない矢印の作り方。ご存知の方は多いと思いますが、縦横のボックスを作り、ボーダーを上部と右に指定して、transform: rotate(45deg);
といった感じでtransformで45度に回します。
20.円形グラデーション

radial-gradient
で円形グラデーションを作成することができます。
Webフォントの活用例
21.Webアイコンを円で囲む

Font Awesomeをborder-radius:50%
で囲むだけでOKです。アイコン一覧はこちら。画像ではなくテキストとして表示されるので、色やサイズ変更が驚くほど簡単。
企業サイトやWPテーマでアイコンフォントを使っているサイトを多くみるようになりましたよね。レスポンシブの実装も効率的に行えるので積極的に使ってよいと思います。
22.和文Webフォント

和文フォントは漢字や文字数の多さから制作コストが高くなり、有料のものが多くなりますが、フリーだと表示速度などの問題が出てくるのもあります。とはいえ今後和文フォントは挑戦してみたい分野の一つなのでメモしておきます。
和文Webフォント一覧
和文が使えるウェブフォントをメモしておきます。
画像処理
23.画像を円で切り抜く

border-radiusを使って画像を円形に切り抜き線で囲む方法。
- CSS3のborder-radiusで画像を円形に切り抜いてボーダーを付ける時のハック | SPOT[スポット]
- Border-width animation fun - December 1st, 2011 | HTML5 and CSS3 Advent 2011
24.画像を三角に切り抜く

こちらは画像を三角形で切り抜く方法。よく見かけるわけではないですけど、ちょっと珍しいのでメモ。
25.マスクをかける

-webkit-mask-image にurlプロパティでマスクに利用したい画像を指定。不透明箇所が残る部分となります。Canvas / clip() メソッドはこちら。
セレクタ{ -webkit-mask-image: url(circle.png); }
- SafariとChromeのCSS対応:文字や画像にマスクをかける - builder by ZDNet Japan
- CSSのみでテキストにグラデーションやリフレクトをかけるテクニック(ちょっと更新) - くらげだらけ
26.フィルタ+ぼかし

「-webkit-filter」を使うとぼかしやセピア色など、Photoshop上で行っていたことを簡単に指定出来るようになります。コードを指定するだけでフィルタを自動で反映させます。アイキャッチ画像なんかに使えそうです。
例:filter: blur(10px);
を使えば写真をぼかすことができます。写真やテキストをマウスホバーでボカシたりするサイトも最近みるようになりました。
時間的変化
27.ボタンのホバーの動きなどを滑らかに動かす

transition は始まりと終わりのパラメータを指定し、滑らかに変化させます。
transition: all 0.3s ease-in-out;
といった指定でボタンホバー時に動きを出します。
指定できる値でよく使いそうなものは、ease(ゆっくり) ease-in(ゆっくり→最高速) ease-out(最高速→ゆっくり) ease-in-out(ゆっくり→最高速→ゆっくり) linear(等速変化) 。
28.マウスホバーで画像拡大

Webkitのみとなりますが、マウスホバーで画像を拡大する方法。拡大後は画像に対してCSS3ドロップシャドウをつけています。
背景
29.フルスクリーン

フラットデザインで作る場合、ラージフォトスタイルで奥行きを与えたいところです。こちらは背景を画面全体にする方法。
background-size:cover;
で背景画像のアスペクト比(縦横比)を保ちつつ、常にその画像1枚だけでウィンドウいっぱいに表示させています。
- background-size:coverで背景画像をフルスクリーンにフィットさせたレスポンシブウェブデザイン | Dress Cording
- CSSだけで背景を画面全体にする方法 | Ri-mode Rainbow | No:1053
30.複数の背景

multiple background images
で複数の背景画像を指定できるようになりました。
スポンサード リンク
関連記事
- 今どきのプログラマー向け社内共有ツール
- Mac初心者おすすめ!フロントエンドやコーダー向け初期設定
- CSSだけでOK!レスポンシブ対応のズームイン・ズームアウトを繰り返すCSSフェードスライダー
- デベロッパーにおすすめのATOM開発系ダークテーマ
- CSSのみでテキストを「飾る・動かす」おしゃれなエフェクト10
- モダンなフォームを作るために覚えておきたいCSSの擬似クラス
- object-fit・currentColor・will-change・image-renderingなどマイ...
- CSSのみで実現、背景を動かす「おしゃれエフェクト」まとめ
- 聞き慣れないけど確実に知っておきたいCSSやhtmlの新機能
- スクロールした時に面白いエフェクトを出すためのアイデアまとめ
Comments
-
[…] すごく役立った!サイト制作でさりげなく使われているCSSテクニックまとめ […]
[…] 2. CSS:すごく役立った!サイト制作でさりげなく使われているCSSテクニックまとめ […]