Webサイト制作の手法は変化する

HTMLとCSSでWebサイトを制作するときに、いつまでも同じやり方が通用するわけではありません。サイト設計・制作の手法には、時流に即した変化があることを理解し、その動向を追っておきましょう。

サイト設計・制作の手法は、W3Cが策定するHTML要素や、CSSプロパティの仕様に影響を受けます。最新の仕様を実装したブラウザでは、新たな表現を取り入れたWebサイトを表示させることが可能になったり、逆に古い仕様でマークアップされたサイトの表示が崩れたりします。また、策定された仕様は、ユーザーによるWebの使われ方の変化などのフィードバックを受け、さらなる変更が加えられていくことになります。

昨年11月1日に、HTML 5はHTML 5.1へとマイナーチェンジしました。現在のHTMLは、Webアプリ開発に対応することを目的のひとつとしています。今回のマイナーチェンジでも、 その目的意識はHTML 5とHTML 5.1の仕様の違いに表れています。興味のある方は、HTML5とHTML 5.1の差分を以下のURLで確認できるので、アクセスしてみてください。

HTML 5.1: Changes

https://www.w3.org/TR/2016/REC-html51-20161101/changes.html

HTML 5.1の新機能「picture」要素

HTML 5.1で追加された新機能のひとつにpicture要素があります。picture要素は、レスポンシブに対応するための要素です。

例えば、サイト内にある写真を表示したいときに、PCではPCの画面用に最適化した画像ファイルAを表示し、スマートフォンではスマートフォンの画面用に最適化した画像ファイルBを表示する、ということが可能になります。

現在では、デバイスによって画面サイズや、画面のピクセル密度が多種多様ですが、それら環境に応じたきめ細かな表示切り替えが可能となります。

ただし、残念ながらInternet Explorer 11（以下、IE 11）はこのpicture要素に対応していません。本稿執筆時点で、IE 11の国内でのブラウザシェアは16%前後です。幅広いユーザーを対象とするWebサイトでは、積極的に導入できる手法とは言い難いです。しばらくの間、様子見が続くでしょう。

利用が加速するフレックスボックス

フレックスボックスはCSS3モジュールのひとつで、CSSの新しいレイアウト機能を実現します。「⁠新しい」とは言いつつ、実際には2009年に最初の草案が公開されています。現在まで、何度も仕様が変化していますが、先ほど紹介したpicture要素とは異なり、IE 11にも対応しています。ほとんどのブラウザで問題なく使用できる状況にあり、すでに導入を経験している人も多いでしょう。

フレックスボックスの基本レイアウトは、複数のボックスを横方向、または縦方向に並べるものです。この手法ではボックスの並びをかなり柔軟に変更することができ、複雑なレイアウトもシンプルなマークアップで実装することができます。レスポンシブデザインにも親和性が高いと言えます。

一部のブラウザでは多くのバグも存在しており、実装にあたって注意は必要ですが、今後ますます利用が進んでいくでしょう。

新刊の「HTML5&CSS3デザインレシピ集」では、よく使用される制作手法を数多く収録、解説していますので、制作時の参考になさってください。