サイトデザインの調整にはChromeの「検証」という機能が便利 – 自転車世界一周チャリダーマン

自転車世界一周チャリダーマン

150ヶ国 131,214km 自転車世界一周
「チャリダーマン」周藤卓也Webサイト

ブログ

2016.01.19

カテゴリ : ウェブサービス

159 views

サイトデザインの調整にはChromeの「検証」という機能が便利

マウスを右クリックして、メニューを表示させ「検証」をクリック。

スポンサーリンク

すると、htmlコードを表示される。

Divの要素も、実サイトのどこになるのか一目瞭然。

CSSの記述を変更したら、実サイトにも反映される。背景を赤色にしてみる。ただ、これは仮想的なもので、実際のCSSが書き換えられる訳ではない。Chrome上で試行錯誤しながら、実際のCSSを書き換えていくと良さそう。

これまでは、CSSを書き換えてはサイトを読み込んで、サイトのデザインを調整していた。

ASCII.jp:CSSの修正が捗る「リアルタイムコーディング」とは|Web制作が3倍速くなるChromeデベロッパーツールの使い方

このあたりが参考になりそう。

htmlもCSSも詰め込むだけ詰め込んでいるので、もうちょっと理解して綺麗に整えたいとは思っている。

関連記事

自転車世界一周チャリダーマンのおすすめ一覧-Amazonインスタントストア

SHARE