Chromeの開発モード

• Chromeの開発モードとは
• Chromeの開発モードの起動方法
• Chromeの開発モードの使い方
• 関連リンク

Chromeの開発モードとは

Google Chromeにデフォルトで搭載されている開発者向けの検証ツールです。

HTMLやCSSなどからレイアウト崩れの原因の特定や、ページ改修前後の検証など、様々な面で活用ができます。

Chromeの開発モードの起動方法

Macの場合

1. Google Chromeのメニューから起動
   Google Chromeのメニューの「表示」→「開発/管理」→「デベロッパーツール」を選択して起動します。
2. 画面上右クリックで起動
   画面上で右クリックを行い「検証」を選択して起動します。
3. ショートコードで起動
   Command⌘ + Option⌥ + I

Chromeの開発モードの使い方

Webデザイナーがよく使う開発モードの機能についてご紹介します。

1. 要素
   「要素」タブは、現在のウェブページのHTML構造とそれに適用されているCSSスタイルを確認し、編集することができ、Webページの見た目や動作を即座に変更してテストできます。
2. スタイル
   「スタイル」タブは、選択したHTML要素に適用されているCSSスタイルを検査、編集、デバッグするためのツールで、このタブを利用することで、Webページのデザインをリアルタイムで調整し、スタイルに関する問題を効率的に解決できます。
3. 計算済み
   「計算済み」タブは、選択した要素に対して最終的に適用されたCSSプロパティとその値を表示します。特にボックスモデルの視覚的な表示も提供されているので、要素のサイズや位置の理解が容易になります。
4. デバイスのツールバーを切り替え
   「デバイスのツールバー」機能は、レスポンシブデザインの確認やデバッグに不可欠なツールで、異なるデバイスや画面サイズでWebページの見た目や動作を簡単にテストできます。任意のサイズを入力するか、登録されたデバイスの名称をクリックして選択すると、そのデバイスサイズでデザインを確認できます。

以上が、「Chromeの開発モード」についての説明でした。

次回の「サイトの公開」ではサイトの公開に必要な知識について学んでいきます。 引き続き、別のステップも進めていきましょう。

関連リンク

• Chrome DevTools  |  Chrome for Developers