mimonelu

CSS 表現デモ

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

はじめに

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

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

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

用語・機能説明

目次

注意点

おわりに

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