ねこせつ~猫でも分かるPCソフト解説

パソコン初心者にも分かりやすい解説サイトを目指します。動画の保存方法からEvernoteなどのクラウドアプリやFreeMindなどのフリーツールまで

スポンサーサイト

画像はクリックすると拡大できます
リンクフリーです。記事への直リン歓迎。

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

この記事を共有しませんか?

よければご意見をお聞かせください。

ご訪問ありがとうございました!

これに関連する記事

あわせて読みたい
  1. --/--/--(--) --:--:--|
  2. スポンサー広告

CSSスタイルシートの調整が簡単になるFirefoxアドオン Firebug

画像はクリックすると拡大できます
リンクフリーです。記事への直リン歓迎。

前回のエントリー 「Firefox特徴まとめ」 からFirebugについて
HTML/CSSコーダーとしての立ち位置から解説いたします。
どうでもいいですがCoderって英語としてどうなんですかね?響きもあまりかっこよくないし。

Firebugおさらい

・JavaScript(DOMやAjaxも)のデバッグに必須(今回は触れません)
・HTMLの構造を視覚的に把握できる
・CSSスタイルシートの確認・調整テストができる
まず初めに。
デバッグを期待していた方はがっかりするかもしれませんが私はJavaScriptが苦手です。DOMもAjaxも。
なのでデバッグについては他サイトを参考にしてください。
下記サイトが参考になるかと思います。

0xFF
GoogleAPIを開発されてるそうです。Googleとか超エリート。

あとは書籍も参考にしてください。
ネットと書籍を上手に使うことが情報社会の波に上手く乗っていく解決策です。
【送料無料】JavaScript & Ajaxプロが教える“本当の使い方”


1.HTMLの構造を視覚的に把握できる。

猫説(ここ)のソースで申し訳ないんですが

Firebug起動

右下の虫さんのボタンを押すとFirebugの画面が開きます。

Firebugの画面左側で+ボタンを押すとタグが展開され、子階層が見れます。
<div>タグとか<form>タグとか<table>タグとか。
構造がぱっと見て分かるようになります。これ重要。


2.CSSスタイルシートの確認・調整ができる

これまた猫説のソースで申し訳ないんですが

FirebugでCSSを確認する

調べたい箇所のHTMLタグをクリックすれば、そこに対応したCSSが表示されます。
CSSファイルの何行目の記述か、何ていうCSSファイルなのかなども分かります。
更にコーディングするときにイメージしづらいpaddingやmarginが視覚的に。

更に調整テストもできます。(テストなので実際はCSSファイルを編集してくださいね)

FirebugでCSSを調整テスト

この行を無効にしたらどうなるんだろう?
この数字を変えたらどうなるんだろう? がリアルタイムに分かります。

もちろんfloat:left等も切り替えできますので2カラム3カラム表示のテストにも使えます。


さらにさらに左のボタンを押して、マウスを見たい要素の上にもっていけば

Firebugでエリアを見る

こんな風にエリアが分かります。
これで編集したいタグがどこにあるのか分かりやすい!

私が主に使ってるのはこんな機能です。
他にも便利な使い方があればぜひ教えてください。

現役HTML/CSSコーディングされてる方も、これから勉強する方も便利なツールです。
FC2ブログもCSSが自分で触れますので、ブロガーの方も活用してみてください。

ありがとうございました。

この記事を共有しませんか?

よければご意見をお聞かせください。

ご訪問ありがとうございました!

これに関連する記事

あわせて読みたい

テーマ:web制作 - ジャンル:コンピュータ

  1. 2011/01/14(金) 22:16:44|
  2. Firefox
  3. | トラックバック:0
  4. | コメント:0
<<実験用サーバー環境が手軽に作れる! XAMPPインストール手順 | ホーム | アドオンが豊富な多機能ブラウザ Mozilla Firefox (特徴まとめ)>>

コメント

コメントの投稿

トラックバック

トラックバック URL
http://nekosetu.blog103.fc2.com/tb.php/20-2444ffb3
この記事にトラックバックする(FC2ブログユーザー)

調べたいキーワードで検索

ブログ内の全記事を表示する

RSS/ソーシャルブックマーク登録

RSSを購読するとサイトの最新情報が分かります。「リアルタイムお気に入り」みたいな。

RSSリーダーで購読する

ソーシャルブックマークは「共有お気に入り」です。どちらも便利なので是非一度試してみてください。

みんなが読んでる記事

最新記事

カテゴリ

人気記事まとめ (2)
このサイトについて (2)
ネットラジオ (3)
Dropbox (5)
テキストエディタ (1)
画像を保存ダウンロード (2)
動画を保存ダウンロード (11)
動画の編集・再生 (7)
デスクトップのカスタム (8)
Evernote (10)
Firefox (9)
マインドマップ (5)
秘密を管理する (6)
FC2ブログノウハウ (5)
WEB製作 (2)
IT用語 (1)
XAMPP (3)
WordPress (6)
CMS (6)
節電・節約・エコ (3)
未分類 (3)

プロフィール

ラキ

Author:ラキ
パソコン初心者にも分かりやすい解説サイトを目指します。動画の保存方法からEvernoteなどのクラウドアプリやFreeMindなどのフリーツールまで。ご質問や、ご意見等はコメント頂ければ可能な範囲でお答えいたします。
若輩者ですがよろしくお願い致します。

メールフォーム

名前:
メール:
件名:
本文:

他にもPC解説サイトを見てみる
人気ブログランキングへ
にほんブログ村 IT技術ブログ ソフトウェアへFC2ブログランキング

相互リンク募集!

リンク

ラキの運営サイト

感謝

スポンサー

アクセスランキング

[ジャンルランキング]
コンピュータ
349位
アクセスランキングを見る>>

[サブジャンルランキング]
ソフトウェア
44位
アクセスランキングを見る>>

タグクラウド