このページの本文へ

PROGRAMMING Web制作が3倍速くなるChromeデベロッパーツールの使い方 ― 第2回

CSSの修正が捗る「リアルタイムコーディング」とは

2015年05月11日 11時00分更新

手塚 亮/nanapi

  • この記事をはてなブックマークに追加
本文印刷

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から、アニメーションやデザインの実装を調査する方法について説明します。

著者:手塚 亮

著者写真

2009年4月 ITベンチャーに入社。Webデザインをメインにフロントエンド・バックエンドの開発を経験。後にベトナムに駐在し、海外エンジニアの技術力とコストの安さを知り、自身のキャリアに危機感を覚え、2013年10月よりnanapiに転職。nanapiの開発やIGNITIONの立ち上げに携わる。現在は、Android開発に従事。 プライベートでは「InTHEnet」というチームを組み、Webサービスなどの制作を行う。直近では、「ハミガコ!」というアプリのプロトタイプで、Yahoo!プロトタイプコンテストで準グランプリ・UI賞を受賞をしている。

Web Professionalトップへ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング