FirefoxエクステンションでWebページのデザイン向上

 Webページの作成や編集を試したことのある人なら、ちょっとした細部の調整に時間をとられることがあるのはご存知だろう。本稿では、Webデザインの定番ツールになりうる、画像のサイズ確認、ページ上のオブジェクト整列、色の採取が手早く行えるFirefoxエクステンションを紹介する。

 フラッシュのサイドバーやヘッダ、その他画像の正確なサイズを知る必要があるなら、 MeasureIt を使うとよい。MeasureItをインストールすると、ステータスバーの左側に小さなルーラーアイコンが追加される。これをクリックすると十字カーソルが現われるので、あとはサイズを知りたいオブジェクトにカーソルを持っていき、その上でドラッグ操作によって矩形を作るだけだ。すると、矩形の右側にオブジェクトの幅と高さが表示される。Escapeキーを押すと、MeasureItの動作を抜け、ページは通常の状態に戻る。

 空間的な位置関係や距離の判断、オブジェクトの整列に役立つグリッドは、Webページ上の重要な領域だ。Webページに配置したオブジェクトがグリッドベースのレイアウト内に整然と並ぶようにするには、 GridFox を利用するとよい。GIMPをはじめとする画像エディタにあるようなグリッドを表示してくれるエクステンションだ。そうした画像エディタを使ったことがあるなら、同じ感覚で簡単にGridFoxを使いこなせるだろう。

 デフォルトでは、垂直グリッドだけがGridFoxによって表示される。水平グリッドの表示、背景色の変更、グリッド線の太さおよび色の変更は、「ツール」→「GridFox」→「オプション」から行う。欠点は、必要なところにグリッドを表示させるのが面倒なことだ。調整のために、カラムおよびローの値の変更が何度も必要になる場合がある。ドラッグで簡単に再配置できるように、グリッドがガイドにもなってくれれば、もっとすばらしいものになっただろう。また、Webページの幅がわかっていれば、外側グリッドの配置に役立つ。カラムを等間隔にするかどうかに応じて内側グリッドを配置できる。

 Webサイトを目立たせるためには、色の配合がモノをいう。 ColorZilla を使えば、厳密にどんな色がWebページで使われているのかが簡単にわかる。

 ColorZillaをインストールすると、ステータスバーの左側にスポイトアイコンが現われる。ただし、LinuxのUbuntuデスクトップでは、このアイコンをクリックすると、ちょうど私の環境がそうだったように、“お使いのプラットフォームは、この機能をサポートしていません”というエラーメッセージが出る可能性がある。この問題は、Ubuntuフォーラム上の詳しい手順に従えば解決されるはずだ。

 Webページ上の色を調べるには、スポイトアイコンを右クリックし、選択しやすいようにページを拡大したうえで、アイコンを左クリックして色を調べたい部分に十字カーソルを置く。デフォルトでは16進数のRGB値で、その色のコードが、直前にポイントした場所からの距離と要素タグと共にステータスバーに表示される。また、左クリックにより、その色がColorZillaのカラーピッカー(パレット)に追加される。

 色の採取後にスポイトアイコンをダブルクリックすると、色パレットが開く。このパレットから所望の色が得られるわけだ。ColorZillaには、画像エディタに必ず付いているような、本格的な色選択ツールも用意されている。また、「ステータスバーの表示方法」メニューには、幅広い表示オプションが存在する。個人的に気に入っているのは、「オプション」→「ステータスバーの表示方法」を選択すると開く「ステータスバーの表示」メニューで「dom-path」をトグル選択することにより、ポイントしている要素がDOM(Document Object Model)ツリーのどこに存在するかを表示できる点だ。

 ちなみに、ColorZillaは、選択テキストをクリップボードに自動でコピーできるFirefoxエクステンション、 Auto Copy も合わせてインストールしてくれる。Auto Copyを有効にすると(「オプション」→「Auto Copy」→「有効」を選択)、選択しているテキストを、マウスの中央ボタンのクリックによってどこにでも貼り付けることができる。

 これら3つのツールがあれば、Webページへの画像やテキストのアップがいくらか簡単になるはずだ。MeasureItを使えば、画像の割り当てに必要なスペースの大きさが正確にわかる。GridFoxは、テキストや画像をきれいに並べてくれる。そしてColorZillaでは、ページの色をすぐさま変更できる。

Linux.comでは毎週月曜日に、エクステンション、プラグイン、アドオンを取り上げた記事を掲載している。使ってみて便利なものがあれば、活用のヒントも含めて1,000ワード以内の紹介記事(英語)を執筆していただきたい。採用された方には謝礼として100ドルを進呈する(掲載済または掲載予定の記事との内容の重複を避けるために、まずはメールで問い合わせてほしい)。

Martin Kabaはコンピュータサイエンス専攻の大学院生。ブログKabatologyを執筆中。イタリア在住。

Linux.com 原文