HTML5/CSS3

よりセマンティックに、高度なデザインを多くのデバイスに

HTML5/CSS3に対応したブラウザの普及に伴い、よりシンプルでセマンティックなHTMLでリッチなデザインの再現とマルチデバイスへの対応が可能になりました。私たちは、これらの新たな技術にも積極的な取り組みと対応を行なっています。

HTML5について

2008年に草案が発表されたHTML5は、2104年10月28日に正式勧告されました。
HTML5における主要な改定の目的として、マルチメディアのサポートと並んで「人間にも読解可能で、さまざまなコンピュータやデバイスにも矛盾なく読解される」という点があります。

マルチメディア、マルチデバイスへの対応

マルチメディアのサポートにおいては、音声(audio要素)、動画(video要素)、グラフィック(canvas要素)が対応しているブラウザ環境であれば、プラグインを必要とせずに実装可能になりました。また、geolocationを利用した位置情報の取得や利用、Local Storageを利用したクライアントへのデータ保存も可能になり、よりウェブサイトの利便性や高度な表現がブラウザのみで実現可能になりました。これは、多くのデバイスや環境をカバーするためには大きな利点です。また、ブラウザでアプリに近い実装を行うことも可能になります。

文書構造の明確化

もう一点は要素の追加と属性(意味づけ、解釈)が変更されたことにより、より明確な文書構造でHTMLが記述できるという点です。
HTML5では文書構造をより明確に意味づけられる要素(タグ)が追加され、また、一部の要素の属性が見直されました。これによって今までは意味を持たない要素(<div>など)を使用していた部分に対して、その要素の持つ意味を構造的に割り当てられるようになりました。例えば、<header><footer><nav><article><aside><section>などの要素でマークアップされたパートは、それがウェブサイトおよびウェブページ内でどのような意味や役割があるのかということが、視覚的な「デザイン」だけでなく、文書構造的な解釈がしやすくなったといえます。

これは上述した「人間にも読解可能で、さまざまなコンピュータやデバイスにも矛盾なく読解される」ということで、正しい文書構造でマークアップを行うことによって、コンピュータにとってもウェブサイトの意味が分かりやすくなるということです。さらにMicrodataなどの周辺技術を併用して、タグそれぞれの固有の役割などをデザインだけでなく構造的に表すことが可能になりました。

これはつまり、検索エンジンのクローラー、ボットに対して、そのページの持つ情報をより正確に伝えることができるということにほかなりません。

ブラウザの実装も最新の環境ではかなり足並みがそろってきたため、特別な事情がない限りはHTML5を採用することの不利な点はないように思えます。

CSS3について

アニメーション、角丸、シャドー、グラデーションなど、今までは画像パーツやスクリプトを使用して表現していたものが、CSS3でかなりのレベルで表現可能で、リッチなデザインでもシンプルなマークアップで実現できるようになりました。

リッチなデザインを軽快に

今まで、画像パーツを切り刻んで作ったりスクリプトでDOMを操作したりして作っていた「角丸」やドロップシャドウ、要素の回転、影付きの文字などがCSSで記述できるようになりました。
また、かなり複雑なグラデーションも再現可能で、リッチなデザインをHTMLへの影響を最小限に表現することが可能となりました。

特にスマートフォンやタブレットなどで通信速度が限られている場合などは画像や長いスクリプトに依存しない分軽快に動作します。

PCのブラウザへの実装も現時点での最新の環境においてはかなり進んできましたが一部のプロパティはまだ足並みがそろっている状況ではありません。

プログレッシブエンハンスメントという考え方

レガシーなブラウザへの対応とか、あまりそこにこだわりすぎて新しい技術を採用しないというのはいかがなものかと思います。
レガシーな環境でもちゃんと閲覧ができて、対応しているブラウザではさらに美しいデザインで閲覧できる。というのが主流になるべきなのではないかと思います。