TL;DR
実務で意外と使う基本的なものやトリッキーな小技。少ない記述で済む CSS テクニックなどをまとめました。今回は Web 制作に関わるなら、必ずおさえておきたいものや今後使っていきたいテクニック中心です。
画像
１．画像の下にできる隙間をなくす
画像の下に色などを配置すると、わずかに隙間が出来ることがあります。そんな時は親ブロックにline-height: 0;で OK。他には画像に直接vertical-align: bottom;かdisplay:block;を使えます。
css
.sample {
line-height: 0;
}
２．画像の下にテキストが回り込まないようにする
回り込み解除は親要素か以下の例だとテキストにoverflow: hidden;かoverflow: auto;を指定します。IE 対策で zoom 属性 zoom:1;も同時に設定します。
css
.sample p {
overflow: hidden;
zoom: 1;
}
３．float を使わずに横並び
いくつもボックスを並べたい場合は float の解除を使わずに flexbox を使うほうが簡単です。横並びや並び順の変更など柔軟にレイアウトを変えられるようにまりました。親要素にdisplay: flex;を指定するだけで横並びが完成。中心に配置したいときは-webkit-box-pack: center;を親要素につけるだけ。
※[お詫び] 2015/03/23：コメントにて flex と box を混同しているとのご指摘を受け修正しました。以下のソースは旧 safari 用としてコードに-webkit-box をつけておりました。しかしながら私の理解不足は否めません。また、効率的になった！最近のサイトで使われていた CSS 小技集にも書いてあるjustify-content: center;を使用したほうがよいというコメントもいただいております。皆様からのご指摘、ありがとうございました。
css
ul.sample {
display: flex;
list-style: none;
padding: 0;
}
ul.sample li {
margin: 10px;
word-wrap: break-word;
}
html
<ul class="sample"></ul>
４．デバイスによって、画像を変更する
CSS4 からになりますが、image-set()を使用するとdevicePixelRatioによる画像表示を変更することが可能です。高解像度の画像と低い解像度の画像を切り替えたいときに。density（値は x ）によって画像を変更します。
５．画像の上に文字を配置
こちらも定番ですが、マウスオーバーで注釈を出すシンプルな方法。通常時に注釈を一旦隠し、マウスオーバー時に translateY()で縦方向に移動させます。
css
figure.sample {
color: #fff;
text-align: center;
overflow: hidden;
position: relative;
width: 100%;
}
figcaption.overray-cap {
background: rgba(0, 0, 0, 0.5);
bottom: 0;
left: 0;
position: absolute;
transform: translateY(100%);
transition: all 0.35s;
width: 100%;
-webkit-transition: all 0.35s;
}
figure.sample:hover .overray-cap {
transition-delay: 0.1s;
transform: translateY(0);
}
figure.sample img {
vertical-align: bottom;
width: 100%;
}
html
<figure class="sample">
<figcaption class="overray-cap">注釈</figcaption>
</figure>
６．鏡像
ちょっとトリッキーな小技。box-reflectを使うと鏡が反射した時のような効果を出すことができます。１枚の画像だけでこれができるのはすごい。参考サイトでは、-webkit-gradientを指定して自然な見え方にしています。
css
.sample {
height: 500px;
overflow: hidden;
}
.sample img {
-webkit-box-reflect: below;
}
マスク
７．画像を斜めにくり抜く
背景画像を固定させたら擬似要素を作成し、要素をskew()で傾け、translateで移動させます。そうすると以下のように斜めのブロックを作り出すことができます。
css
.sample {
background-image: url(img/sample.jpg);
background-size: cover;
height: 500px;
overflow: hidden;
}
.sample:after {
content: '';
display: block;
height: 100%;
background: #2ecc71;
transform: skew(0, 170deg) translate(0, 20%);
}
.sample:before {
content: '';
display: block;
height: 50%;
background: #2ecc71;
transform: skew(0, 170deg) translate(0, -20%);
}
html
<div class="sample"></div>
８．写真をくり抜く
プロパティ clip: rect(上, 右, 下, 左 )を使うとコンテンツや画像の表示範囲を指定することができます。position プロパティの値は absolute、rect の中は(上 右 下 左)となります。600×300 の写真をくり抜くと以下のように。
css
.sample img {
position: absolute;
clip: rect(100px 500px 200px 100px);
}
９．文字で画像をくり抜く
background-clipを使えば、画像をテキストでくり抜くことができます。以下は親要素に背景色をつけ、任意の文字はcolor: transparent;で透過させます。
css
.sample h2 {
-webkit-background-clip: text;
background-image: url(img/sample.jpg);
color: transparent;
font-size: 125px;
text-align: center;
}
html
<div class="sample">
<h2>SAMPLE</h2>
</div>
１０．２枚の画像を透過合成する
:cross-fade()を使うと２枚の画像を合成できます。２枚の画像 URL を指定します。100%に近づくにつれ１枚目の透過度が高くなります。
css
.mask-synth {
background: -webkit-cross-fade(url(img/sample1.png), url(img/sample2.jpg), 50%);
background-size: cover;
}
１１．写真と色をブレンドする
Photoshop のように、乗算・オーバーレイなど背景色と背景画像を混ぜあわせたり、写真に色々な効果を付与することができる background-blend-mode プロパティ。
１２．すりガラス風のボックス
ぼかすだけなら-webkit-filter: blur()で OK ですが、こちらのサイトに擬似要素を使い、背景だけぼかし文字をそのまま表示する詳しい方法が書いてありましたのでメモ。
文字
１３．文字の中心に線をひく
そろそろ画像を使わず、CSS のみで線の上に文字をのせたい。そんな時はこちらのサイトが参考になります。display: flex;と擬似要素を使ったシンプルな記述方法がリンク先の後半で解説してあります。
１４．二行目以降を 1 字下げる
こちらもごく基本的なインデントの使い方。text-indentにマイナスの値を設定して二行目以降にインデントを付ける方法。本来は１行目のインデントを指定するプロパティです。
１５．span で改行させる
問い合わせページの注釈など、br を使わずに改行する最も簡単な方法。改行させたい文字をspanで囲み、display: block;で OK。
１６．文中の br を一発で消す
不用意に入れられた br タグが邪魔だけど多すぎて消すのに苦労しそう。一発で消す方法がありました。こちらでご紹介してあるようにp br { display: none; }で消すことが可能です。