チーム開発をしていると、画面レイアウトのレビューを
することがよくあります。
スタッフ「できました！見てもらえますか？」
私「おっ、どれどれ・・・。
ここのボタン少し位置ずらそうか。
上にマージン3pxぐらいで」← 細かい
なんて会話をよくします。
そこでスタイルシートをいじって保存してもらい、
ブラウザをリロードすると、
私「うーん、もう1px！」← 細かい
という微調整がたくさん入って大変です＾＾；
そんな時に便利なFireFoxプラグインをご紹介します。
FireBugでスタイル調整
FireBugは入れてる方も多いと思いますが、
JavaScriptのデバッグから、CSSの調整、
通信まわりの解析など強力な開発支援機能があります。
(インストールはこちらから)
まず、レビューしたいページでFireBugを開きます。
ステータスバーの
をクリック
FireBugのウィンドウが開きます
そこから「調査」をクリックし、
調整したい場所をクリックします
そうするとHTMLとスタイルが表示されます。
FireBugのすごいところはここから編集できちゃうところです。
右にある「レイアウト」をクリックします。
現在フォーカスされている要素の、
margin,border,paddingなどが表示されます。
ここの数値をクリックすれば、それぞれ変更できます。
定規も表示され、とってもわかりやすいです。
上のマージンを15pxにしてみました
マージンが広がりました！
こんな感じで微調整がとっても簡単です。
Page Hackerでレイアウト調整
FireBugは細かい調整に便利ですが、
位置を大きく変更したりテキスト編集などには不向きです。
そんな時はPage Hackerを使います。
(インストールはこちらから)
インストールしたら、FireFoxのツールバーを右クリックし、
「カスタマイズ」を選択します。
その中に、「ページ編集」というアイコンが
追加されているはずです。
それを、ドラッグしてツールバーへ追加します。
これで準備完了です。
編集したいページを開き、さきほどのボタンをクリック！
すると・・・
一見何も起こりませんが、ページをクリックすると
各要素が編集できるようになっています。
↑画像をクリックすると、ハンドルが出て
編集できるようになっています。
拡大してみました。
Deleteキーを押せば削除もできます。
消えました。ドラッグ＆ドロップで移動もできます。
テーブルもサイズ変更可能。
行の追加、削除もできます。
テキストももちろん編集できるので、
「このボタン、こっちの方が良くない？」
なんて時にはドラッグで移動させてしまいます。
さらにすごいのは、他のサイトのパーツまでも
もってこれちゃいます。
他のサイトを開き、もってきたいコンテンツを
ドラッグしてコピーします。(Ctrl + C)
そして、ペーストすると
ページに埋め込むことができます！
CSSとかは飛んでしまいますが、
画像などはそのままコピーできます。
この機能を使って、
「XXX(他社のサービス)のこのボタンみたい
なのを使えばいいんじゃない？」
なんて時にサッと試すことができそうですね。
以上、今回は画面レビューに便利な
二つのプラグインをご紹介しました。
他にも何か便利なものがありましたら
ぜひ教えてください！ 
関連した記事：
■ 「日本でいちばん社員満足度が高い会社の非常識な働き方」
この記事へのコメント (0)
コメントはまだありません。
ページの先頭に戻る
コメントを投稿