calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

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

  • 作成：2014/07/14
  • 更新：2014/10/24
  • Web制作
CSS_Tutorial_2014

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

Sponsored Link

もくじ

画像

エフェクト

段組み

文字

画像

１．ブレンドモード

blend-mode_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

２．表示範囲

display-range_css

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

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

３．透過＋合成

transparent-synthetic_css

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

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

４．半透明

semitransparent_css

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

エフェクト

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

mouseover-list_css

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

menu-icon_css

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

段組み

７．マルチカラム

multi-column_css

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

例：column-count: 2;

８．段の表示順

display-order_css

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

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

９．コンテンツ流し込み

poured-content_css

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

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

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

１０．数値の計算

calculation_css

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

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

文字

１１．アウトライン

outline_css

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

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

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

transparent-outline_css

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

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

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

character-fill_css

トラッキングは複数文字間（テキストブロック全体）を調整することですが、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

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。