EC studio EC studio 技術ブログ

チーム開発をしていると、画面レイアウトのレビューを
することがよくあります。

スタッフ「できました!見てもらえますか?」

私「おっ、どれどれ・・・。
ここのボタン少し位置ずらそうか。
上にマージン3pxぐらいで」← 細かい

なんて会話をよくします。

そこでスタイルシートをいじって保存してもらい、
ブラウザをリロードすると、

私「うーん、もう1px!」← 細かい

という微調整がたくさん入って大変です^^;
そんな時に便利なFireFoxプラグインをご紹介します。

FireBugでスタイル調整

FireBugは入れてる方も多いと思いますが、
JavaScriptのデバッグから、CSSの調整、
通信まわりの解析など強力な開発支援機能があります。
(インストールはこちらから)

まず、レビューしたいページでFireBugを開きます。

ステータスバーの
firebug
をクリック

FireBugのウィンドウが開きます
firebug console

そこから「調査」をクリックし、
調整したい場所をクリックします

firebug inspect

そうするとHTMLとスタイルが表示されます。

firebug inspect clicked

FireBugのすごいところはここから編集できちゃうところです。
右にある「レイアウト」をクリックします。

firebug inspect layout

現在フォーカスされている要素の、
margin,border,paddingなどが表示されます。
ここの数値をクリックすれば、それぞれ変更できます。

firebug inspect margin

定規も表示され、とってもわかりやすいです。
上のマージンを15pxにしてみました

firebug inspect maring changed

マージンが広がりました!
こんな感じで微調整がとっても簡単です。

Page Hackerでレイアウト調整

FireBugは細かい調整に便利ですが、
位置を大きく変更したりテキスト編集などには不向きです。

そんな時はPage Hackerを使います。
(インストールはこちらから)

インストールしたら、FireFoxのツールバーを右クリックし、
「カスタマイズ」を選択します。

firefox toolbar custom

その中に、「ページ編集」というアイコンが
追加されているはずです。

firefox toolbar custom add

それを、ドラッグしてツールバーへ追加します。

firefox toolbar added

これで準備完了です。
編集したいページを開き、さきほどのボタンをクリック!

すると・・・
一見何も起こりませんが、ページをクリックすると
各要素が編集できるようになっています。

pagehacker image

↑画像をクリックすると、ハンドルが出て
編集できるようになっています。

pagehacker image big

拡大してみました。
Deleteキーを押せば削除もできます。

pagehacker image del

消えました。ドラッグ&ドロップで移動もできます。

テーブルもサイズ変更可能。
行の追加、削除もできます。

pagehacker table add

テキストももちろん編集できるので、
「このボタン、こっちの方が良くない?」
なんて時にはドラッグで移動させてしまいます。

さらにすごいのは、他のサイトのパーツまでも
もってこれちゃいます。

他のサイトを開き、もってきたいコンテンツを
ドラッグしてコピーします。(Ctrl + C)

pagehacker copy

そして、ペーストすると

pagehacker paste

ページに埋め込むことができます!
CSSとかは飛んでしまいますが、
画像などはそのままコピーできます。

この機能を使って、

「XXX(他社のサービス)のこのボタンみたい
なのを使えばいいんじゃない?」

なんて時にサッと試すことができそうですね。


以上、今回は画面レビューに便利な
二つのプラグインをご紹介しました。

他にも何か便利なものがありましたら
ぜひ教えてください! :)


関連した記事:
投稿者
人気のエントリー
カテゴリー
最近のエントリー
アーカイブ
Copyright© ChatWork, All Rights Reserved. secured by ESET.