« 独自ドメイン取得:お名前.com編 | トップページ | 独自ドメインの利用方法 »

本日覚えたこと、FirebugはWebデザインに超便利!

20110304dsc03245

昨日はwackyさんWebAPI勉強会のセミナーのひとつ「はじめてのHTML+CSSデザインレイアウト」セミナーだったのですが、そこで教えていただいたツールがFireFoxのアドオン「Firebug」。
FireFoxで開いて見ているサイトのHTMLファイルとスタイルシートを開いて、編集などができます。

Firebugのメリット1:気になるサイトのソースをチェック!

Firebug01_3

ふつうにブラウザで、「ソースを表示」してサイトのソースを見ることはできますが、どの部分の表示がどういうソースなのかを解析するのは大変です。

Firebugでは、HTMLのある行を選択すると、それがサイトの画面のどこに対する指示なのかわかります。

たとえばヤフーのバナーとその両脇のアイコンが、実はバナーを表示したうえで、アイコンをリスト表示しているということがソースから読み取れます。

ソースはHTMLだけでなく、スタイルシートも見られます。

Firebugのメリット2:見ながら、微妙な調整を手軽に編集

Firebug02

たとえばヤフーの画面を見ながら、Firebugでソースを書き換えるとリアルタイムでヤフーの画面が変わります。
もちろん、自分のパソコンで見ている表示を書き換えているだけで、実際にヤフーのサイトを改ざんしているわけではありません。

自分のパソコン内のHTMLファイルも同様に編集できるので、自分のサイトのソースを
「ここの空きをもう1px大きくするとどうだろう?」
見ながら、簡単に調整ができます。

一からここで書いていくのはもちろん大変ですが、おおよそ完成させたサイトの微妙な調整には最適です!

Firebugのメリット3:細かな空き指定なども一目瞭然

Firebug03

wackyさんも言っていましたが、デザインでは空きが非常に重要。
DIVで囲んだ領域の内側の空き、つまり領域の外側の枠と中身の間の空き指定(padding)や、領域間のスペース(margin)の指定に悩みます。

Firebugには「レイアウト」タブがあり、そこを開くと、選んだ領域のmarginやpadding、さらにはborderのサイズも一目瞭然でわかります。

今回の勉強会でも活躍したのがレノボのノートパソコン(一番上の写真)。
3月10日(木)までレノボは年度末決算セール中!
特別割引クーポンで買えるのはこちら。
IdeaPad広告限定ストア

  =対象機種のおすすめ構成例=
 
┌─────────────────────────────────┐
 デュアルコアCPU/2GB RAM/320GB HDD搭載のThinkPad SL410は《新価格》
 広告限定クーポン適用で《3万円台~》に!
└─────────────────────────────────┘
 
■「ThinkPad SL410」 -ベーシックパッケージ
 
 CPU:インテル Celeron プロセッサー T3300 (2GHz)
 OS:Windows 7 Home Premium 32 正規版
 ディスプレイ:14.0型HD液晶 (1,366 x 768) VibrantView
 RAM:2GB PC3-8500 DDR3 (1スロット使用)
 HDD:320GB (5,400rpm)
 光学ドライブ:DVDスーパーマルチ, 固定
 ワイヤレス:ThinkPad IEEE 802.11b/g/n ワイヤレスLAN (WiFi準拠)
 ------------------------------
 通常ダイレクト価格:¥142,590-
 キャンペーン価格 :¥ 43,890-
 
 ★広告限定クーポン適用で12%OFF!★
 ---------------------------------
 クーポン適用価格 :¥ 38,623-

┌─────────────────────────────────┐
 信頼性と堅牢性を極めた、大画面15.6型液晶のThinkPad T510。
 Core i5-560Mを搭載しながら広告限定クーポン適用で《8万円台》!
└─────────────────────────────────┘
 
■「ThinkPad T510」 -バリューパッケージ
 
 CPU:インテル Core i5-560M プロセッサー (2.66GHz)
 OS:Windows 7 Home Premium 32 正規版
 ディスプレイ:15.6型液晶 HD(1,366x768)アンチグレア,LEDバックライト
 RAM:2GB PC3-8500 DDR3 (1スロット使用)
 HDD:250GB (5,400rpm)
 光学ドライブ:DVDスーパーマルチ, ウルトラベイ・エンハンスド
 ワイヤレス:ThinkPad IEEE 802.11b/g/n ワイヤレスLAN (WiFi準拠)
 ------------------------------
 通常ダイレクト価格:¥219,030-
 キャンペーン価格 :¥ 99,960-
 
 ★広告限定クーポン適用で12%OFF!★
 ---------------------------------
 クーポン適用価格 :¥ 87,965-
 

« 独自ドメイン取得:お名前.com編 | トップページ | 独自ドメインの利用方法 »

サイト作成」カテゴリの記事

コメント

コメントを書く

コメントは記事投稿者が公開するまで表示されません。

(ウェブ上には掲載しません)

トラックバック


この記事へのトラックバック一覧です: 本日覚えたこと、FirebugはWebデザインに超便利!:

« 独自ドメイン取得:お名前.com編 | トップページ | 独自ドメインの利用方法 »

便利ツール

  • キャリアアップ.biz >ブロガーズブログ

  • 富士通 FMV ESPRIMO DH

カテゴリー

広告

マイチャンネル