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

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

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

ブログ

2016.01.19

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

271 views

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

 

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

スポンサーリンク

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

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

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

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

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

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

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

関連記事

プロフィール

・周藤 卓也(しゅうとう たくや)
1983年 福岡県生まれ。
150カ国と13万1214.54kmの自転車世界一周を達成。
次なる夢は福岡でゲストハウスの開業。
WEBライターとしてGIGAZINEで連載

⇢詳細なプロフィール

follow us in feedly