デベロッパーツールで文字サイズを拡大する方法を紹介!

デベロッパーツールの文字サイズを大きくする方法を解説します。ブラウザの文字サイズの拡大とデベロッパーツールの文字サイズの拡大はやり方が異なります。手順を解説します。

コンテンツ [表示]

  1. 1デベロッパーツールで文字サイズを拡大したい
  2. 2デベロッパーツールで文字サイズを拡大する方法
  3. 2.1Windowsの場合
  4. 2.2Macの場合

デベロッパーツールで文字サイズを拡大したい

例えば誰かに画面を共有する際に、デベロッパーツール上の小さなテキストを見せたいときなど、デベロッパーツール上の文字を拡大したいときがあります。

通常Chromeの拡大・縮小はChromeのメニューから行えますが、デベロッパーツールの文字サイズの拡大・縮小は違うやり方となります。

デベロッパーツール上の文字サイズを大きくした例
この記事ではデベロッパーツールの文字サイズを拡大・縮小する方法を解説していきます。

デベロッパーツールで文字サイズを拡大する方法

それではデベロッパーツールで文字サイズを拡大する方法を紹介していきます。
(ついでに縮小とリセットについてもあわせて紹介します)

まず「デベロッパーツールが立ち上がっていて、フォーカスがあたっている」というのが前提条件です。その上で下記のキーボードショートカットを実行しましょう。

Windowsの場合

WindowsのDevelopertoolの拡大・縮小のキーボードショートカット

  • 拡大: Ctrl + +
  • 縮小: Ctrl + -
  • リセット: Ctrl + 0

Macの場合

Macですが、利用されているキーボードや更にデベロッパーツールを別ウィンドウで開いているかどうかでもショートカットキーが異なります。

両パターンのショートカットキーを記載しますので、ぜひご自身の環境で試していただいて有効な方を利用するようにしましょう。

MacのDevelopertoolの拡大・縮小のキーボードショートカット

  • 拡大: Command + Shift + +  or  Command + ^
  • 縮小: Command + Shift + -  or  Command + -
  • リセット: Command + 0
GeekHive採用サイト