Web制作者はおさらいしたい!CSSの勉強になる実用的な基本テクニックまとめ

TwitterFacebookHatena
  • 公開:2015-3-23
  • 更新:2023-10-26
  • 文章量:4473
  • CSS

TL;DR

実務で意外と使う基本的なものやトリッキーな小技。少ない記述で済む CSS テクニックなどをまとめました。今回は Web 制作に関わるなら、必ずおさえておきたいものや今後使っていきたいテクニック中心です。

画像

1.画像の下にできる隙間をなくす

画像の下に色などを配置すると、わずかに隙間が出来ることがあります。そんな時は親ブロックにline-height: 0;で OK。他には画像に直接vertical-align: bottom;display:block;を使えます。

css

.sample {
  line-height: 0;
}

2.画像の下にテキストが回り込まないようにする

回り込み解除は親要素か以下の例だとテキストにoverflow: hidden;overflow: auto;を指定します。IE 対策で zoom 属性 zoom:1;も同時に設定します。

css

.sample p {
  overflow: hidden;
  zoom: 1;
}

3.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>

4.デバイスによって、画像を変更する

CSS4 からになりますが、image-set()を使用するとdevicePixelRatioによる画像表示を変更することが可能です。高解像度の画像と低い解像度の画像を切り替えたいときに。density(値は x )によって画像を変更します。

5.画像の上に文字を配置

こちらも定番ですが、マウスオーバーで注釈を出すシンプルな方法。通常時に注釈を一旦隠し、マウスオーバー時に 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>

6.鏡像

ちょっとトリッキーな小技。box-reflectを使うと鏡が反射した時のような効果を出すことができます。1枚の画像だけでこれができるのはすごい。参考サイトでは、-webkit-gradientを指定して自然な見え方にしています。

css

.sample {
  height: 500px;
  overflow: hidden;
}
.sample img {
  -webkit-box-reflect: below;
}

マスク

7.画像を斜めにくり抜く

背景画像を固定させたら擬似要素を作成し、要素を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>

8.写真をくり抜く

プロパティ clip: rect(上, 右, 下, 左 )を使うとコンテンツや画像の表示範囲を指定することができます。position プロパティの値は absolute、rect の中は(上 右 下 左)となります。600×300 の写真をくり抜くと以下のように。

css

.sample img {
  position: absolute;
  clip: rect(100px 500px 200px 100px);
}

9.文字で画像をくり抜く

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>

10.2枚の画像を透過合成する

:cross-fade()を使うと2枚の画像を合成できます。2枚の画像 URL を指定します。100%に近づくにつれ1枚目の透過度が高くなります。

css

.mask-synth {
  background: -webkit-cross-fade(url(img/sample1.png), url(img/sample2.jpg), 50%);
  background-size: cover;
}

11.写真と色をブレンドする

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

12.すりガラス風のボックス

ぼかすだけなら-webkit-filter: blur()で OK ですが、こちらのサイトに擬似要素を使い、背景だけぼかし文字をそのまま表示する詳しい方法が書いてありましたのでメモ。

文字

13.文字の中心に線をひく

そろそろ画像を使わず、CSS のみで線の上に文字をのせたい。そんな時はこちらのサイトが参考になります。display: flex;と擬似要素を使ったシンプルな記述方法がリンク先の後半で解説してあります。

14.二行目以降を 1 字下げる

こちらもごく基本的なインデントの使い方。text-indentにマイナスの値を設定して二行目以降にインデントを付ける方法。本来は1行目のインデントを指定するプロパティです。

15.span で改行させる

問い合わせページの注釈など、br を使わずに改行する最も簡単な方法。改行させたい文字をspanで囲み、display: block;で OK。

16.文中の br を一発で消す

不用意に入れられた br タグが邪魔だけど多すぎて消すのに苦労しそう。一発で消す方法がありました。こちらでご紹介してあるようにp br { display: none; }で消すことが可能です。

Web制作者はおさらいしたい!CSSの勉強になる実用的な基本テクニックまとめ