1. HTML, CSS をその場で見ながら編集するための前提知識
ブラウザには標準で「開発ツール」が付属している。アドオンや拡張機能の「開発ツール」の中には、表示しているページを動的に編集できる。
そのためには、HTML, CSS について、基本的なことを理解していることが必要。
を参考にするとよい。
例. 編集する対象
Blogger のテンプレートをカスタマイズしたときのページデザインを動的に編集してみる。
3 カラムを 2 カラムに変更するために、真ん中のカラムの幅を動的に変更したい。
2. Firefox で Firebug を利用する
Firefox の場合、予め Firebug をインストールしておく。
- ウィンドウ下部で Firebug を起動。
- Firebug が起動したら、Firebug の画面左隅にある「Inspect」ボタンを押す。
- 対象ページの中央のカラムでクリックすると、対応する HTML のソースが表示される。
- HTML のソースで要素を選択すると、対応する場所が示される。これにより、編集対象の場所を絞り込んでいく。
(例では、id が squeeze の div 要素だった。画面上の黄色の部分は、要素に対してマージンが設定してあることが示されている。今回、これを目安に対象となる要素を探した。) - Firebug の右側のペインで、要素の値を変更すると、設定が反映される。それを見ながら調整を行なう。
(例では、body.sidebars #squeeze の margin の値を 0pt 10px 0px 210px にした。)
3. Internet Exporore で Develop Toolbar を利用する
追記（2013/03/09）： Internet Explorer 9 では、標準で、「設定」 から 「開発ツール」 を利用できる。
ショートカットキーは、上記の Firebug と同じく F12 キー を押すと、開発ツールが表示される。
IE の場合、Internet Explorer Developer Toolbar をダウンロードして、インストールする。
ツールバーに表示された Internet Explorer Developer Toolbar を起動すると、画面下部に 3 つのペインが表示される。
- 左側のペインにある、左上隅のアイコンをクリック。
- 変更したい対象の近くをクリック。
- 要素を選択して、絞り込む。
- 右側のペインで、 margin の値が設定されていることを確認する。
- 中央のペインの左の列でダブルクリックをして、margin 要素を追加する。次に、右側の列をダブルクリックして、値 (0pt 10px 0px 210px) を設定。
0コメント:
コメントを投稿