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

• 作成：2014/04/21
• 更新：2014/10/24
• Web制作 >

前回コーポレートサイト制作が捗るjQuery プラグインをまとめましたが、今回はCSS版ということで、使用頻度が高いものと、これから必要になりそうなものを、忘れないようにメモしておきます。コーポレートサイトやWeb サービスサイトでさりげなく使われているものや、今後増えそうなものなど。

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

もくじ

横並び

• １．今までの回り込み解除
• ２．横並びや並び順
• ３．均等に並べる／段組み

ナビゲーションメニュー

• ４．多階層　ドロップダウン
• ５．amazon風　メガドロップダウン
• ６．ドロワーメニュー

コンテンツメニュー

• ７．モーダルウィンドウ
• ８．アコーディオン
• ９．タブパネル

テーブル

• １０．ストライプテーブル
• １１．レスポンシブ＋テーブル

リスト

• １２．カウント数を出力
• １３．要素の前後に文字や画像

透過処理

• １４．影・背景だけ透明にする
• １５．色相・彩度・明度・透明度を指定

図形を描く

• １６．正円形を描く
• １７．三角形を描く
• １８．吹き出し
• １９．矢印
• ２０．円形グラデーション

Webフォントの活用例

• ２１．Webアイコンを円で囲む
• ２２．和文Webフォント

画像処理

• ２３．画像を円で切り抜く
• ２４．画像を三角に切り抜く
• ２５．マスクをかける
• ２６．フィルタ＋ぼかし

時間的変化

• ２７．ボタンのホバーの動きなどを滑らかに動かす
• ２８．マウスホバーで画像拡大

背景

• ２９．フルスクリーン
• ３０．複数の背景

横並び

１．今までの回り込み解除

これまで多く使われていた回り込み解除する方法から。浮いた親要素の高さを算出します。回り込み解除は親要素にoverflow: hidden;でOK。IE対策でzoom属性zoom:1;も同時に設定します。他はclearfix や clear:both;など。

clearfixに比べ手軽ですが、ボックスからはみ出た部分を隠してしまうので印刷やドロップシャドウで問題が出やすいので使い分けが必要です。

• -float(フロート)を解除する3つの方法-Whisper | Diary

２．横並びや並び順

フレキシブルボックスレイアウトにより、上下左右中央位置などが以前より簡単にマークアップできるようになりましたね。

float の解除を気にしなくていい flexbox を使うことにより横並びや並び順の変更など柔軟にレイアウトを変えられるように。最初にdisplay: flex;を記述します。複雑なレイアウトをシンプルに実現できます。

• flexboxの旧仕様、改定仕様、現行仕様の一覧 « LINE Engineers' Blog
• 今こそ未来！CSS3のFlexboxを基本から理解して、使い倒そう！ | 株式会社LIG

３．均等に並べる／段組み

IE8からですけどdisplay:table-cellを使えば、要素を横並びにするときに幅を指定しなくても均等に並べることができます。スマホ専用メインであれば積極的に使いたいですね。

floatに比べて、display: table-cell;のすごいところは、border-rightなどで区切り線を入れたときにコンテンツ量に合わせて同じ高さで表示されるところです。

• スマホ制作に便利！display:table-cellを使った横並びのレイアウト | Cappee Design
• CSS「display: table」と「display: table-cell」で出来ること | アイビーネットblog

ナビゲーションメニュー

４．多階層　ドロップダウン

transitionを指定することでマウスオーバー時のアニメーションを設定できるようになります。

• CSSだけで作る「多階層」なドロップダウンメニュー｜Webpark

５．amazon風　メガドロップダウン

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

• CSSだけで作るamazon風な縦型メガメニュー｜Webpark

６．ドロワーメニュー

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

• Off Canvas - CodePen

コンテンツメニュー

７．モーダルウィンドウ

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

• CSS（CSS3）のみでLightbox風モーダルウィンドウを作成する方法 | BlackFlag

８．アコーディオン

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

• CSS3で作る、ドロップダウン⇔アコーディオンの切り替えをするレスポンシブWebデザイン対応のグローバルメニュー - かちびと.net

９．タブパネル

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

• CSS（CSS3）のみでタブUI（ボタンアクティブ付き）を実装する方法。（Ver.2） | BlackFlag

テーブル

１０．ストライプテーブル

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

• ASCII.jp：CSS3のセレクターで作るストライプテーブル (1/3)｜Web制作の現場で使えるjQuery　UIデザイン入門

１１．レスポンシブ＋テーブル

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

• レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spice

リスト

１２．カウント数を出力

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

• CSSのcounter-incrementを使ってリスト以外に番号を付ける方法｜Webpark
• CSS3 ordered list styles – RedTeamDesign

１３．要素の前後に文字や画像

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

• テキスト・フォント/要素の前後に内容を追加する
• contentプロパティの使い所あれこれ| m-School

透過処理

１４．影・背景だけ透明にする

ボタンなんかにつけると見栄えがよくなります。rgbaのほうを使います。opacityは不透明を表し、rgbaの最後につけるalphaは色の透明度を表します。opacityはセレクタ全体が不透明、rgbaは背景色や影だけ透明にすることが可能です。

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

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

