Web制作の「時短」に役立つChromeデベロッパーツールの活用法を紹介する本連載。第2回は、Webページの修正をリアルタイムで反映する「Elements」パネル、「Sources」パネルの使い方を説明します。 細かい修正の手戻りにもさくさく対応したい! コーディングが完了したあとで、「やっぱりフォントサイズを大きくして」「下の余白をもう少し小さくして」と、クライアントやディレクターから細かい修正を求められることはよくありますよね。さらに、修正後、「やっぱり元に戻してくれる?」「もっと小さくしてできる?」と手戻りが発生し、作業時間がどんどん伸びてしまうこともあります。 どんなに確認のステップを踏んでも、この手の手戻りは完全にゼロにはできないもの。そこで、Chromeデベロッパーツールを使って、リアルタイムでページをさくさく修正する方法を説明します。 Elementsパネルの起動方法 Goo
![CSSの修正が捗る「リアルタイムコーディング」とは](https://cdn-ak-scissors.b.st-hatena.com/image/square/1cd9e752f57fb43b492be8c05a1789dcf4ea0ecd/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F1999%2F03%2F26%2F746498%2Fl%2F9b21c023bf2af008.jpg)