知っておいてよかった！Web制作時に効率上げる「便利」なCSSテクニック
少し前にサイト制作でさりげなく使われているCSSテクニックをまとめましたが、今回はそれを補足する形で、これから増えそうなもの、使っていきたいものを今後忘れないようにメモしておきます。
PR
Sponsored Link
もくじ
画像
エフェクト
段組み
文字
画像
１．ブレンドモード
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%;
スポンサード リンク
-
投稿者：commte
株式会社コムテ代表取締役。2015/8：弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。
URL：西田 鉄平
この後によく読まれている記事
Comments
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Leave a Comment