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

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

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

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

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

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

  • iOS|Safari
  • Android|Chrome

スマホの向き

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

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

ブラウザの歴史

ウェブの進化

こちらの関連記事もあわせてどうぞ!

    WS|Webサイト制作

    Webサイト制作のワークショップを各所で行いたいと思います 都内某所でWebサイト制作のワークショップをやっています。他にも各所で開催していきたいと思うので、ご興味のある方はよろしくお願いします。何…

    WS|Webサイトのテキスト

    「Webサイト制作のワークショップ」のメモです。 デバイスによって表示されるフォントは異なる。ゴシック系や明朝系という指定をするのが基本。ある程度デバイス共通フォントもでてきたが、ウエイトも含めると…

    WS|コーディング 2

    「Webサイト制作のワークショップ」のメモです。 サンプルデータを使ってスマホ対応(レスポンシブWebデザイン)を行う。スマホの仮想ウインドウサイズの横幅を取得して、CSSで表示を振り分ける。Web…

    WS|Macのおすすめアプリ

    「Webサイト制作のワークショップ」のメモです。 必要最低限のアプリだけを入れているので、そのほとんどがスタンダードなものです。Web制作に使える便利アプリをいくつか紹介します。 enjoy! おす…

    WS|マルチデバイスへの対応とモバイルファースト

    「Webサイト制作のワークショップ」のメモです。 あらゆるWebサイトへのアクセスが、PCよりもスマホからのアクセス数の方が多くなった。そういった背景にあわせてWebサイト制作の順番も素早く変えてい…