| web creators特別号 |
| いますぐ悩みが解決する！ Webデザイン仕事で役立つ54のアイデア |
フレームワーク＆API 5-05
複数のメタ言語に対応した 320 and Up
「320 and up」は、レスポンシブデザイン対応のHTML5+CSS3フレームワークであり、メタ言語のLESSとSassとそしてSass+Compass、さらにSCSSにも対応している。
制作・文／酒井能克（有限会社ブルームーン）
BROWSER IE…6over Firefox…3.6over Safari…3.1over Chrome…10over
メタ言語によりコードをシンプルに
「320 and up」【01】はSassやLESSなどのメタ言語に対応したフレームワークだ。メタ言語を使用すると構造的な記述が可能なため、修正などで手を加えるコードが少なくて済む。
たとえば、透過率85％の白文字のテキストで15％の透過率の黒のバックグラウンドを標準のCSSで記述する場合は【02】となる。これを、Sassを使って記述したのが【03】である。するとサイト全体の指定において【04】のようにシンプルな記述で済む。
ここでクライアントから文字や背景の変更を指示されても、サイト全体で修正する箇所は【03】と【04】の2カ所だけである。さらにこの【03】のblack, Whiteの関数を使って mixinしてみよう【05】。
mixinとはミキシング・インの略でその昔、アイスクリームの種類を混ぜてそこにトッピングを加えるという手法からヒントを得て命名されたオブジェクト指向システムから由来している。あらかじめ用意した関数を混ぜて組み合わせることで１つのパーツを構成するという方が理解しやすいと思う。
このmixin を使えば【06】のようにclass=box とする事が可能となる。これをコンパイルすると【07】のCSSとなる。わずかこれだけの記述で【08】のように表示することができる。
メタ言語に対応した「320 and up」であれば、このようにシンプルなコードの記述が可能になる。
なおSassやLESSなど、メタ言語の詳細な説明は「5-6 Web開発の生産性を向上させるメタ言語 Sass（SCSS）とLESSとは」に掲載予定なので、詳しくはそちらを参照して欲しい。
【01】http://stuffandnonsense.co.uk/projects/320andup/
【02】この場合、色を指定する場所ごとに記述が必要になる。
【03】Sassで記述すれば、2つのシンプルな関数で構造化することが可能。
【04】
【05】
【06】
【07】
【08】
SCOUT＆compass
320 and up のGitHubリポジトリを訪れると less, sass, sass-compass,scss,scss-compassというフォルダを見ることができる【09】。次にこのcompassについて紹介しよう。compassにはSassプラスαのフレームワークでSassを便利に使うmixinがたくさん含まれている。
これら、compass を使った場合のコンパイラにはSCOUT 【10】がある。compass【11】の機能を使いこなせばデザインパーツをさらに組み合わせていくことができる。
【09】このプラグインはYaml4をダウンロードするとyaml/addons/rtl-support/ に収納されている。
【10】SCOUT のサイト(http://mhs.github.com/scout-app/)。こちらもフォルダにコードを置いて保存するとcssフォルダにコンパイル語のコードが作られる。ディレクトリ設定はConfigrationでおこなう。
【11】compassのサイト（http://compass-style.org）。compassはSassを拡張する機能を持ったフレームワークで、Sassを使用する場合は必須といってもいい。
CSSと近い感覚で記述できるメタ言語「SCSS」
最後にSCSSを紹介しよう。SCSS はSassy CSS の略で Sassの文法をよりCSSに近づけたものだ。CSSの文法と互換性を取って再実装したものでCSSに近い感覚で記述できる【12】。「320 and up」に限らず、Sassに対応したフレームワークでは、非常に役立つ。なお、SCSSの詳細については次項で改めて解説する。
最近では Twitter Bootstrap のSCSS版も GitHubで見ることができる。どちらか一方が優れているとは言い切れない日進月歩な状況なので、使いたいと思った方を選択して挑戦してみるとよいだろう。
【12】Sass - Syntactically Awesome Stylesheets（http://sass-lang.com/）。ここにあるVariablesやNestingにあるコードでsassとscssを見比べると、よりCSSライクになっていることがわかる。
[目次に戻る]
2013年1月29日発売のweb creators特別号「いますぐ悩みが解決する! Webデザイン 仕事で役立つ54のアイデア」から、毎週記事をピックアップしてご紹介! 近年さかんに目にするパララックス効果やMasonryを利用したレイアウトをはじめ、見やすくて使いやすいナビゲーション、フォームや製品紹介ページのユーザビリティを向上するインタラクション、表現の可能性を広げるHTML5+CSS3の機能、制作効率を向上するフレームワークの紹介、スマートフォンサイト制作のポイントとTipsなど、Web制作の仕事に役立つ54のアイデアが満載です。
※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。
