CSSをリアルタイムに確認しながらカスタマイズするのならChromeだけで十分だった件

ブログやHTMLサイトをカスタマイズするためには、ある程度CSSの知識が必要だったりするわけですが、初心者にとって大規模なカスタマイズは案外大変だったりしませんか？

私もHTMLやCSSに関して知ろうとなワケで、ちょっとしたカスタマイズだったらいいんだけど、大規模なサイトイメージチェンジの時なんかは結構大変なの・・・

　　　　　　　　　　　　＿＿＿＿　　　＿＿＿＿_　　　　　　みんな大丈夫かお？
　　　　　　　　　　　／　　　　　＼／　　　　　＼　　　　　　 ‐-､
　　　　　､-‐ 　　／⌒　　 ⌒　　　　　　　⌒　　 ⌒＼　　　__＿,ノ-､
　　　､- !､,＿_／（● ）　（● ）　彡　　（ ●）　（ ●）ヽ　　　 __＿,ノ
　　　!､,＿__　l　　（__人__）　　　　　　　　　（__人__）　　|
　　　　　　　　＼　｀⌒ ´　　　　　彡　　　　　 ⌒´ 　／
　　　　　　　　　/　　　　　　　　　　　　　　　　　ヽ

例えば私の場合Wordpressを利用してブログを運営しているんだけど、大規模カスタマイズが必要な時には「CSSをちょっといじる」⇒「スタイルシートを更新する」⇒「ブラウザをリロードしてチェックする」の繰り返し・・・

またいじった部分の整合性が取れてないと、こちらを直せばあちらが崩れるって感じで面倒だったりするの。

そこで便利なのが、CSSやHTMLをリアルタイムにプレビューしながらカスタマイズできるサービスやツールです。

有名なところではCSSDeskとかEmmet LiveStyleなどがありますけど、私の場合ブラウザのGoogle Chromeだけで十分だったって話です。

　　　　　　　　　　　　／）
　　　　　　　　　　　／／／）
　　　　　　　　　／,.=ﾞ””／
　　　／　　　　 i f　,.r='”-‐’つ＿＿＿_　　　　　Chromeで十分だおｗｗｗ
　　/　　　　　 /　　　_,.-‐’~／⌒　　⌒＼
　　　　／　　,i　　　,二ﾆ⊃（＞）.　（＜）＼
　　　/　　　ﾉ　　　 ilﾞフ::::::⌒（__人__）⌒::::: ＼
　　　　　　,ｲ｢ﾄ､　　,!,!|　　　　　|r┬-|　　　　　|
　　　　　/　iﾄヾヽ_/ｨ”＼　　　 `ー’´ 　　／

Chromeでのカスタマイズだったら手軽だし、ビジュアル的にもとてもわかりやすいので、オススメですよ。

Google ChromeでCSSをカスタマイズする方法

やり方は簡単♪

ブラウザGoogle Chromeを持っていたら、自分がカスタマイズしたいURLを開いて【右クリック】で、【要素を検証】を選ぶだけ！！

簡単でしょ？

　　　　　　　　　　　　　 ∩＿
　　　　　　　　　　　　　　〈〈〈　ヽ簡単だおｗｗ
　　　　　　＿＿＿_　　　〈⊃　　}
　　　　／⌒　　⌒＼　　 |　　 |
　　　／（ ●）　（●）＼　 !　　 !
　／ :::::⌒（__人__）⌒:::::＼|　　 l
　 |　　　　　|r┬-| 　　　 | 　／
　＼　　　｀ー’´ 　　／／
　　/　＿＿　　　　　　　/
　　(＿＿＿）　　　　　　/

あれ？不親切すぎました？

それじゃ、もう少し詳しくカスタマイズ方法をご紹介しますね。

もう少し詳しく

それでは、ブラウザGoogle Chromeで自分のCSSをカスタマイズしたいURLを開いて【右クリック】⇒【要素を検証】を選んでみましょう。

下のような画面が表示されました？

この画面では、上側の窓には自分のサイトがプレビューされていて、下の窓にはHTMLとCSSが表示されていると思います。

この「要素を検証」の窓ではElementsのタブを開いて左側がHTMLソースが表示されているんだけど、ここで任意のHTMLタグをマウスオーバーすると、上の窓のプレビューで「そのタグがサイトのどこに対応するのか？」がビジュアル的に明示されて、クリックすると右側の窓に対応するCSSが記述されている位置が表示されます。

例えば、この例で「Blockquote」で囲まれた部分をマウスオーバーしてみます。

これで、自分がどこをカスタマイズしたいのかがスグに解りますね。

例えば、ページのどの場所のどの要素を変更したいのかスグに解らないときとかに便利だし、この例ではBlockquoteだからすぐにわかるかもしれないけど、DL・DT・DDのマージンを変更したいんだけど、その定義要素のマージンを変更すればいいのか解らない・・・なんて時にとても楽チン！！

どの要素をカスタマイズしたいのかが解ったら、その要素をクリックすると右側に関連するCSSが表示されます。

それでは、例の画像のBlockquoteのPaddingを右側の窓で書き換えてみます。

ね？

変わったでしょ？

　　　　　　　　　＿＿＿_
　　　　　　　／⌒　　⌒＼
　　　　　　／　（⌒）　（⌒）＼　　どこをイジればいいか
　　　　／　 ::⌒（__人__）⌒::: ＼　　スグにわかるおｗｗｗ
　　　　|　　　　　|::::::|　　　,—、
　　　　＼　　　 `ｰ’　　　しＥ　|
　　　　／　　　　　　　　　 l､Ｅﾉ
　　　／　　　　　　　　　　　｜　|
　　（　　丶- 、　　　　　　ヽ_／
　　　　`ー､＿ﾉ

後は「Sources」のタブで変更したCSSをコピーして自分のサイト・ブログのCSSを書き換えればOKです。

ちなみにこの「Sources」のタブは、そのままだと何も表示されていないので、キーボードで「Ctrl+O」を押下して任意のCSSファイルを呼び出します。