CSS 表現デモ

CSS による表現手段を知るためのデモです。
※本来は社内勉強会（デザイナー向け CSS 説明会）用の資料ですが、単品でも利用可能です。

はじめに

CSS はウェブページを飾り立てるためのものだが、一方、効果的に使うことで「画像を作る／変える手間」や「ダウンロード時間」などを削減させることもできる。表現のツールであると共に、工数削減と効率化のツールでもあると言える。
つまりウェブデザインにおいて表現と効率を追求するには CSS への理解が必須であり、それを助けるのはフロントエンドエンジニアの債務でもあると考え、当デモを制作した。

このデモの目的は「 CSS をよく知らないウェブデザイナーが」「 CSS を使って表現できることを」「手っ取り早く知る」ことである。
したがって、ウェブデザイン未経験者や CSS 上級者には向いていない。また、 CSS 以外の表現手段（ Canvas や SVG 、 WebGL など）にも触れていない。レイアウトに関係するスタイルなどの情報もデザイン作業には不要であるため取り上げていない。
このように当デモでは理屈や正確さは二の次であり、その点は邪悪である。

内容としては、「何となく知っているが理解はしていない」であろうスタイルの説明とそのデモの集まりである。
デモの閲覧環境は 最新のデスクトップ版 Google Chrome のみ想定しているので、ぜひ Chrome で見てほしい。

用語・機能説明

• CSS とはウェブページのレイアウトや見た目を制御する言語を指す。
  CSS はその標準化団体である W3C によって策定され、各ベンダーが実装している。
• スタイルとは CSS の各機能を指す。
• 要素とはウェブページの構成要素を指す。 HTML のタグ。
  スタイルは基本的に要素に対して適用される。
• 非標準と補足されているスタイルは各ベンダーが独自に考案した非公式のスタイルである。
  そのため、対応環境は限られる場合が多い。
• 各ページの詳細リンクから該当スタイルの技術情報を閲覧できる。
  本来は W3C の仕様 を表示するべきだが、簡便のため MDN の説明 を表示している。そのため、若干 Mozilla （≒ Firefox ）寄りの説明となっている。
• 対応状況リンクからは該当スタイルに対応しているブラウザの一覧を閲覧できる。
  こちらはウェブ技術の対応状況一覧サービスである Can I Use を利用しているが、必ずしも正確であるとは限らない点に注意。
  なお、スタイルの動作は端末・OS・OS バージョン・ブラウザ・ブラウザバージョンによって差異があったりなかったりする。

目次

• テキストによるマスク
• 画像によるマスク
• 枠線とアウトライン
• 枠画像
• 丸角
• 反射
• ボックスシャドウ
• フィルター
• グラデーション
• 画像の最近傍補間（ニアレストネイバー）
• メディアクエリー
• ブレンドモード
• シェイプとクリップ
• 影文字／袋文字
• 変形
• 透視投影
• アニメーション
• ウェブフォント

注意点

• CSS よりも画像や SVG などで代用した方が効率面や運用面で勝るケースは多々ある。
  その判断ができるよう、 CSS でできることを把握しておくこと。
• ぼかしやドロップシャドウのような重いスタイルは必要最低限に留め、十分な実機検証を行うこと。
  影文字を相当数のテキストに適用したところ、古い iPhone でページをスクロールできないほど重くなる事態になったことがある。
• スタイルは JavaScript によって動的に変更できる。
  工数はかかるが、演出を強化したい場合はフロントエンドエンジニアに相談すると良い。
• あるスタイルを使用するかどうかの判断は担当のフロントエンドエンジニアに委ねること。

おわりに

「CSS ではできないこと」を知るには CSS の知識が必要である。
例えば、「枠線にグラデーションを使うことはできるか？」という質問の答えは「できない」である。
しかし、枠画像にグラデーションスタイルを指定するとか、親要素にグラデーションを敷いて枠線の太さだけ隙間を空ける、などの代替案は建てられる。
つまり、 CSS はその知識を組み合わせることによって真価を発揮するものであり、そこまでして初めて「できないこと」が見えてくる。
ウェブデザインを追求する際は、まず「 CSS で何ができるのか」を知ることから始めると良いだろう。画像ですべてをまかなうには人生は短すぎるし、非効率的だからだ。