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

CSS_Tutorial

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

IT/WEB業界への転職なら

もくじ

横並び

ナビゲーションメニュー

コンテンツメニュー

テーブル

リスト

透過処理

図形を描く

Webフォントの活用例

画像処理

時間的変化

背景

横並び

1.今までの回り込み解除

releasing-sneak_css

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

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

2.横並びや並び順

side-by-side_css

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

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

3.均等に並べる/段組み

columns_css

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

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

ナビゲーションメニュー

drop-down_css

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

5.amazon風 メガドロップダウン

amazon-style-mega_css

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

6.ドロワーメニュー

drawer-menu_css

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

コンテンツメニュー

modal-window_css

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

8.アコーディオン

accordion_css

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

9.タブパネル

tab-panel_css

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

テーブル

10.ストライプテーブル

stripe-table_css

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

11.レスポンシブ+テーブル

responsive-table_css

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

リスト

12.カウント数を出力

output-count_css

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

13.要素の前後に文字や画像

characters-element_css

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

透過処理

14.影・背景だけ透明にする

transparent_css

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

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

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

15.色相・彩度・明度・透明度を指定

specifies-transparency_css

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

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

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

図形を描く

16.正円形を描く

precise-circle_css

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

17.三角形を描く

triangle_css

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

18.吹き出し

balloon_css

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

19.矢印

arrow_css

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

20.円形グラデーション

radial-gradients_css

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

Webフォントの活用例

21.Webアイコンを円で囲む

circled-webicon_css

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

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

22.和文Webフォント

japanese-webfonts_css

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

和文Webフォント一覧

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

画像処理

23.画像を円で切り抜く

cutimage_css

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

24.画像を三角に切り抜く

triangleimage_css

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

25.マスクをかける

mask_css

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

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

26.フィルタ+ぼかし

blurfilter_css

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

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

時間的変化

27.ボタンのホバーの動きなどを滑らかに動かす

smoothlybutton_css

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

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

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

28.マウスホバーで画像拡大

enlarge-hover_css

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

背景

29.フルスクリーン

full-screen_css

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

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

30.複数の背景

multiple-backgrounds_css

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