2007年12月28日金曜日

ブラウザに表示されている内容をその場で変更して確認 - HTML, CSS の動的な変更 - Firefox では Firebug。 Internet Explorer では Developer Toolbar

1. HTML, CSS をその場で見ながら編集するための前提知識

ブラウザには標準で「開発ツール」が付属している。アドオンや拡張機能の「開発ツール」の中には、表示しているページを動的に編集できる。

そのためには、HTML, CSS について、基本的なことを理解していることが必要。

を参考にするとよい。

 

例. 編集する対象

Blogger のテンプレートをカスタマイズしたときのページデザインを動的に編集してみる。

071228-014

3 カラムを 2 カラムに変更するために、真ん中のカラムの幅を動的に変更したい。

071228-016

 

 

2. Firefox で Firebug を利用する

Firefox の場合、予め Firebug をインストールしておく。

  1. ウィンドウ下部で Firebug を起動。
  2. Firebug が起動したら、Firebug の画面左隅にある「Inspect」ボタンを押す。
  3. 対象ページの中央のカラムでクリックすると、対応する HTML のソースが表示される。
  4. HTML のソースで要素を選択すると、対応する場所が示される。これにより、編集対象の場所を絞り込んでいく。
    (例では、id が squeeze の div 要素だった。画面上の黄色の部分は、要素に対してマージンが設定してあることが示されている。今回、これを目安に対象となる要素を探した。)
    071228-017
  5. Firebug の右側のペインで、要素の値を変更すると、設定が反映される。それを見ながら調整を行なう。
    (例では、body.sidebars #squeeze の margin の値を 0pt 10px 0px 210px にした。)
    071228-018

 

3. Internet Exporore で Develop Toolbar を利用する

追記(2013/03/09): Internet Explorer 9 では、標準で、「設定」 から 「開発ツール」 を利用できる。

ショートカットキーは、上記の Firebug と同じく F12 キー を押すと、開発ツールが表示される。


IE の場合、Internet Explorer Developer Toolbar をダウンロードして、インストールする。

ツールバーに表示された Internet Explorer Developer Toolbar を起動すると、画面下部に 3 つのペインが表示される。

071228-020

  1. 左側のペインにある、左上隅のアイコンをクリック。
  2. 変更したい対象の近くをクリック。
  3. 要素を選択して、絞り込む。
  4. 右側のペインで、 margin の値が設定されていることを確認する。
  5. 中央のペインの左の列でダブルクリックをして、margin 要素を追加する。次に、右側の列をダブルクリックして、値 (0pt 10px 0px 210px) を設定。
    071228-019