ライブドアの開発・運営ノウハウを公開する「livedoorディレクターブログ」で「スマホ集中特集」。第4回は、ライブドアの新規開発グループ ディレクター兼マークアップエンジニアの浜さんの記事となります。
こんにちは。浜です。スマホ連載の第4回目は、HTML5とCSS3という実装寄りの内容になります。とは言っても難しいコードはあまり出てきません。「HTML5とCSS3で何ができるのか」という事をメインに、知っておくと、構成書を作る時のアイディアベースになったりデザイナー・マークアップエンジニア（コーダー）と打ち合わせをする際に話しやすくなる内容をお送りします。
記事のアウトラインは以下です。
※この記事はChromeで見るのがおすすめです。
そもそも、HTML5とCSS3ってもう使えるの？
使えます。
（※ここから先は、その根拠について説明します。必要ない方は、次の章に飛んでしまっても構いません）
現在のスマートフォンサイトはターゲット環境をiPhoneとAndroid（今後はWindows Phone 7も？）とする事が多く、古来より続くIE6の呪縛から解き放たれています。これらの端末にデフォルト搭載されているブラウザはHTML5とCSS3の実装が進んでいるので、積極的に使っていけるのです。
あるいは、「未完成の仕様を実務で使っていいの？」という疑問を感じる方もいるでしょう。確かに、HTML5もCSS3もこの記事を書いている2011年3月現在で勧告されていません。しかし、「未完成だから使ってはいけない」わけでは無いのです。仕様的には完成に至ってなくても、各ブラウザでの実装は日々進んでいるのです。
※ここからの内容は若干横道なので、分かりづらければ飛ばしてしまっても構いません。
勧告済みのCSSで最新のレベルはCSS2ですが、CSS スナップショット 2010 の 2.2. CSS Level 2によりhttp://standards.mitsue.co.jp/resources/w3c/TR/css-2010/#css2">CSS Level 2 は CSS 2.1 仕様 により定義される。
とされています（解りづらいかもしれませんが、「CSS2と言ったらCSS2.1の内容を指している」と思ってください）。しかし、現在のCSS2.1は草案という状態にあるのです。
※「草案」と聞くとまるで叩き台のように思えますが、それはW3Cの策定フローによるもので、安定性は勧告済みのCSS2よりむしろ高まっています。
この辺りについてもっと知りたい場合は、下記リンク先を参照してください。
つまり、CSS2.1は勧告に至ってないにも関わらず、各ブラウザに実装され広く使われているのです。と言うことは、HTML5やCSS3でもブラウザに実装されている機能から使っていく分には問題は少ないと言えるでしょう。
※ただし、ブラウザに実装されているとは言えあくまで策定中の仕様なので、変更が起きる可能性はゼロではありません。
使える機能から使っていくには各ブラウザの実装状況を知っておく必要があります。詳しく追求するのはマークアップエンジニアの職域なのでここでは書きませんが、気になる人は以下のリンク先が役に立つかもしれません。
HTML5とCSS3を使うメリットは？
策定中の仕様を採用する以上、メリットとデメリットがあります。
HTML5とCSS3のメリットには、大きく分けて作業が簡単になる系とこれまでできなかった事ができるようになる系があります。
◆ HTML5を使うメリット
- できなかった書き方ができるようになって工数が減る
- 新たなインターフェイス・機能が使える
- 定型句がシンプルになった
＜できなかった書き方ができるようになって工数が減る＞
XHTML1.0などでは仕様上できなかった、「ブロック全体を含めたリンク」や「body要素内にstyle要素を記述」などが、条件によっては可能になりました。これらのためにスクリプトを書いたり新規にCSSファイルを用意する手間が減り、結果として作業量が減る効果が期待できます。
＜新たなインターフェイス・機能が使える＞
スマートフォンを持っていれば既に体験していると思いますが、HTML5によって新たなインターフェイスが使えるようになっています。
分かりやすいのがフォーム関連です。例えば「メールアドレス入力フォームを開いたらキーボードに @ マークが出ていた」とか「電話番号を入力しようとしたらテンキーが出てきた」といった経験はないでしょうか？これらはHTML5で新たに登場した属性を使って実装されているのです。
フォーム以外にも、Flashが利用できないiPhoneなどでも動画を再生できるvideo要素や、JavaScriptで絵図を描けるcanvasなども注目されています。
＜定型句がシンプルになった＞
あとは重箱の隅的な事ですが、全体的に書式がシンプルになっている事も挙げられるでしょうか。DOCTYPEやhead要素内など定型句的な部分が簡略化されていたり、空要素タグの終端スラッシュの有無が混在しても（仕様的には）良いなどです。
◆ CSS3を使うメリット
- やりたい事がシンプルに実装できるようになったので、工数が減る
- これまでにできなかった表現ができるようになる
- ファイルサイズが軽くなる
＜やりたい事がシンプルに実装できるようになったので、工数が減る＞
これはCSS3というよりはIE6からの解放という面が大きいのですが、多様なセレクタが実用できる事で、作業効率の向上が見込めます。
これまでは「HTMLにid属性やclass属性を指定する」→「CSSを書く」という手順があちこちで必要でしたが、多様なセレクタが使える事により「CSSを書く」のみで作業を進める事ができます。特にフォームやテーブル関連で効果が顕著です。
セレクタ以外にも、有効な機能がたくさんあります。
角丸はビジュアルデザインでよく使われますが、これまでは画像として切り出して実装していました。角丸の種類が増えると画像の数も増していき、管理や運用が煩雑になりがちです。
CSS3では角丸はコードで指定できるようになっているので、画像は必要なくソースコードのみで実装できます。
角丸だけでなく、グラデーションやドロップシャドウもコードで実装する事ができます。
＜これまでにできなかった表現ができるようになる＞
作業効率のみならず、プレーンテキストへのドロップシャドウや要素の変形など、これまでは実現する事が難しかった表現もできるようになりました。
なお、CSS3でできる事の具体例は、次の章で詳しく解説します。
＜ファイルサイズが軽くなる＞
スマートフォンサイトを作る時に気になる事のひとつが、ファイルサイズです。3G回線で利用するケースを考えると、画像の使用はPCと比べて慎重にならざるをえません。
CSS3ならグラデーションや角丸を画像を使わずに実装できるので、ファイルサイズを抑える事ができます。
◆ デメリット
一方、デメリットも存在します。
HTML5とCSS3の両者に共通するデメリットには、変更が発生する可能性が挙げられます。ブラウザが実装していて既に広く使われている物に関しては、例えばプロパティが使えなくなるなどの大きな変更はそうそう無いと思いますが（APIではありましたが）、いざという時のために対処法を考えておくと安心でしょう。
HTML5とCSS3で何ができるの？
ここからは、実際にHTML5とCSS3で何ができるのかを見ていきたいと思います。詳しい実装方法は、ググるかお近くのマークアップエンジニアに聞いてみてください。
◆ HTML5
＜ブロックリンク＞
このようなリスト状のインターフェイスは、スマートフォンサイトでよく見かけます。このリストは一行全てがリンク領域である事が期待されるでしょう。
XHTML1.0などでこれを実装しようとすると、a要素はブロック要素を含む事ができないため、中の要素をインライン要素のみにしたりJavaScriptを使うなどの対応が必要でした。
しかし、HTML5ではa要素のコンテンツモデルはトランスペアレントとされているので、条件によってブロック要素（的な要素）を含む事ができるようになりました。ちょっと専門的な用語が並んでしまいましたが、ざっくり言うと次のように書けるようになりました。
<li>
<a href="./">
<h3>タイトル</h3>
<p>テキスト</p>
</a>
</li>これまで、「こうできたらいいのになー」と思っていた人も多いのではないでしょうか。
＜body要素の中にstyle要素を書ける＞
XHTML1.0などでは、style要素はhead要素の中にしか書く事ができませんでした。
通常、CSSの記述先は外部ファイルが多いのですが、テンプレートシステムを使っていたりブログの特定の記事にのみ固有のスタイルを指定したいなど、body要素の中にCSSを書けると便利なケースがしばしばあります。
HTML5ではscope属性を指定することでそれが可能になっているので、そのためにif文を書いたりCSSファイルを新規作成したりする必要がなくなりました。
※ただし、乱用は保守性の低下を招くので、マークアップ側で注意したいところです。
＜新たなインターフェイスが使える＞
前の章で紹介した、フォームの入力内容に合わせたキーボードが出ているスクリーンショットを掲載します。
- type="email"（@マークが出ています）
- type="url"（.com や / が出ています）
- type="tel"（テンキーが出ています）
- type="search"（決定ボタンがSearchになっています）
などに更に詳しい情報が載っていますが、スマートフォンのブラウザでは未対応の物もあるので、事前に確認が必要になります。
◆ CSS3
＜border-radiusプロパティ＞
これまではdivなどと画像を駆使して作られていた角丸を、CSSのみで実装する事ができます。
実装速度の向上と柔軟な運用が可能になるメリットがあります。
ちょっと工夫すると、丸くする事もできます。
＜box-shadowプロパティ＞
画像や各種要素にドロップシャドウを付ける事ができます。
様々な使い方ができますが、ユーザーの投稿画像など、事前にサイズが分からない物などに便利です。
＜text-shadowプロパティ＞
要素だけでなく、プレーンテキストにもドロップシャドウをかけることができます。
無闇に使うと見づらくなる事があるので注意が必要です。
＜gradientプロパティ＞
背景色を指定するように、背景にグラデーションを指定することができます。
border-radius, box-shadow, text-shadow などと組み合わせることで、きれいなボタンなどを作ることができます。
＜transformプロパティ＞
要素を変形（傾けたり捻ったり）する事ができるのが、transformプロパティです。スマートフォンでは、transitionプロパティと共に使ってアニメーションを実装する時に便利です。
＜transformプロパティ + transitionプロパティ（Chromeで見てください）＞
マウスオンでアニメーションします（Chrome）。
スマートフォンはPCに比べてマシンパワーが低いので、jQueryなどを使って実装すると、動作が重くなるケースがあります。そのため、アニメーションの実装はtransitionプロパティとtransformプロパティを使うとよいでしょう。
＜そのほか＞
分かりやすくて使いやすい物を選んでいくつか紹介しましたが、他にも便利なプロパティがたくさんあります。
特にレイアウト関連のプロパティはこれまで苦労していたデザインを容易に再現できるものもあり、おすすめです。
オマケ：ちょっと気になるものたち
◆ Web Fonts
はてブなどにもたまに登場するので知っている方もいると思いますが、Web Fontsを利用すればユーザーの環境に関わらず特定のフォントでプレーンテキストを描画する事ができます。
一見するととても便利そうに思えますが、現時点での採用は慎重に行ったほうがよさそうです。
Web上にフォントをアップロードする必要があるため、まずライセンスを確認する必要がありますし、スマートフォンサイトで使うのならファイルサイズも気になります。特に日本語フォントは必要なフォントのみをサブセット化することも考慮したほうが良いでしょう。PCサイトでも使う場合は、各ブラウザ用のフォントを用意する必要もあります。
採用する際は、このような手間や読み込み時間の増加とユーザーに与える効果が釣りあうかを考える必要があるでしょう。
＜採用する際は＞
フリーの日本語フォントに関しては、WebFonts として利用できるフリーの和文フォント | ヨモツネットがいい感じにまとまっています。
◆ SVG
スマートフォンは機種によって画面のピクセル比率がまちまちで、画像を使う場合には複数の解像度の物を用意する場合があります。
複数の画像を用意する手間やそれを出し分けるCSSを書く手間を軽減するのに使えそうになのが、スケーラブルな画像ファイルであるSVGです。
しかし、現時点ではAndroidでSVGを表示することができないので、iPhone専用サイト以外では使うことができません。
■関連リンク
・エスマックス（S-MAX）
・エスマックス（S-MAX） smaxjp on Twitter
・【スマホ集中連載 第1回】 "スマホ時代は本格的に始まっている" ～スマートフォンの市場動向まとめとlivedoorのPV - livedoor ディレクターブログ
記事一覧
記事一覧
