|    | 01  02  03  04  05  06  07  08  09  |

Web ブラウザによる表示の違い

Web ブラウザによる表示確認が何故必要か?

Web ページを作成する際には、Web ブラウザによる表示の違いを考慮する必要があります。

ユーザーが使用する Web ブラウザの種類やバージョンを想定し、表示確認を行います。

あらかじめ複数の Web ブラウザで表示確認を行えば、レイアウトがくずれるなどのリスクを最小限にとどめることができます。

さまざまなブラウザが存在しますが、少なくともシェアの高い [Internet Explorer]、[FireFox]、[Chrome] にて表示確認を行うようにしましょう。

IEアイコンFireFoxアイコンGoogle Chrome アイコン

また、同じブラウザでも、文字のサイズを変えたり、拡大縮小して表示確認を行いましょう。以下は、そのオプションです。

ページトップへ

Internet Explorer 8 / 9 の場合

文字のサイズを変更/拡大レベルを変更して表示を確認する

Internet Explorer の表示オプション文字サイズの変更には、Internet Explorer メニューの [表示] → [文字のサイズ] → [最大] ~ [最小] を選択して表示を確認します。

この方法では、文字のサイズが変更するだけです。

 

画像を含めて拡大/縮小するには次の方法をとります。

拡大レベルの変更ボタン拡大レベルの変更ボタンを押して100%、125%、150% に変えて表示を確認します。

なお、拡大レベルの変更は、[Ctrl] + [+] キーおよび、[Ctrl] + [-] キーにても行えます。

Web ページで指定されている色や、フォントスタイル、フォrントサイズを使わないで表示を確認する。

ユーザー補助ダイアログInternet Explorer の [ツール] → [インターネットオプション] → [全般] タブの [ユーザー補助] をクリック → [ユーザー補助] のダイアログが表示されます。

[Webページで指定されたフォント スタイルを使用しない]、 [Webページで指定されたフォント サイズを使用しない] にチェックを入れ、[OK] をクリックして、表示を確認します。

スタイルシート等で文字の大きさを相対値で指定せずに絶対値で指定している場合はこの方法にて表示文字の大きさを変えることができます。

 

[Webページで指定された色を使用しない] は、自分の見やすい色に変更する時に使われる方法ですので、これも確かめておきましょう。

IEの色を変更する方法色を変更するもう一つの方法です。

インターネットエクスプローラーの [ツール] ボタン、 [インターネット オプション] の順にクリックします。

[全般] タブをクリックし、次のいずれかまたは両方の操作を行います。

色を変更するには、[色] をクリックし、[ Windows の色を使用する] チェック ボックスをオフにします。

各カラー ボックスをクリックして変更先の色をクリックし、[OK] をクリックします。

色の選択が完了したら、[OK] をクリックします。

[OK] をクリックして、インターネットオプション画面を閉じます。

ウインドウサイズを変更して表示確認する。

ウインドウサイズを変更して表示の確認をします。

ウインドウを小さく ~ 最大 ~ 全画面表示 (F11) に変えて表示を確認します。

ページトップへ

FireFox 3.16.3 / 8.0 の場合

ズームして表示を確認する

FireFox ズーム設定FireFoxのメニュー [表示] → [ズーム] → [拡大] ~ [縮小] で変化させながら表示を確認します。

[Ctrl] キー + [+] キーとで拡大、[Ctrl] キー + [-] キーで縮小します。

文字と画像の両方のサイズが変更します。

スタイルシート等で文字の大きさを相対値で指定せずに絶対値で指定している場合でも、FireFox は上の方法にて文字サイズを変更できます。

 

[文字サイズだけ変更] にチェックを入れると、画像の方は変更しません。

色を変更して表示してみます。

Fxの色の設定オプション

① Firefox ウィンドウ上部メニューバー上の [ツール] メニューをクリックし、[オプション] を選択します。

② [コンテンツ] パネルを選択します。

③ [配色設定] ボタンをクリックしてください。

④ [Web ページが指定した配色カラー を優先する] のチェックを外してください。

⑤ [OK] をクリックします。

⑥ [OK] をクリックしてオプション設定 ウインドウを閉じてください。

ページトップへ

Google Chrome 15.0.874.121 の場合

Chromeの拡大/縮小オプションChrome 画面右上隅にある [設定ツール] レンチアイコンChromeのレンチアイコン → [拡大/縮小] あるいは全画面表示のボタンChromeの全画面表示ボタンで変更して表示を確認します。

[Ctrl] キー + [+] キーとで拡大、[Ctrl] キー + [-] キーで縮小します。

文字のサイズと画像のサイズが変化します。

Google Chrome のフォントと言語を設定し、母国語でウェブを閲覧し、ブラウザを使用することができます。

設定を変更する手順です:

① ブラウザのツールバーのレンチ アイコン をクリックします。

② [オプション] をクリックします。

③ [高度な設定] タブをクリックします。

④ [ウェブ コンテンツ] セクションで設定を変更できます。

ページトップへ

|    | 01  02  03  04  05  06  07  08  09  |