すべてのカテゴリ

ホームページ制作の編集によく使う「DevTools＝ディベロッパーツール」について紹介します。 ホームページのデザインを修正したり、表示崩れの原因を特定したりと「ディベロッパーツール」を使うとコードを見ながら視覚的に編集が出来る為、とても便利なツールです。 「ディベロッパーツール」とは、Microsoft EdgeやGoogle ChromeなどWebブラウザに標準搭載されている開発者用の検証ツールの事です。 今回は普段使用しているGoogle Chromeを例に主な使い方をご紹介します。Google chromeのディベロッパーツール基本操作【Windows編】 画面を開く方法は次の２つ 検証したいWebサイトをGoogle Chromeで開きます。 ①検証したい場所にカーソルをおいて右クリックをする。メニュー画面が開くので一番下の項目にある「検証」をクリックする。 ②ショートカットキーの「F12」するとブラウザの表示中のページと「ディベロッパーツール」のElementsパネルが画面表示されます。次に要素の選択する為、セレクトモードにします。Elementsパネルの左上部にあるセレクトアイコンをクリックします。アイコンが青色になっている状態がセレクトモードです。ブラウザ側を一度クリックし、ページ上でカーソルを動かしてみると、カーソルが合わさった要素に色が付き、Elementsパネル側のHTMLソースもハイライト表示されます。更に詳しく調べたいHTML要素をクリックして選択するとその要素とCSSが表示されます。 ElementsパネルでHTMLまたパネル内の「styles」でC