So-net無料ブログ作成
ブログトップ ブログ全体 ヘッダー サイドバー 記事本文 フッター リファレンス Gazon Weblog

CSSのデバッグ方法 [基礎編]

デバッグとは
デバッグ(debug)とは、バグ(プログラムの不具合など)がないか確認する作業を言います。

CSSの編集においては、一気に何ヶ所も編集してしまわず、一つずつ確認しながら編集作業を進めて行くのが成功の近道。この章では確認の際に見つけた不具合の修正以外にも、こんなときお役立てください。

  • 変更したい箇所があるのに、スタイルシートのどこを変更すればいいかわからない。
  • 変更したが、思うように変更されない。

尚、ソネブロのスタイルシート編集画面には三つのボタンがあります。
これを上手く使うのがデバッグのコツとなります。



【 保存 】
編集したスタイルシートを保存します。保存しなくても[プレビュー]ボタンでだいたいの確認が取れてしまうため、保存するのを忘れないように。確認してOKだった場合、その都度[保存]ボタンを押すことをオススメします。

【 初期値に戻す 】
うっかり押してしまいそうな位置にあるのが気になりますが、[初期値に戻す]ボタンは恐ろしいボタンです。せっかく保存した内容をすべて編集する前の状態に戻してしまうので、気をつけてください。最初の状態に戻したいときは、スキンを選び直すところから始めることをオススメします。
もしうっかり押してしまった場合は、焦らず「初期値に戻します」という警告ダイアログ(小さなウィンドウ)にて「キャンセル」を押しましょう。

【 プレビュー 】
ご自身のブログのトップページが表示され、編集したスタイルシートがどのように反映されたか確認できます。編集内容が確定されるまで、編集中はこのボタンで確認することをオススメします。
尚、保存せずに他の画面に移動してしまったりすると編集内容がパーになってしまうので、定期的に[保存]ボタンを押しましょう。逆に、どこをいじっても上手くいかない場合は、保存せずに他の画面に移動してしまえば、保存前の状態に戻ることが出来ます。

デバッグの方法
デバッグをするのに有効な手段として、

 - テキストエディタ(メモ帳)を使う
 - 背景色を変える
 - 数値を大きく変える

が挙げられます。

【 テキストエディタ(メモ帳)を使う 】
ソネブロのスタイルシート編集画面では、小さい領域に長い文字列がずらりと並んで、とても見づらい状況です。さらには文字列の検索が出来ないため、変更箇所が見つけにくくなっています。

そこで、OS(WindowsやMac)に備わっているテキストエディタ(メモ帳)を起動し、スタイルシート編集画面で表示されている文字列をすべてコピーし、テキストエディタにペーストしてみましょう。ウィンドウの大きさは画面いっぱいに長く出来ますし、文字列の検索機能もついています。

例:テキストエディット


テキストエディタで変更箇所を見つけたら、ソネブロのスタイルシート編集画面の方で変更を行い、[プレビュー]ボタンで編集結果を確認します。もし思った通りの変更が出来なかったら、テキストエディタに書かれている方の値を書き込めば、また元の値に戻ります。

万が一、その日一日変更した結果が気に入らないときでも、その日の最初にテキストエディタにコピペしておけば、バックアップとしても機能しますよ。

【 背景色を変える 】
スタイルシートを見ただけでは、どこを変更したらどこが変わるのかよくわからないと思います。そういうときは、ここかな?と目星をつけ、試しにそのスタイルの背景色を変えてみましょう!このとき、微妙な色合いではなく、赤や黄色などの目立つ色を設定するのがコツです。

例:背景に色(黄色)を指定します。
background:#FFFF00;

尚、試しにスタイルを変更してみる場合は、前のスタイルは消さないようにしましょう。元に戻せなくなっては困ります。
スタイルシートは後に登場した方のスタイルが有効ですので、今まであったスタイルはそのままにして、その下に新しく記述します。

例:
background:#333333;
background:#FFFF00; ← こちらが有効

表示例:「クリアグレー」スキンのarchive-titleの背景色を黄色にする


背景に画像がついている場合は、背景に色をつけてもその背景色が表面に見えないことがあります。全く見えないときは、領域いっぱいいっぱいに画像が貼り付けられている証拠。そのときは背景画像を外してみましょう。

例:
background:#514539 url(aaa.jpg); ← 背景画像が貼り付けられている
background:#FFFF00; ← 色だけを設定

表示例:「クリアグレー」スキンのbannerの背景色を赤色にする。(背景画像を外さない場合と外した場合)


試しに変更した追加行は、用が済んだら忘れずに消してくださいね。

【 数値を大きく変える 】
幅を決める[width]、高さを決める[height]や、間隔を示す[margin]、[padding]を設定するとき、もともと設定されている値を大きく変更することはあまりなく、たいていは微調整になるかと思います。すると、例えば5px程度値を変更したところで変わったかどうか見た目であまりよくわからないこともあります。そんなときは、思い切って30〜50pxくらい大きくしてみましょう!

表示例:「クリアグレー」スキンのsidebar-titleのマージン(上)を5pxに設定する。


例:marginを30pxにする。
margin:5px;
margin:30px; ← こちらが有効

表示例:「クリアグレー」スキンのsidebar-titleのマージン(上)を30pxに設定する。


貼り付けた画像が途中で切れてしまっている場合は、表示領域の幅(もしくは高さ)が画像の大きさに対して足りない(小さい)可能性があります。その場合は幅(もしくは高さ)を変更してみると全部表示されるかもしれません。値を大きく変更してみて画像がすべて表示されたら、その後は微調整し、ちょうどよい大きさを設定してください。

以上。


nice!(2)  コメント(2) 
共通テーマ:ペット

nice! 2

コメント 2

GOMIMA

わたしできる???かなぁ~???
新ブログで・・・挑戦するのも良いかな(・・?
練習用として。。。

by GOMIMA (2008-06-19 11:41) 

かほりん

* GOMIMAさん *

以前のスキン編集よりは簡単にできると思いますよ〜♪
前のはあれもこれもと編集しないと思い通りにならなかったですからね。
今は既存のスキンからちょこっと変えるだけでそれっぽく出来上がるので、ラクになりました。(^^)b
編集中のスキンは誰にも見られずに出来るから、練習してみるのっていいと思いますよ。
楽しくてハマる人もいるくらいですから。(笑)
by かほりん (2008-06-19 12:16) 

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。