| web creators特別号 |
| HTML5・スマートフォン・SNS・Webアプリケーション Webサイト制作最新トレンドの傾向と対策 |
Webデザイン 1-06
CSS3がもたらすWeb表現の可能性（後編）
HTML5とともに大きな注目を集めているCSS3。Webの表現力を大幅にアップさせるCSS3のさまざまな機能はすでにWebデザインを大きく変化させている。
制作・文／芳賀淳志（Suika Cube Inc.）
Browser IE 9over Firefox 3.6over Safari 3.1over Chrome 10over
拡充されたセレクタやプロパティ
CSS3ではセレクタやプロパティが拡充され、いままでよりデザインの自由度が高まり表現できる範囲が格段に広がった。視覚的なデザインに直接影響の大きいものを、以下にいくつかピックアップする。・ 角丸（border-radius）
・ ドロップシャドウ（text-shadow/box-Shadow）
・ グラデーション（linear-gradient/radial-gradient）
・ ボーダーへの画像指定（border-image）
・ 透明度や色指定（opacity/rgba/hsla）
・ 1つの要素に複数の背景画像を配置（background-image:複数画像）
・ 変形（transform）や動き（transition/animation）の制御
・ Web Fontの指定
これらによって、今までは複数の画像を用意したりJavaScriptで行ってきたことを簡潔なコードで実現できるようになった。視覚的なデザインを再現するために無理やり追加していたdiv要素やclass属性を排除することで、制作時間の短縮やソースコードの圧縮といったメリットに加えて、より精度の高いビジュアルづくりやユーザーエクスペリエンスに取り組むデザイナーに新たなWeb表現環境を提供することだろう。
レイアウトなどに関する機能も実用に即した便利なものが増えている。次に挙げるのはその代表的なものだ。
ボックスレイアウトの簡便化
Webページを制作する際にまずはカラムのレイアウトをするのが普通だが、今まではfloatやpositionというプロパティによってボックスレイアウトを設定していた。CSS3ではboxプロパティを適用することで簡単にボックスレイアウトを実現できるようになった。親要素に「display:box;」を指定すればそのボックスに含まれる各ボックス要素がfloat指定したように横並びになる。float指定では各ボックスの高さなどを揃える場合に複雑な指定を繰り返す必要があったが、CSS3による指定では背景要素を含めた子ボックスの高さが自動的に揃う。boxプロパティとは違って従来のfloatによる段組の代替手段としては利用できないが、新たにマルチカラムレイアウトモジュールも用意されており、column-countやcolumn-gap、column-ruleなどのプロパティを使用してカラムごとに多様な指定を行えるようになっている。擬似クラスの追加
擬似クラスとはHTMLの要素名や属性名ではなく要素の状態などに対してスタイルを適用するものだ。CSS3で追加されたnth-child()やnth-of-type()などの擬似クラスは複数の子要素に対してスタイルを指定できるので、これまで個別にコードを書いていた部分を大幅に削減できる。ある要素について「ある順番に対し～」「交互に～」「～の後に」「～のみ」「～ではない要素に」「空の要素に～」など、細かな指定が行える。またenabled、disabledは有効／無効な要素に、rootは文書内のルート要素に、targetは移動先となる要素に対してそれぞれスタイルを適用できる。属性セレクタの追加
属性セレクタとは指定した属性を持つ要素に対して特定のスタイルを適用するもので、CSS3では新たに以下の3つが追加された。・ 属性値が指定した値で始まる
（属性名＾="値"）
・ 属性値が指定した値で終わる
（属性名$="値"）
・ 属性値が指定した値を含む
（属性値*="値"）
いままで用意してあった属性セレクタに加えてさらに多彩な選択ができるようになり、上手に活用することで用途の幅も広がるだろう。またセレクタ自身は組み合わせて使用することができるので、親要素、子要素、兄弟要素のどの要素にどのようにスタイルを適用するかなど、複雑な設定ができるようになっている。
メディアクエリー
メディアクエリーはこれまでにあったメディアタイプの指定機能が拡張されたもので、メディアタイプ、メディア特性、論理演算子などによってメディア条件を設定することができる。これによってユーザーの使用する機器に合わせて（例えばモニタのウィンドウサイズ、アスペクト比やビット数、解像度など）スタイルシートを切り替えるなどの指定が行える。出力デバイスによって異なるスタイルを適用したい場合など、モバイル環境も含めてこれから大いに利用されるプロパティだろう。スマートフォンへの対応
iOSやAndroidといったモバイル・プラットフォームはPCベースに比べて格段に"モダン"な閲覧環境を提供している。PCでは前述のとおりブラウザの対応状況がまちまちであり、統一した閲覧環境に至るまでには、まだまだ時間がかかると思われる。だがスマートフォンの場合、ラウザは最新のレンダリングエンジンを実装しているので、HTML5やCSS3への対応が最も進んでいる。また最近、米Adobe社がモバイルFlash開発の終了を発表したようにプラグインによるWeb表現がレガシーな技術になっていくなか、JavaScriptによる新しいAPIのWeb標準化に対してもスマートフォンは対応度が高い。タッチパネルによる操作という限定的な操作方法はPCに比べて使いにくい部分もまだ多いが、ユーザーの閲覧スタイルの変化にともなってモバイル・プラットフォームの重要性は飛躍的に高まっていくだろう。
スマートフォン環境ではCSS3の新しいプロパティがほぼ使用できる。角丸やドロップシャドウなどのスタティックな要素に加えて、JavaScriptを必要としないアニメーションなどがすでに可能なために、PC用のCSS記述よりかなり簡潔なコーディングが可能となっている。現状ではHTML5+CSS5の技術的恩恵を最も受けられるデバイスだといえよう。
CSS3のソースコードはPCベースと変わるわけではなく、一般的な記述でスタイルを適用していく。ただし、スマートフォン側に特有の表示もあるので、それらに対してはHTMLによるviewport設定などを含めて細かな対応が必要だ。
Web制作者は、例えば電話番号自動認識やRetinaディスプレイに適した画像表示、ポジションに関するプロパティの不備など、各シチュエーションに合わせてHTMLやCSSの記述を使い分けて最良の表示を心がけるべきだろう。
Web表現の限界を押し広げるCSS3
ひと通りCSS3の概要を見てきたが、ここからは最新のCSS3の機能を駆使したテクニックをいくつか紹介しよう。デザイン表現に関するCSS3の新たな機能ではtransitionやanimationが目を引く。ボタンのクリック動作や動的なバナーなど簡単な要素を手軽に制作できるのもありがたいが、アニメーションなどの表現を取り入れてみたい人も多いだろう。CSS3を使用した動的なコンテンツはネット上でかなりの数がアップされているので、いろいろと見てみるのも参考になるだろう【01】。
Border-radiusプロパティとアニメーションに関する各種プロパティを組み合わせたデモで有名な「Our Solar System」【02】はCSS3の可能性を見事に体験させてくれる。ここでは比較的単純なグラフィックを使用しているが、背景画像などにハイレベルなイラストなどを使用すれば素晴らしい表現ができるはずだ。グラディエーション・プロパティなどをうまく利用した【03】も同様にCSS3のもつ能力をよく引き出している。
メディアクエリーについては前述したが、具体的にデバイスによる表示の変化を見せてくれるのが【04】【05】だ。さまざまな画面サイズのデバイスが登場してくると予想される将来に対して非常にフレキシブルな動作を保証してくれる有望なプロパティだ。
iPhoneアプリなどではよく見かける円形メニューもCSS3で作られている。【06】はその動きをPCブラウザ上に再現したものだ。狭い画面で便利なこういった操作系に対してCSS3の機能は親和性が高い。すでに同じような動きの操作がモバイルアプリのブラウザや時刻表などで多く用いられている【07】。
WebFontとはフォントファイルを指定のサーバーからダウンロードすることで任意のフォントをWebページ上で表示させる機能。Web上の表現でこれまで不便だったのはフォントの扱いだった。ユーザーの使用する機器にインストールされているフォントしか表示できないという制約があり、好きなフォントを使いたい場合は面倒でも画像で代替していた。
Flashによるフォントの埋め込みなど方法がなかったわけではないが、テキストベースのWebサイトにとって多彩なフォント表示は不可能だった。それがWebFontによりタイポグラフィ分野でも自由な表現が可能になったのだ。日本語フォントの対応はファイルサイズの問題もありフォントメーカーの数もまだ少ないがアルファベットに関してはほぼ好みのフォントが使える状況になっているので、Google web fonts（http://www.google.com/webfonts）など、いろいろとネット上で探してみるのも楽しい。
新たな機能が追加されたCSS3によって今までとは次元の違った表現がベーシックな制作環境で実現できるようになった。これから各種プロパティを駆使してどんな素晴らしい表現が現れるか期待が膨らむ。アーティスティックなクリエーターによるWeb表現がさらに加速していくことも楽しみだ。
【01】現在Safari4でしか動かないが、CSS3による動的表現が数多く紹介されている。効果名をクリックするだけでどう画面内で動きが確認できるので、いまCSS3でなにができるのかということを確認するのに非常に便利なサイトだ。
CSS3 Transitions Collection 30
（http://kudakurage.com/ipad-html5/transitions/collection.html）
【02】border-radius、animation-iteration-count、animation-timing-function、transformといったプロパティを駆使して太陽系の動きを再現している。
OUR SOLAR SYSTEM
（http://neography.com/experiment/circles/solarsystem/）
【03】マウスの動きに合わせてiPadが動き、その動きに同調してガラスの反射が変化する。
CSS3 Lighting Effects
（http://attasi.com/labs/ipad/）
【04】
【05】
【04】は通常のPCにおける表示。【05】はスマートフォン画面を想定した表示。メディアクエリーのデモ画面。ブラウザのウィンドウを横に縮めていくと、画面の幅に合わせて表示が変わるのがわかる。
（http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries）
【06】ピュアCSS3で作られた動きのあるナビゲーションの一例。スマートフォンなどでよく見られる。
Path menu in pure CSS3
（http://lab.victorcoulon.fr/css/path-menu/）
【07】モバイルの狭い画面で効率のよう操作を実現するアイデア。実際に使ってみると非常に使いやすいことがわかる。（iPhoneアプリ「東京都内乗合バス・ルートあんない（東京バス案内）」(C)一般社団法人 東京バス協会）
[目次に戻る]
2012年1月28日発売のweb creators特別号「Webサイト制作最新トレンドの傾向と対策」から、毎週記事をピックアップしてご紹介! HTML5・CSS3によるコーディングから、次々と生まれてくる新しいソーシャルサービス、Webアプリケーション、スマートフォンやタブレット端末への対応など、いまWeb制作で話題になっているトピックを網羅した内容になっています。
※本記事はweb creators特別号『Webサイト制作最新トレンドの傾向と対策』からの転載です。この記事は誌面でも読むことができます。
