ホームページをカスタマイズする

ホームページ制作の編集によく使う「DevTools＝ディベロッパーツール」について紹介します。

ホームページのデザインを修正したり、表示崩れの原因を特定したりと「ディベロッパーツール」を使うとコードを見ながら視覚的に編集が出来る為、とても便利なツールです。

「ディベロッパーツール」とは、Microsoft EdgeやGoogle ChromeなどWebブラウザに標準搭載されている開発者用の検証ツールの事です。

今回は普段使用しているGoogle Chromeを例に主な使い方をご紹介します。

Google chromeのディベロッパーツール基本操作【Windows編】

画面を開く方法は次の２つ

検証したいWebサイトをGoogle Chromeで開きます。

①検証したい場所にカーソルをおいて右クリックをする。メニュー画面が開くので一番下の項目にある「検証」をクリックする。

②ショートカットキーの「F12」

すると

ブラウザの表示中のページと「ディベロッパーツール」のElementsパネルが画面表示されます。

次に要素の選択する為、セレクトモードにします。Elementsパネルの左上部にあるセレクトアイコンをクリックします。アイコンが青色になっている状態がセレクトモードです。ブラウザ側を一度クリックし、ページ上でカーソルを動かしてみると、カーソルが合わさった要素に色が付き、Elementsパネル側のHTMLソースもハイライト表示されます。更に詳しく調べたいHTML要素をクリックして選択するとその要素とCSSが表示されます。

ElementsパネルでHTMLまたパネル内の「styles」でCSSの仮編集を行う事が可能です。仮編集した内容はブラウザ側ページにリアルタイムで反映されます。

ディベロッパーツールの表示位置の変更するには

ディベロッパーツールの右上にある３点のアイコン［⁝］をクリックします。下に表示される表示位置の変更アイコンで表示したい位置のクリックします。表示位置は画面の左側・右側・画面下側・別ウインドウ表示の4つです。自分の作業しやすい位置に変更できます。

stylesパネルで、CSSを編集するには

⇩

適用されているCSSプロパティを無効化したい場合は、プロパティ名の右側のチェックを外します。プロパティと値に打消し線が付き、CSSプロパティが無効になります。

又、新しいプロパティを追加したい場合は、セレクタ内のプロパティの一番下あたりの空白スペースを１回クリックします。新しいCSSプロパティの入力欄が追加されます。プロパティ名を入力したら、Enterキーを押します。値に入力欄にカーソルが移動しますので、値を追加し再度、Enterキーを押します。

新しいCSSセレクタを追加するには

HTMLタグを選択した状態で、stylesパネルの右上にある「＋」アイコンをクリックします。任意のプロパティと値を設定します。

stylesパネルの「＋」アイコンから新しく追加されたCSSソースは、「inspector-stylesheet」に追加されます。「inspector-stylesheet」とは、ディベロッパーツールが仮に作ったCSSファイルです。このようにディベロッパーツールで新しいCSSスタイルを作成して、修正又は更新したい場合はstylesパネルのCSSまたは、「inspector-stylesheet」の中身をコピーして、実際のCSSファイルにペーストして追記することで反映されます。

・WordPressの場合は、管理画面⇒カスタマイズ⇒追加CSSの画面

・JIMDOの場合は、管理メニュー⇒基本設定⇒ヘッダー編集画面

それぞれの編集画面にコピーすることで反映させることが出来ます。

その他にも、たくさんの機能がありますが、今回はホームページ制作にあたって使う機能の一部を抜粋してご紹介しました。

【Chromの他の拡張機能についてはこちら】

Web制作に使えるChromeの拡張機能

---

最後までご覧いただきありがとうございます。ホームページ制作の参考になれば幸いです。