[ご案内] 記事詳細ページです。こちらからトップページへ戻れます。

【図解】今更ながらfirebugによるCSS調整のし易さについて。      

URL: http://tech.kimihiko.jp/article/18755744.html

このエントリーをはてなブックマークに追加
今更ながらfirebugによるCSS調整のし易さについて。

firebugはブラウザ上で簡単にソースの変更&プレビューを
行える大変便利なツールです。

その便利さは実際にやってみたほうが分かりやすいので
これから実際にやってみます。

今回はCSSによる見栄えの調整をする作業、ということを前提に
私のサイトを例にご説明します。

00
上記ページの 太陽マーク(画像)の部分はCSSの設定によって表示されています。
これを、月マーク(画像)に変更したいと思います。
※月マークの画像は予め用意されているものとします。

作業を始める前にfirebugを起動しておいてください。
http://tech.kimihiko.jp/article/6706486.html
※今回の例ではF12で起動しています。
※firebugのインストールに関する話は割愛。

02
inspectボタンを押します。
※この例のfirebugは英語版です。日本語の場合は適宜読み替えてください。

03
ウインドウ上部、ブラウザプレビューの修正したい箇所のあたりにカーソルを持っていくと、
エレメント(タグ)ごとに青い囲みが出現します。
同時に、ウインドウ下部左側では、htmlソースの該当箇所が
ハイライト(選択状態)で表示され、右側ではCSSソースの該当箇所が表示されますので
それらしき箇所(太陽マークの画像が設定されているであろう箇所)があるかどうか、
太陽マークの付近をカーソルをゆらゆら動かしながら確認してみます。

それらしき箇所が見つかったら、一度クリックしてください。
選択しているソースの箇所がハイライトのまま固定されます。

04
どうやら、h3タグにあるbackground設定が太陽マークの表示に使われているようです。
urlの部分にカーソルを持っていくと、写真のプレビュー表示もされました。
間違いありません。

05
ちなみに、斜線の入った設定は
無効化された設定という意味です。
これは、無駄なCSS記述であるかもしれません。

06
修正するには、修正したいソースの上にカーソルを持っていき、クリックします。
すると入力フォームのような表示になり、修正を入力できるようになります。

07
asa.gifとなっていた部分を、yoru.gifと変更しました。
すると、即座にイメージが変わりました。リロードの必要はありません。
これで月マークへの変更(プレビュー)ができました。



firebugを使って、ソースの修正プレビューには
いくつか方法がありますが、もう一点の方法を以下に書いておきます。



09
【1】今度は、ウインドウ左下のhtmlソース上にカーソルを持っていって、特定のタグ上でクリックください。
【2】ブラウザプレビュー上で該当箇所が明示されますのでそのまま、【3】editをクリックします。

11
選択していた部分のソースのみの表示となりますので、
好きなように変更してください。
今回はaタグのclassにt_redというプロパティを追加しました。
すると、即座に変更がブラウザビューに反映されました。
ここでもリロードの必要はありません。


終わりに。


ここまで一連で行った変更は実際には変更後の状態は保存されていません。
冒頭にも申しましたが、あくまでプレビューです。
ですのでページのリロード等すると変更前の状態に戻ります。

firebugでは意図した修正ができることを確認して、
実際のファイルを修正します。

通常、見栄えの調整などにには、ファイルとブラウザのウインドウ切り替えや
変更後の確認のためのページの再読み込みを何度もする必要がありますが、
firebugを使うと、これらの手間が省けます。

この例は、大変単純な例でしたが、
使いはじめると手放せなくなる大変便利なツールですので
ぜひ使い方を覚えてみてくださいね。^^
コメントしましょう!
名前 ※ご自由に

メールアドレス ※ご自由に

ホームページ ※ご自由に

コメント ※必ず

  • コメントスパムが大変多くなっており、コメントの投稿に関して制限を設けております。
  • コメントの投稿が完了できない場合、お手数ですが以下をご確認ください。
  • ・半角英数のみのコメントはできません。
  • ・コメントにURLを含めることはできません。
  • ・設定された禁止ワードにひっかかる場合はコメントできません。(禁止ワード非公開)
  • ・javascriptを有効にしないとコメントできません。(スパム対策に利用しているため。)
  • どうしてもコメントができない場合にはお手数ですがお問い合わせまでご連絡ください。
  • 状況を確認しご返信差し上げますので必ず連絡先をご記入ください。
  • 以下は、いただいたコメントに関するご案内です。
  • ・コメントは承認後に表示されます。すぐには表示されません。
  • ・明らかな広告コメントなど、迷惑なものと判断した場合、掲載前にコメントを削除いたします。(偽造ブランド販売、FX、情報商材の方は特にご遠慮ください。
  • ※トラックバックは受け付けておりません。
 
2017年10月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        
月別記事
お問い合わせ
Powered by さくらのブログ