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

少し前にサイト制作でさりげなく使われているCSSテクニックをまとめましたが、今回はそれを補足する形で、これから増えそうなもの、使っていきたいものを今後忘れないようにメモしておきます。
エンジニア速報は Twitter の@commteで配信しています。
もくじ
画像
エフェクト
段組み
文字
画像
1.ブレンドモード

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
2.表示範囲

プロパティclip: rect(上, 右, 下, 左 )
を使うとコンテンツや画像の表示範囲を指定することができます。positionプロパティの値はabsoluteにします。
例:clip:rect(60px 150px 130px 40px); position:absolute;
3.透過+合成

backgroundの値にcross-fade()
を指定すると2枚の画像を合成し表示することが可能となります。「%」のパラメータは透過度です。参考:CSS Images Level 4 cross-fade() example
#img{ background-image: cross-fade( url(""logo-box.png""), url(""logo-bare.png""), 50%); }
4.半透明

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

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

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

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

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

流し込みたいコンテンツをflow-into
プロパティで指定し、レイアウトをflow-from
で指定します。リージョンを使うとボックスにコンテンツを流し込みできます。
article { -webkit-flow-into: myThread; } .region { -webkit-flow-from: myThread; }
10.数値の計算

calc()
は計算結果を値として利用できるファンクションです。少しめんどうな計算をCSS単独で実現することができます。
例:width: calc(100%/2);
文字
11.アウトライン

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

今度はtext-fill-color
プロパティで文字を透明にしつつ、アウトラインを表示します。transparent
で文字の色を透明にしています。
div{ color: white; -webkit-text-stroke: 1px white; -webkit-text-fill-color: transparent; }
13.文字詰め+リガチャ(合字)

トラッキングは複数文字間(テキストブロック全体)を調整することですが、text-rendering
の値をoptimizeLegibility
にすると文字詰め処理を行います。optimizeSpeed
は使わないときの処理です。
例:text-rendering: optimizeLegibility;
14.iPhone 文字を調整
これは皆さんご存知だとは思いますが、text-size-adjust
でスマホを横にした際に、文字サイズをそのまま変わらないようにします。文字サイズ拡大ができなくなるのでnone
は指定しないように。
例:-webkit-text-size-adjust: 100%;
スポンサード リンク
関連記事
- 今どきのプログラマー向け社内共有ツール
- Mac初心者おすすめ!フロントエンドやコーダー向け初期設定
- CSSだけでOK!レスポンシブ対応のズームイン・ズームアウトを繰り返すCSSフェードスライダー
- デベロッパーにおすすめのATOM開発系ダークテーマ
- CSSのみでテキストを「飾る・動かす」おしゃれなエフェクト10
- モダンなフォームを作るために覚えておきたいCSSの擬似クラス
- object-fit・currentColor・will-change・image-renderingなどマイ...
- CSSのみで実現、背景を動かす「おしゃれエフェクト」まとめ
- 聞き慣れないけど確実に知っておきたいCSSやhtmlの新機能
- スクロールした時に面白いエフェクトを出すためのアイデアまとめ
Leave a Comment