Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInEmail this to someone

CSSはHTMLでマークアップした要素に対して、色やレイアウトなど見た目を指定するための言語ですが、CSS3が出た事によって角丸やグラデーション、アニメーションなど様々な表現を扱う事が出来るようになりました。CSSで出来る事が増えた事によって、よりCSSのコーディングを効率的に行えるように色々なアイデアや技術が生み出されてきました。
今日はその中からフロントエンドの初心者を対象に色々と知っておくべきCSSの事を広く浅く紹介したいと思います。

近年のCSSをとりまく技術

設計思想

CSSは記述するのが簡単な反面、とても脆い言語でもあります。
小規模なサイトを作る場合には、さほど問題になりませんが、大規模サイトをチームで開発する場合などで記述量が多くなる場合に全員でしっかりと設計思想の共有やコーディングの規約を決めておかないと後で取り返しがつかないほどの問題に見舞われる事があります。
たとえば、誰かが同じclass名を使ったばっかりにスタイルが崩れたり、同じスタイルを指定するのに無駄にCSS定義が重複したり、!importantを乱用されてスタイルが変えられないという事が起こりえます。

そのため、近年では保守性、拡張性に優れたメンテナブルなCSSを記述するためにBEMやOOCSS、SMACCSという設計思想を取り入れる事が多くあります。

CSSメタ言語

メタ言語とは、コードを生成するための言語の事です。なので、CSSメタ言語はある言語を使って最終的にCSSに変換してくれる言語の事を言います。
CSSはプログラム言語ではないので、通常では変数や関数を使う事ができませんが、CSSメタ言語でそれらを実現する事ができるようになります。
有名なCSSメタ言語でいうと、SassLESSがあります。
さらにSassを拡張するcompassというフレームワークも存在します。

CSSフレームワーク

CSSフレームワークとは、既に用意されたCSSを読み込んでHTMLソースを記述するだけで、カッコよい見た目を作ってくれる便利ツールです。レスポンシブWebデザインにも対応されており、モックを作る場合やデザインが苦手な方には有効な選択肢だと思います。
よく知られているのは、Twitterが開発したBootstrapやGoogleが開発したMaterial uiでしょうか。こちらの記事でたくさん紹介されていますので、ぜひご覧ください。

CSSアニメーション

CSS3ではtransformやtransitionなどのプロパティを使って、従来のCSSでは出来なかったアニメーションを行う事が出来るようになりました。しかも、CSSのアニメーションは通常JavaScriptでアニメーションを行うより高速だと言われています。
CSSを使った色々なアニメーションがあるので、以下のサイトを参考に見てみてください。とても楽しいですよ。

簡単にアニメーションを実装できるAnimate.cssというライブラリもあるようです。

リセットCSS

リセットCSSは、各ブラウザごとに異なるCSSの差異は無くす、あるいは軽減し、製作者が意図した通りにCSSを記述する事をサポートしてくれるスタイルシートの事です。
paddingやmarginなど、あらゆる差異を無くしてくれるreset.cssや、有用なスタイルのみを残してくれるnormalize.cssがあります。
最近ではモバイル側のバグや差異を埋めるためのsanitize.cssというのもあります。

スタイルガイド

その名の通り、スタイルを指定するためのCSSのセレクタ名と見た目がセットになっているCSS用の設計書のようなものです。
デザインルールを統一するためには、チームが共通のスタイルを指定する必要がありますので、複数人で開発する時などに非常に有効なドキュメントになります。
また、スタイルガイドはデザイナーがつくり、それを元にエンジニアがWebページを展開していくパターンもあると思います。
スタイルガイド生成ツールはたくさんありますが、SC5 StyleguidehologramKSSStyleDoccoなどがあります。

という事で、近年のCSSをとりまく技術やツールが多様化してきた事により便利になった反面、情報量も比例してとても多くなりました。個人的には、便利なものは使ったほうが良いと思うものの、本当に必要なものだけ使うべきだと考えています。CSSメタ言語も使い方によっては、とても可読性の悪いコードとなってしまったり、リセットCSSも本当に必要なCSSだけを使用する方が影響範囲を把握しやすく余計なスタイル指定をせずに済みます。
技術は増える一方なので、よく考えて有効活用していきたいですね。

Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInEmail this to someone