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

TwitterFacebookHatena
  • 公開：2014-7-14
  • 更新：2024-11-12
  • 文章量：3219
  • CSS

TL;DR

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

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

２．表示範囲

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

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

３．透過＋合成

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

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

４．半透明

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

エフェクト

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

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

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

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

段組み

７．マルチカラム

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

例：column-count: 2;

８．段の表示順

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

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

９．コンテンツ流し込み

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

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

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

１０．数値の計算

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

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

文字

１１．アウトライン

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

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

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

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

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

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

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

例：text-rendering: optimizeLegibility;

１４．iPhone 文字を調整

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

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

Jamstack での制作を依頼する

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