DDOCSS

おはようこんにちはこんばんは。今日も元気にニコニコしてますか?
見るのは好きだけど作るのはきらいさWebデザイン。まめつぶです。

あーあ、突然ハイソサエティなWebデザインできねーかな。

魔法かなにかでCSSが作れたらいいのに。

限りなく魔法に近い科学があります。

DDOCSS = どこまでもどこまでもおいかけるよスタイルシートの略

DDOCSSをサポートしてくれる便利ツールが身近なところに転がっていたのです。

その名は「Chrome」の「デベロッパーツール」です。

ブラウザである「Chrome」にサイトの構成をトレースできる優れものツールがついてます。

ツール⇒デベロッパーツールで起動できます。

Chrome_DevTool

Chrome デベロッパーツール

中でも重宝している機能が画面左下部の虫メガネアイコンで、指定箇所の解析です。

Metrics欄にmargin,border,paddingなどの設定値もグラフィカルに表示されます。

しかもリアルタイムに編集結果をプレビューできます。
Webデザインにおいて、こんなに頼もしいサポートはないでしょう。

是非、お試しあれ。