連載
» 2015年12月07日 16時00分 UPDATE

Chromeのツボ:意外と重要 ディスプレイに合わせてWebページを拡大/縮小する

[ITmedia]

 AppleがRetinaディスプレイを採用し始めてから、Windows PCでも目視で画素を認識できないほど高解像度・高画素密度のディスプレイが増えています。

 こうしたディスプレイでは、いわゆるdpiスケーリングの設定で150%や200%に拡大表示して使っているユーザーが多いことでしょう。あるいは、解像度を全て作業スペースに充てたいと、かなり細かい表示でも100%の等倍設定で頑張っているかもしれません。

スケーリングの設定 「Windows 10」のディスプレイ設定。ディスプレイの画素密度(表示の細かさ)に応じて、テキストやアプリの表示サイズを変更できるようになっています

 というわけで、特にWindows PCでは画面上に表示される文字やアイコンのサイズがユーザーによってバラバラに設定されていて、視認性重視でかなり大きなサイズで表示していたり、ギリギリ読めるような極端に小さいサイズで表示していたりするのが現状です。

 このようにユーザー環境によって見え方が違うと、Webブラウジングしていて、文字が大きすぎたり、逆に小さすぎて読めないといった問題も発生します。かといって、いちいちWindowsでdpiスケーリングの設定をやり直すのも面倒でしょう。

 そこで覚えておきたいのが、Webページを素早く拡大/縮小できるショートカットキーです。「Ctrl」(Macは「Command」)を押しながら「+」を押すと拡大表示、「−」を押すと縮小表示になります。+あるいは−を続けて押すことで、段階的に拡大/縮小が可能です。また、「Ctrl+0」のショートカットキーで100%等倍表示に戻せます。これらのショートカットキーはChromeに限らず、FirefoxやIE、Safariなど他のブラウザにも対応しています。

 ちなみに、ホイール付きマウスを使っていれば、「Ctrl」を押しながら、マウスのホイールを回すことでも拡大/縮小ができます。

ページ拡大 「Ctrl」(Macは「Command」)を押しながら「+」を押すと拡大表示になります
ページ縮小 「Ctrl」(Macは「Command」)を押しながら「−」を押すと縮小表示になります

 以上のショートカットキーは現在表示しているWebページのサイズを拡大/縮小する方法ですが、全てのWebページに対して拡大/縮小の設定を記録しておく手もあります。

 ブラウザウィンドウ右上にあるChromeメニューの「≡」をクリックし、「設定」の下にある「詳細設定を表示…」を開きましょう。「ウェブコンテンツ」セクションの「ページのズーム」プルダウンメニューで拡大率(25〜500%)を設定すれば、以後は指定した拡大率でWebブラウズが可能となります。

 同様に「ウェブコンテンツ」セクションの「フォントサイズ」プルダウンメニューでフォントの表示サイズを変更することもできます。ただし、Webサイトによってはレイアウトが崩れたり、ブラウザ側でテキストサイズを変更できないよう設計されていることもあるので注意してください(Ver.46.0.2490.80 mで確認)。

tm_1412_Chrome-7_04.jpg 詳細設定メニューの「ウェブコンテンツ」セクションから「ページのズーム」と「フォントサイズ」の設定ができます

 こうしたWebブラウザの拡大/縮小設定を活用することで、高画素密度のディスプレイ環境にうまく対応したいものです。


バックナンバー

Copyright© 2016 ITmedia, Inc. All Rights Reserved.