• 透明度を表す「opacity」 と 「RGBa」の違いと使い分け｜Webpark

１５．色相・彩度・明度・透明度を指定

hsla()メソッドでは左から順に、色相(h)・彩度(s)・明度(L)・透明度(a)のパラメータを使い色を表現できます。色相の0が赤、彩度0%でモノクロ、明度0%で黒、アルファは0が透明といった感じ。

セレクタ { color : hsla (色相, 彩度, 明度, アルファ); }

#sample {background-color: hsla(0, 100%, 50%,1); }

• Lesson 11 RGBA／HSLAで透明度を指定 - HTML5＋CSS3 次世代Webコーディングの超・最新動向・CSS3編 - MdN Design Interactive

図形を描く

１６．正円形を描く

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

• CSS3で正円形を描く方法 | OZPAの表4

１７．三角形を描く

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

• border を使った三角形の作り方と、その応用的なもの | unlinked log

１８．吹き出し

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

• Pure CSSな吹き出し - Weblog - Hail2u.net

１９．矢印

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

• スマホでタップできることを示すアイコンなどを… | clear sky source

２０．円形グラデーション

radial-gradientで円形グラデーションを作成することができます。

• ほんっとにはじめてのHTML5：[18-4] CSS3で、円形（放射）グラデーションを作ろう (radial-gradient)

Webフォントの活用例

２１．Webアイコンを円で囲む

Font Awesomeをborder-radius:50%で囲むだけでOKです。アイコン一覧はこちら。画像ではなくテキストとして表示されるので、色やサイズ変更が驚くほど簡単。

企業サイトやWPテーマでアイコンフォントを使っているサイトを多くみるようになりましたよね。レスポンシブの実装も効率的に行えるので積極的に使ってよいと思います。

• Web フォントでアイコン表示。 Font Awesome 使ってみた | WWW WATCH

２２．和文Webフォント

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

• 実はすごく簡単！webフォントの使い方＆日本語対応webフォントまとめ | Web制作会社スタイル

和文Webフォント一覧

和文が使えるウェブフォントをメモしておきます。

• FONTPLUS｜フォントプラス
• TypeSquare
• アマナイメージズ
• デコもじ
• もじでぱ＜モジデパ＞
• フロップデザインフォント
• 自家製 Rounded M+
• M+ OUTLINE FONTS

画像処理

２３．画像を円で切り抜く

border-radiusを使って画像を円形に切り抜き線で囲む方法。

• CSS3のborder-radiusで画像を円形に切り抜いてボーダーを付ける時のハック | SPOT[スポット]
• Border-width animation fun - December 1st, 2011 | HTML5 and CSS3 Advent 2011

２４．画像を三角に切り抜く

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

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

２５．マスクをかける

-webkit-mask-image にurlプロパティでマスクに利用したい画像を指定。不透明箇所が残る部分となります。Canvas / clip() メソッドはこちら。

セレクタ{ -webkit-mask-image: url(circle.png); }

• SafariとChromeのCSS対応：文字や画像にマスクをかける - builder by ZDNet Japan
• CSSのみでテキストにグラデーションやリフレクトをかけるテクニック（ちょっと更新） - くらげだらけ

２６．フィルタ＋ぼかし

「-webkit-filter」を使うとぼかしやセピア色など、Photoshop上で行っていたことを簡単に指定出来るようになります。コードを指定するだけでフィルタを自動で反映させます。アイキャッチ画像なんかに使えそうです。

例：filter: blur(10px);を使えば写真をぼかすことができます。写真やテキストをマウスホバーでボカシたりするサイトも最近みるようになりました。

• CSS Filters
• 【2013年注目必至！なCSS仕様】CSSフィルタ、これはすごい！（デモ付き） | OpenWeb

時間的変化

２７．ボタンのホバーの動きなどを滑らかに動かす

transition は始まりと終わりのパラメータを指定し、滑らかに変化させます。

transition: all 0.3s ease-in-out;といった指定でボタンホバー時に動きを出します。

指定できる値でよく使いそうなものは、ease(ゆっくり) ease-in(ゆっくり→最高速) ease-out(最高速→ゆっくり) ease-in-out(ゆっくり→最高速→ゆっくり) linear(等速変化) 。

• CSS3 アニメーション（Transitions）の使用方法 | CSS Lecture

２８．マウスホバーで画像拡大

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

• CSS（CSS3）のみでマウスオーバーで画像拡大エフェクトを付ける方法 | BlackFlag

背景

２９．フルスクリーン

フラットデザインで作る場合、ラージフォトスタイルで奥行きを与えたいところです。こちらは背景を画面全体にする方法。

background-size:cover;で背景画像のアスペクト比（縦横比）を保ちつつ、常にその画像1枚だけでウィンドウいっぱいに表示させています。

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

３０．複数の背景

multiple background imagesで複数の背景画像を指定できるようになりました。

• CSS での複数の背景の利用方法 - Web developer guide | MDN