fc2ブログ

2005-08-19

Colorzilla 導入 / Firefox 拡張機能のメモ

うまく配色できないと嘆いていたら、Colorzilla という Firefox の拡張機能を見つけたのでインストールしてみました。Web サイトの色彩に関する拡張です。

ステータスバーに表示されたアイコンをクリックすることにより、ページ内の色情報を取得できたりカラーピッカーを開いたりできます。サイトを見ていて気になる色があったらすぐに調べられますし、類似色もわかるので便利そうです。カラーピッカーにはWeb セーフカラー一覧などもあります。

で、ついでに、現在入っている拡張機能を書いておきます。といってもそんなに入れてないんですが。

Web Developer 0.9.3
Web サイト制作支援。CSS の無効化や編集機能、HTML 構文の検証をよく利用してます。
Tab Mix Plus 0.2.3.1
タブ機能拡張。閉じたタブを復元できたりタブを並べ替えられたり。
Link Toolbar 0.9.1
link 要素をナビゲーションリンクとして表示。テスト用に導入したのですが、意外と使えました。
Sage 1.3.5
Firefox を RSS リーダ化。ブログの巡回のお供です。
Copy URL + 1.3.1
URI やタイトルをコピー。たった今インストールしました。plant4 - Firefox拡張copyurlplusのメモhxxk.jp - Copy URL+ をカスタマイズを参考にしつついじっていきます。

これらに Colorzilla を足して六つ……少なめですね。

他には、ページを簡単に IE で開ける IE View、ユーザースクリプトでサイトの見た目を操作できる(らしい) GreaseMonkey、マウスジェスチャーを使用可能にする All-in-One Gestures に興味があります。

テンプレートの作成手順

テンプレートを作っているとどうしてもどこかで行き詰ってしまうので、今のやり方を確認・反省してみます。

  1. アイデアを思いつく
  2. 頭の中で形をぼんやりとまとめる
  3. ブラウザで確認しながら HTML を書く(この時点では変数は入れない)
    • スタイルシートで大まかに整えていく(HTML と同時進行)
    • 見出し・本文はわりとすんなり決まる
    • どこを div で囲うか、各エリアの表示形式をどうするか、コメント・トラックバックをどうマークアップするかで悩む
  4. (実際にはこのあたりで行き詰まるが、うまく進んだとして)
  5. 本格的にスタイルシートに取り組む
    • 配置・配色などありとあらゆる面で悩む
    • 複雑なスタイルを書こうとして試行錯誤する
    • CSS ハックをする
  6. できた雛形に変数を組み込んでいく
  7. プレビューで表示確認→変な所があったら手直しを繰り返す
  8. 完成

悩みすぎ! あらためて見ると無駄が多すぎますね。これじゃ先に進まないのも当然だ。

というわけで、今後の目標。

  • レイアウトは紙の上で決める
  • コメントなどの厄介な部分は事前にマークアップの方法を考えておく
  • 素の HTML を書いている時点から変数を意識する
  • 途中で放り出さない

配色にも相当の時間を費やすのですが、画像ソフトなんてペイントしかないのでこればかりはブラウザ上でちまちまテストしていくしか思いつきません。