Web制作の「時短」に役立つChromeデベロッパーツールの活用法を紹介する本連載。第2回は、Webページの修正をリアルタイムで反映する「Elements」パネル、「Sources」パネルの使い方を説明します。
※本記事は執筆時点で最新のChrome 40を使用しています。
細かい修正の手戻りにもさくさく対応したい！
コーディングが完了したあとで、「やっぱりフォントサイズを大きくして」「下の余白をもう少し小さくして」と、クライアントやディレクターから細かい修正を求められることはよくありますよね。さらに、修正後、「やっぱり元に戻してくれる？」「もっと小さくしてできる？」と手戻りが発生し、作業時間がどんどん伸びてしまうこともあります。
どんなに確認のステップを踏んでも、この手の手戻りは完全にゼロにはできないもの。そこで、Chromeデベロッパーツールを使って、リアルタイムでページをさくさく修正する方法を説明します。
Elementsパネルの起動方法
Google Chromeを起動してChromeデベロッパーツールを開きます。Chromeデベロッパーツールは、MacではCmd + Option + Iキー、WindowsではCtrl + Shift + Iキーを押すか、ページ上で右クリックして「要素の検証」で起動できます。
ページの変更したい箇所を選択したまま、「要素の検証」を選ぶと、Chromeデベロッパーツールの「Elements」パネルで該当箇所がハイライトされ、適用されているスタイルシートが把握できます。また、「Elements」パネルの状態でルーペアイコンを選び、ページ上の要素をクリックすると、同様に該当箇所がハイライトされます。
Elementsパネルでリアルタイム修正
サンプルページを使って、ページを細かく修正する方法を説明します。次のサンプルページを開いて、Chromeデベロッパーツールを起動してください。
サンプルHTMLファイルです
このページに下記のような修正依頼があったと想定します。
- 著者・翻訳者を右寄せに
- パラグラフの行間を少し広げる
修正内容
実際にChromeデベロッパーツール上で編集してみましょう。
CSSプロパティを追加してリアルタイムで修正する
「著者と翻訳者を右寄せに」を修正します。著者・翻訳者を選択して右クリックメニューから「要素を検証」を選択します。
次の動画のように、「p.writer」と「p.translator」に「margin: 0;」 が指定されているのがわかります。
そこで、「p.writer」と「p.translator」に対して 「text-align: right; 」を設定しましょう。サイドバーで対象の要素（セレクター）をクリックすると、CSSプロパティを追加できます。
著者・翻訳者を右寄せに変更できました。
CSSプロパティを少しずつ修正する
「パラグラフの行間を少し広げる」は曖昧な指示なので、リアルタイムで少しずつ修正しながら調整します。
修正対象箇所を選択し、右クリックメニューから「要素の調整」を選択します。p要素のline-heightプロパティを修正すればいいとわかります。
数値でも指定できますが、プロパティ部分をアクティブにすると、カーソルキーの上下キーで1em単位の修正ができます。
これで、依頼があった2点の修正ができました。この方法で、実際の修正をクライアントやディレクター、デザイナーに確認をとりながら進めると、手戻りを抑えられます。
CSSプロパティだけでなく、次の動画のようにHTMLの文言も変更できます。
修正したファイルを保存する
「Elements」パネルで編集した内容は、「Sources」パネルでファイルに保存できます。「Sources」パネルをクリックし、CSSファイルのパスを開きます。
修正内容
CSSファイルを読み込み、先ほど編集した「p.writer」と「p.translator」のセレクターを確認しましょう。次の画像のように変更が反映されています。
修正内容
変更を確認したら、右クリックメニューから「Save」（上書き保存）または「Save As…」（名前をつけて保存）を選び、CSSファイルを保存して修正完了です。ローカルへの保存なので、サーバ上のファイルを編集したときは、保存したファイルをアップロードします。
Chromeデベロッパーツールで変更した箇所を調べる
Chromeデベロッパーツールを利用してCSSファイルを編集した場合、Sourcesパネルから編集履歴を確認できます。右クリックメニューから「Local Modifications」を選択してください。
次の動画のような画面が現れます。確認したい履歴をクリックすればファイルの変更履歴を追えます。
紹介した機能まとめ
今回紹介した機能をまとめます。
Elementsパネル
開いているページのHTML／CSSの検証ができます。リアルタイムで更新されるため、JavaScriptでDOMを挿入・操作した場合でも、完了後の状態を確認できます。Chromeデベロッパーツールでもっとも利用する機会の多い機能です。
Sourcesパネル
ページで読み込んでいるCSSやJavaScriptファイルの編集・反映ができます。
◆
次回は、外部サイトのJavaScriptやCSSから、アニメーションやデザインの実装を調査する方法について説明します。
