Basics/Keyword:Wing(軽量CSSフレームワーク)Wingは最小限の機能だけを備えた軽量なCSSフレームワーク。レスポンシブWebデザインにも対応している。});連載目次Wingは最小限の機能だけを備えた軽量なオープンソースのCSSフレームワーク(MITライセンスの下で配布されている)。レスポンシブWebデザインにも対応している。Wingの特徴Wingの最大の特徴はそのファイルサイズにある。ミニファイしたバージョンでは5KB弱、していないバージョンでも8KB弱しかない。それとは引き替えにできることも限られる。Bootstrapのような高度な機能を提供するCSSフレームワークを必要としない、ちょっとしたWebアプリであれば、Wingは重宝すると思われる。Wingがサポートしているのは次のようなものだ。Sansを利用)ユーティリティーグリッドシステムはBootstrapと同様に1行が12分割され、個々のカラムがその12分割された領域を何個分使うかを「col-N」のように指定していく(「N」は1〜12の整数)。Bootstrapでは「col-xs-N」「col-sm-N」「col-md-N」「col-lg-N」のように画面サイズに合わせて、細かくカラムの使い方を指定できたが、Wingではそこまで詳細な指定はできない。以下にグリッドの使用例を示す(<head>要素内でのスタイル指定は見た目をちょっとだけよくするためのもの)。上のコードの(1)を見ると分かるが、Wingはnpm経由でのインストールが可能だ。Bowerを使ってもよいし、CDNやWing公式サイトへのリンクを参照してもよい。(2)はコンテナの記述。Bootstrap同様に、Wingではグリッドはコンテナに含めるようにする。(3)でグリッド行を作成している。グリッドの各行に対してそのclass属性を「row」とする。ここで一緒に指定している「text-center」は、Wingがユーティリティー機能として提供しているもので、その名の通りにテキストを中央ぞろえで表示するための値だ。(4)ではグリッドに含まれるカラムを記述している。ここでは3つのカラムを作成し、それぞれが12分割された領域を4つずつ使うように指定している。その下では、2つのカラムで構成されるグリッド行をもう1つ作成し、12分割された領域をカラムが等分に使用するようにしている。Bliskでの表示結果を以下に示す。見ての通り、モバイルデバイスでは全てのカラムが縦に、デスクトップWebブラウザでは(このウィンドウサイズだと)カラムが分割されて表示されている。これはwing.cssファイル内でのメディアクエリによって横方向のサイズが768ピクセル以下のときには各カラムが100%の幅を使うように指定されているためで、デスクトップブラウザでもウィンドウサイズを縮めると縦にカラムが並んで表示されるようになる。Bliskでの表示結果Bootstrapと異なるのは、グリッド行ごとに記述を分ける必要がある点だ。Bootstrapでは12個の領域を越えた要素については自動的に次のグリッドに振り分けられ、その表示もスマートに行われたが、Wingではそこまでインテリジェントなことをしてくれない。上のコードの2つのグリッド行を1つの<div>要素にまとめるときれいに表示されないので注意しよう。Wingではボタンやフォームの要素(の幾つか)についてモダンなスタイル指定が行われている。以下にこれらの利用例を示す(上のHTMLコードに追加した部分のみを掲載)。type="submit"div></div></form>ボタンとフォーム要素ボタンについてはclass属性に「btn-outline」「btn-outline-inverted」「btn-clear」などを指定できる。[デフォルト]ボタンを見れば分かる通り、特に指定をせずともモダンなスタイルが適用される。これはフォームの要素についても同様だ。Wingでデフォルトでスタイルが指定されている要素はそれほど多くない(どれだけの要素についてスタイル指定が行われているかは、wing.cssファイルを参照されたい)。最後のsubmitボタンで使われている「class="pull-right"」もWingが提供するユーティリティー機能で、これは要素を右寄せで表示するものだ。以下にBliskでの表示結果を示す。ボタンとフォーム要素ちなみにスタイル指定が行われていないものを利用すると次の画像のようになってしまう。軽量であることと引き替えなので、この辺は自分でスタイルを指定するか、もっと高機能なCSSフレームワークを使用するかを検討する必要がある。Sans」が使われている)。このように機能こそ限定されているが、WingはモダンなWebコンテンツを手軽に作成するのに役立つ。何より、ファイルサイズが小さいので、その読み込みも高速であり、高度な機能を持つCSSフレームワークを必要としない小規模なWebコンテンツでは便利に使えるかもしれない。Wingは最小限の機能だけを備えた軽量なCSSフレームワークであり、そのシンプルさ、高速性から小規模なプロジェクトで、レスポンシブなWebコンテンツを作成する際に有効に利用できるだろう。ファイルサイズが小さいので、モダンCSSフレームワークがどのように構成されているかを学習するのにもうってつけといえる。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。