「Webサイト制作のワークショップ」のメモです。

ブラウザによってWebサイトの表示が変わるというのは、昔ほどではないが今でも存在する。理由はブラウザに使われているレンダリングエンジンがそれぞれ異なり、新しい技術への対応がそれぞれ異なるため。

enjoy!

ブラウザの種類とレンダリングエンジン

• Chrome｜Blink
• Safari｜WebKit
• Firefox｜Gecko
• Internet Explorer｜Trident
• Windows Edge（Windows 10）｜EdgeHTML

Windows Edge は他のブラウザと同じく、メジャーバージョン表記（IE9,IE10など）が廃止された。独自仕様ゴリ押しでWeb制作者を苦しめていた Microsoft は、近年では業界標準に沿うようになった。

最近のWebサイトは「HTML5+CSS+JavaScript」で制作されることが多い。ブラウザによる表示の違いというのは、HTML や CSS の解釈の仕方に少しづつ差があるために起こる。一例として、まずは基本となるコードを書いて、その後に各ブラウザで動作するようにベンダープレフィックスを使って記述していく。

Windowsと対応ブラウザのバージョン

• Windows XP｜IE 6, 7, 8
• Windows Vista｜IE 7, 8, 9
• Windows 7｜IE 8, 9, 10, 11
• Windows 8｜IE 10
• Windows 8.1｜IE 11
• Windows 10｜IE 11, Edge

対応するべきターゲットブラウザとバージョン

IE10 以下がサポート終了しているため、対応するべきブラウザは以下のようになる。

• Chrome
• Safari
• Firefox
• Internet Explorer 11
• Edge

やはり問題になるのは IE のバージョン。サポートが終了している IE10 以下のブラウザに対してどこまで対応するかはアクセスログなどから検討するべき。ただ、サポートが終了しているバージョンというのは、少なくとも仕事で使ってはいけないものであり、いかなる致命的なバグやセキュリティーホールがあってもそれを修正するアップデートが提供されないということ。そのため、ネットショップで古いバージョンのブラウザからのアクセスを推奨することには問題がある。

reset.css

ブラウザによって、デフォルトのテキストサイズやマージンの解釈などが異なる。各ブラウザの表示差異をなくすために、すべての表示をリセットするCSSを読み込む。

CSS Reset – YUI Library

シミュレーター/エミュレーター

実機が用意できない場合は、シミュレーターを使って表示テストを行う。

• iOS｜Xcode
• Android｜Android Studio
• Windows｜VirtualBox

Safariの開発メニューを表示する

Safari の「環境設定 > 詳細タブ > メニューバーに”開発”メニューを表示」のチェックをオンにすると、メニューバーに「開発」が表示される。どのファイルの読み込みに何秒かかっているかを確認したり、ユーザエージェントを変更できるので、PCではアクセスできないスマホサイトを表示できる。

スマホのデフォルトブラウザ

• iOS｜Safari
• Android｜Chrome

スマホの向き

• 縦｜Vertical｜Portraitモード
• 横｜Horizontal｜Landscapeモード

iPad の Split View では、5:5 や 7:3 の表示ができる。

ブラウザの歴史

ウェブの進化