Chromebook で要素を調べる方法

ウェブサイトのコードをいじってみたい、あるいは厄介なレイアウトの問題を解決したいなら、Chromeの要素の検証ツールは必須と言えるでしょう。ウェブページを構成するHTML、CSS、JavaScriptの生のコードが表示されるので、目から鱗が落ちる思いです。さらに、一時的に微調整を加えて、何も壊さずに見た目を確認することもできます。まるでコードでお医者さんごっこをしているような感覚です。Chromebookでは簡単ですが、アクセス方法やショートカットの好みによって、最終的に使う方法が変わってくることもあります。

Chromebook で要素を検査する方法

ChromebookはChromeOS搭載のノートパソコンなので、Chromeブラウザのデベロッパーツールが組み込まれています。右クリックで操作できる場合もあれば、メニューやキーボードショートカットを使う場合もあります。どちらが速くて使いやすいか、お好みでどうぞ。ただし、Chromeのメニューオプションはアップデートによって異なるパスに隠れる場合がありますが、基本的な操作手順は同じです。

右クリックメニューを使用して検査する

これはおそらく最も簡単な方法です。マウスかタッチパッドさえあれば十分です。特別な操作は必要ありませんが、効果的です。メニューや設定を詳しく調べるのが面倒な場合は、以下の手順に従ってください。

• Chrome ブラウザを開き、覗き見したいウェブページに移動します。
• ページ上の任意の場所を右クリックします。他の場合に使用する通常の右クリックです。
• そのコンテキスト メニューから[検査]を選択します。すると、開発者ツールが開き、HTML と CSS が表示されます。

右クリックメニューの順序やオプションがウェブサイトやChromeのバージョンによって異なるのはちょっと奇妙ですが、「Inspect」はたいていそこにあります。設定によっては、「__Inspect Element__」または単に「__Inspect__」という名前になっていることもあります。

Chrome メニューの使用（開発者ツール オプション）

メニューを使う方が好きな方や、右クリックを使わない方法を探している方は、Chromeのメニューが便利です。メニューを隅々まで探して開発者向け機能にアクセスしたい方には、この方法が便利です。

• Chrome の右上隅にある3 つのドットのアイコンをクリックします。
• ドロップダウン メニューの [その他のツール]にマウスを移動します。
• サブメニューから開発者ツールを選択します。

こうすると、ウィンドウの横または下部にパネルが開き、ウェブページのソースコードが表示されます。この方法は少し遅くなる場合もありますが、誤って右クリックして他のオプションが起動してしまうのを防ぎたい場合は、よりクリーンな方法です。

キーボードショートカットを使用して素早くアクセスする

はい、これが一番早い方法です。ショートカットを覚えていれば。Chromebookなら、Ctrl + Shift + Iコンボキーを押すだけで、あっという間にデベロッパーツールが表示されます。メニューや右クリックを操作したりする必要はありません。

このショートカットは、多くの場合、そのまますぐに使えるので、しばらくするとデフォルト設定になります。メニューをあれこれ探すよりも速いと感じるからです。ただし、新しい設定やキーの割り当てを変更した場合は、ショートカットが多少異なる場合がありますのでご了承ください。ただし、一般的にはこれが標準です。

まとめ

Chromebookでは、これらの方法に慣れれば、要素の検査がかなり自然に感じられるでしょう。ちょっとしたデバッグをする場合でも、ウェブサイトの構造を理解しようとする場合でも、あるいは単にページのスタイルをいじる場合でも、Chromeのデベロッパーツールは頼りになります。右クリック方法は簡単で使いやすく、メニュー形式は少し堅苦しく、ショートカットはスピード抜群です。

---

---