『6ステップでマスターする 「最新標準」HTML+CSSデザイン』について

6ステップでマスターする 「最新標準」HTML+CSSデザイン

本書は、「モバイルデバイスの普及でコンテンツ重視のシンプルな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年1月15日までIE9をサポート。
OSの一般シェアはほとんどありません。
Windows Server 2012 2023年1月11日まで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では「フレキシブルボックスレイアウト」という形で標準の機能として用意され、設定1つで実現できるようになっています。

実際に原稿を書き始めてみると、従来は数ステップを必要とした複雑な設定が1ステップで完結してしまうため、改めて「すごいな」と感じると同時に、「ページが余ったらどうしよう」と不安がよぎったりもしました。結果的には「ページ数的にこのサンプルまでは厳しいかも…」と考えていたサンプルまで取り上げることができ、盛り沢山な1冊にできたのではないかと思います。

書籍に関する詳細はこちら