カテゴリ:   CSS/Jquery
タグ:


どうもぼくです。

CSSって触り始めると大変面白いよね。

でもCSS触ってて

・どこの数値を変えれば思ったように動くのかわからない
・変えてみたけど思うようにいかない

そんな悩みを一発で解決するChromeの裏ワザを教えてあげよう

とりあえず基本的な部分だけ。

■要素を調べる


ひかりちゃんみたく、たとえば「ブログの余白をどうにかしたい」って時

1)まずはどうなってんのか調べたい余白あたりにマウスカーソル持ってく
イメージ1286


この画像の場合は、赤い高さの部分を調べたいので、その辺りにマウスを持って行って



2)右クリックして 要素を検証
イメージ1287




これだけ!簡単やね!!!


次から詳しいみかたを。


■要素の検証のみかた
開くとこんな感じになるはず。
db482a4d


この要素の検証って何かっていうと、ざっくり言うと
WebページのHtmlやらCSSを表示してくれるっていうもので
「右クリック押したタイミングの要素」に最初からフォーカスしてくれるっていう優れもの。

青い部分が右クリックした要素の本体、緑がpadding、もしmarginがあればオレンジで表示。

この画像の場合はオレンジなしの緑が上に入っているので、paddingが入っているってことがわかります。


まぁこの段階で「わかりました、緑なのでpadding変えればいいんですね」ってってわけなんだけど…


じゃあ何pxに指定すんのがええんか。


っていうのをもう少し見ていく


で、この下の部分に注目
イメージ1288



カーソルが当たってる部分、この場合<div id="main-stripe">っつーのが問題の範囲ってことね。

で、この右側にごちゃごちゃ書いてあるのが
イメージ1288

その<div id="main-stripe">の中身

padding:30px 0;ってなってるのがわかるかと思います。

※黄色のびっくりマークは「CSSの記述間違ってるで」っていう警告で、これがついているものは反映されていないってわけです。

Chromeのこの要素の検証ツール、通称デバッグ機能を使うと、

この要素をリアルタイムにいじくりならプレビューができるっていう素晴らしい機能がついているので


padding:0 0;にしてみる
イメージ1292
縮んだのがわかるかと思います


padding:100px 0;にしてみる
イメージ1293
ひろくなったね



こんな感じで数値調整が凄くやりやすくなります。

もちろんここでいくら数値をいじっても本番に反映されるわけではないので、

これはあくまでも調べてプレビューできるだけ、なので、後でちゃんとブログの管理画面からCSSは書き換えておくのよ




もちろん要素の横幅とかも自由にいじれるので、

さっきの<div id="main-stripe">のwidth:100%;を50%にしてみると
イメージ1291



こんな感じでプレビューできるってわけ


すごい!



firefoxだとfirebugっていうので似たようなのできるよ。


ライブドアブログの場合は管理画面から触れないCSSも存在するので、その場合は強引に書き換えていくことになるんだけど、それはまた次の機会に

 

Comment & Trackbacks

コメント
コメントフォーム
評価する
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット

関連記事

新着一覧