知っておいてよかった！Web制作時に効率上げる「便利」なCSSテクニック

• 作成：2014/07/14
• 更新：2014/10/24
• Web制作 >

少し前にサイト制作でさりげなく使われているCSSテクニックをまとめましたが、今回はそれを補足する形で、これから増えそうなもの、使っていきたいものを今後忘れないようにメモしておきます。

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

もくじ

画像

• １．ブレンドモード
• ２．表示範囲
• ３．透過＋合成
• ４．半透明

エフェクト

• ５．マウスオーバーアイデア一覧
• ６．CSSのみでメニューアイコン

段組み

• ７．マルチカラム
• ８．段の表示順
• ９．コンテンツ流し込み
• １０．数値の計算

文字

• １１．アウトライン
• １２．透過＋アウトライン
• １３．文字詰め＋リガチャ（合字）
• １４．iPhone 文字を調整

画像

１．ブレンドモード

Photoshopののように、乗算・オーバーレイなど背景色と背景画像を混ぜあわせたり、写真に色々な効果を付与することができるbackground-blend-modeプロパティ。シンプルな例では、以下のように背景写真と背景色を合成することが可能です。

.blended {
background-image: url(face.jpg);
background-color: red;
background-blend-mode: multiply;
}

効果一覧：multiply／screen／overlay／darken／lighten／color-dodge／color-burn／hard-light／soft-light／difference／exclusion／hue／saturation／color／luminosity

• background-blend-mode プロパティで背景をブレンドしてみよう | WWW WATCH
• Basics of CSS Blend Modes | CSS-Tricks

２．表示範囲

プロパティclip: rect(上, 右, 下, 左 )を使うとコンテンツや画像の表示範囲を指定することができます。positionプロパティの値はabsoluteにします。

例：clip:rect(60px 150px 130px 40px); position:absolute;

• clip使ってみた & アニメーションサンプル作ってみた | バシャログ。

３．透過＋合成

backgroundの値にcross-fade()を指定すると２枚の画像を合成し表示することが可能となります。「％」のパラメータは透過度です。参考：CSS Images Level 4 cross-fade() example

#img{
background-image: cross-fade(
url(""logo-box.png""),
url(""logo-bare.png""),
50%);
}

• クロスフェードを実現するCSS4のcross-fade() - to-R

４．半透明

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

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

エフェクト

５．マウスオーバーアイデア一覧

jsを使わない、画像にマウスを乗せたときのエフェクト一覧。translate3dはX方向とY方向とZ方向の距離で3D移動を指定することができます。例：-webkit-transform: translate3d(0,-7%,0);で上に動かします。

• Ideas for Subtle Hover Effects | Codrops

６．CSSのみでメニューアイコン

画像を使わないシンプルなメニューアイコンの作り方。三本の線をクリックで回転・消去・位置を変更させ「×」に変更します。-webkit-transform: rotate(-135deg);で角度を変更、background-color: transparent;で透過させています。

• CodePen - A Pen by André Rodrigues
• SVG CSS3 Menu / Burger Button - CodePen

段組み

７．マルチカラム

column-countを使うとボックス内のコンテンツを段組することができます。以下のように値を2と指定したときは、２カラムのボックスが構成されます。

例：column-count: 2;

• column-count－CSS3リファレンス

８．段の表示順

float の解除を気にしなくていい flexbox を使うことにより横並びや並び順の変更など柔軟にレイアウトを変えられるようになりました。order を使うとフレキシブルレイアウトで段組みする際、アイテムの表示順を変更することができます。

例：-webkit-order: 2; order: 2;

• CSS flexible box の利用 - Web developer guide | MDN

９．コンテンツ流し込み

流し込みたいコンテンツをflow-intoプロパティで指定し、レイアウトをflow-fromで指定します。リージョンを使うとボックスにコンテンツを流し込みできます。

article {
-webkit-flow-into: myThread;
}

.region {
-webkit-flow-from: myThread;
}

• CSS Regionsを使った新しい CSSレイアウトを作る方法

１０．数値の計算

calc()は計算結果を値として利用できるファンクションです。少しめんどうな計算をCSS単独で実現することができます。

例：width: calc(100%/2);

• CSSの calc() ファンクションを使って長さを計算しサイズ指定する方法 | mbdb (モバデビ)

文字

１１．アウトライン

text-strokeプロパティで、文字のアウトラインを表示することができます。ベースの文字の色をcolorを白に指定して、以下のように黒のアウトラインをひくとわかりやすいです。

例：-webkit-text-stroke: 1px black;

• Adding Stroke to Web Text | CSS-Tricks

１２．透過＋アウトライン

今度はtext-fill-colorプロパティで文字を透明にしつつ、アウトラインを表示します。transparentで文字の色を透明にしています。

div{
color: white;
-webkit-text-stroke: 1px white;
-webkit-text-fill-color: transparent;
}

• 文字のアウトラインを表示する--FirefoxとSafariのCSS対応 - page2 - builder by ZDNet Japan

１３．文字詰め＋リガチャ（合字）

トラッキングは複数文字間（テキストブロック全体）を調整することですが、text-renderingの値をoptimizeLegibilityにすると文字詰め処理を行います。optimizeSpeedは使わないときの処理です。

例：text-rendering: optimizeLegibility;

• text-rendering | CSS-Tricks

１４．iPhone 文字を調整

これは皆さんご存知だとは思いますが、text-size-adjustでスマホを横にした際に、文字サイズをそのまま変わらないようにします。文字サイズ拡大ができなくなるのでnoneは指定しないように。

例：-webkit-text-size-adjust: 100%;

• -webkit-text-size-adjust｜プロパティ｜CSS HappyLife ZERO