本書は、「モバイルデバイスの普及でコンテンツ重視のシンプルなWebページが求められるようになっている。HTML5のセマンティック・マークアップも浸透してきたし、CSS3のブラウザ対応も進んでいるし、Webページはもっと簡単に形にできる時代になっているのでは？」 と感じたところからスタートしています。
しかし、最新のHTML/CSSである「HTML5とCSS3」の機能をフルに活用しようとすると、古いブラウザの問題が出てきます。古いブラウザのサポートはいつまで続ければよいのでしょうか。いつまで一昔前のHTML/CSSだけでページを作り続けなければいけないのでしょうか。
そこで、古いブラウザとそれを使い続けているのはどのような環境なのかを確認してみました。
HTML5/CSS3の対応が十分な「最新ブラウザ」
HTML5/CSS3の対応が不十分な「古いブラウザ」
| 古いブラウザが動作するOS | OSのサポート期限＆OSと共にサポートされるブラウザ |
|---|---|
| Windows Vista | 2017年4月12日までIE9をサポート。 OSの一般シェアはほとんどありません。 |
| Windows Server 2008 | 2020年１月１5日までIE9をサポート。 OSの一般シェアはほとんどありません。 |
| Windows Server 2012 | 2023年１月１１日までIE10をサポート。 OSの一般シェアはほとんどありません。 |
| Windows 7 ～ 8.1 | 各OSのサポート期限までIE11をサポート。 IE10以下のサポートは打ち切られています。 |
| 古いブラウザが動作するOS | OSのサポート期限＆OSと共にサポートされるブラウザ |
|---|---|
| OS X Yosemite | 2015年9月以降は新しいOS X El Capitanへのアップデートにより、Safari 9.xを利用できます。OS Xでは新しいOSのリリースにより、古いOSへのアプデートの提供はほとんどなくなります。 |
| iOS 8.x | 2015年9月以降は新しいiOS 9へのアップデートにより、Safari 9.xを利用できます。iOSでは新しいOSのリリースにより、古いOSへのアプデートの提供はほとんどなくなります。 |
| Android 4.3 以前 | Googleによる標準ブラウザへのセキュリティパッチの提供は打ち切られており、Chromeなどの利用が推奨されています。また、Android 4.3にGoogleアプリを搭載してデバイスを販売する承認は2014年7月末で打ち切られたとされています。 |
このように古いブラウザを取り巻く環境は大きく変化しており、いつまでも古いブラウザに対応したページを作り続けることはセキュリティ的にも推奨されない状態になっています。また、古いブラウザでは最新のHTML/CSSは機能しませんが、最低限の閲覧性は確保されます。そこで、本書では古いブラウザに対する特別な設定は行わず、HTML5とCSS3の機能をフルに活用してページを作成していきます。
※古いブラウザでの表示を最新のブラウザに近付けることも可能です。設定方法については巻末で紹介しています。ただし、IE11の開発者モードではIE9/10の表示を正確に確認できませんので、古いブラウザが動作する古いOS環境を用意する必要があります。
HTML5＋CSS3の機能をフル活用するとWebページ制作がシンプルに
多様化するWebの要望に応えるため、最新のHTMLとCSSは一昔前よりも大幅に進化しています。
たとえば、段組みレイアウトの場合、一昔前は限られた機能を組み合わせ、複雑なテクニックで実現していましたが、最新のHTMLとCSSでは「フレキシブルボックスレイアウト」という形で標準の機能として用意され、設定１つで実現できるようになっています。
実際に原稿を書き始めてみると、従来は数ステップを必要とした複雑な設定が１ステップで完結してしまうため、改めて「すごいな」と感じると同時に、「ページが余ったらどうしよう」と不安がよぎったりもしました。結果的には「ページ数的にこのサンプルまでは厳しいかも…」と考えていたサンプルまで取り上げることができ、盛り沢山な１冊にできたのではないかと思います。