前にサイト制作でさりげなく使われているCSSテクニックをまとめましたが、今回はそれを補足する形で、これから増えそうなもの、使っていきたいものを今後忘れないようにメモしておきます。画像1.ブレンドモードPhotoshopののように、乗算・オーバーレイなど背景色と背景画像を混ぜあわせたり、写真に色々な効果を付与することができるbackground-blend-modeプロパティ。シンプルな例では、以下のように背景写真と背景色を合成することが可能です。)を使うとコンテンツや画像の表示範囲を指定することができます。positionプロパティの値はabsoluteにします。3.透過+合成backgroundの値にcross-fade()を指定すると2枚の画像を合成し表示することが可能となります。「%」のパラメータは透過度です。to-R4.半透明CSS3ではfilterプロパティでフィルタをかけることができます。ベンダープレフィックスと一緒に使用してください。grayscale(1);など。WATCHエフェクト5.マウスオーバーアイデア一覧jsを使わない、画像にマウスを乗せたときのエフェクト一覧。translate3dはX方向とY方向とZ方向の距離で3D移動を指定することができます。translate3d(0,-7%,0);で上に動かします。Codrops6.CSSのみでメニューアイコン画像を使わないシンプルなメニューアイコンの作り方。三本の線をクリックで回転・消去・位置を変更させ「×」に変更します。transparent;で透過させています。CodePen段組み7.マルチカラムcolumn-countを使うとボックス内のコンテンツを段組することができます。以下のように値を2と指定したときは、2カラムのボックスが構成されます。使うことにより横並びや並び順の変更など柔軟にレイアウトを変えられるようになりました。使うとフレキシブルレイアウトで段組みする際、アイテムの表示順を変更することができます。MDN9.コンテンツ流し込み流し込みたいコンテンツをflow-intoプロパティで指定し、レイアウトをflow-fromで指定します。リージョンを使うとボックスにコンテンツを流し込みできます。CSSレイアウトを作る方法10.数値の計算calc()は計算結果を値として利用できるファンクションです。めんどうな計算をCSS単独で実現することができます。(モバデビ)文字11.アウトラインtext-strokeプロパティで、文字のアウトラインを表示することができます。ベースの文字の色をcolorを白に指定して、以下のように黒のアウトラインをひくとわかりやすいです。CSS-Tricks12.透過+アウトライン今度はtext-fill-colorプロパティで文字を透明にしつつ、アウトラインを表示します。transparentで文字の色を透明にしています。Japan13.文字詰め+リガチャ(合字)トラッキングは複数文字間(テキストブロック全体)を調整することですが、text-renderingの値をoptimizeLegibilityにすると文字詰め処理を行います。optimizeSpeedは使わないときの処理です。文字を調整これは皆さんご存知だとは思いますが、text-size-adjustでスマホを横にした際に、文字サイズをそのまま変わらないようにします。文字サイズ拡大ができなくなるのでnoneは指定しないように。投稿者:commte株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。した話し方をするおっさん。この後によく読まれている記事2015/08/101ページで完結、Web制作者が助かるチートシート・資料・PDFまとめページを移動せずにテンプレートや仕様書を確認したい。今回はPCの横に貼ったり印刷したり、ワンクリックで見れるように、1ページで完結している資料をまとめました。今後のWeb制作では受託だけじゃなくて販売できるレベルの商品を作りたい。上から指示された分業だけでなく、一人でも一貫して制作できる技術を知っておきたい。コメントデータの処理方法の詳細はこちらをご覧ください。