てんぽ: ユーザースタイルシート拡張がほしい

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

ユーザースタイルシート拡張がほしい

2005年06月25日(土)

企画に便乗してみます。

テンプレート作成時のこだわりは、一連の『chameleon』解説で書いてしまったので、 [chameleon]以外でもあてはまることを書いてみます([chameleon]はちょっと特殊ですし、あそこに書いていないことで実験的なこともやっていますがそれはまだ秘密)。

第一にJavaScript、CSS、画像の有効無効どの組み合わせでも閲覧に支障がないようにすることです。今のところJavaScriptはほとんど使っていない(というか使えない)ので問題ないんですが(JavaScript切ってるとナビゲーションが全く機能しないテンプレって結構ありますよね)、「CSS有効で画像無効」の場合に「画像置換」をやっていると不都合があるので気をつけています(具体的な話はいずれ書くかもしれません)。

もうひとつはユーザースタイルシートを使っての表示確認です。文書構造がまともかどうかを(視覚的に)チェックするためです。 つまりStrictなHTMLへのこだわりというものがあるのですが、これはもう「趣味」の話です。Strict HTML+CSSはデザイン面で制約があるとはいえ、制約があるからこそ面白いのです(プロの方はそうも言ってられないんでしょうけど)。

このとき使うCSSファイルは自分で作ったものではなく、よそのサイトで使われているものをパクってお借りしています。最近は徳保さん(趣味のWebデザイン)の「folio」からclass,id,画像に関する指定を取り除いたものを好んで使っています。基本構成がシンプルなので流用しやすく、普通のマークアップならば趣味のWebデザインそっくりになるところが面白いからです(現在、代替CSSにfolioを指定してあるので対応ブラウザなら見ることができます)。

ユーザースタイルシートでの表示確認にはFirefox拡張のWeb Developerを使います。「無効化」から「link要素で指定されたCSS」を無効にし、「CSS」から「ユーザー定義のスタイルシートを追加する」という手順です。この方法だと制作者CSSと競合することがないので便利です(画像やJavaScriptの無効化にもWeb Developerを利用しています)。

さて、ここからが本題というか、こういうFirefoxの拡張があったらなぁという願望。自分はユーザースタイルシートをたまに使って閲覧しています。ですが常用するには至りません。 (大多数の)マークアップのひどいサイトだと逆に見難くなったり、マークアップのまともなサイトならそもそも制作者CSSで十分読みやすい(ことが多い)からです。不正なマークアップ対策や制作者CSSを完全に殺すような指定をするのは面倒なので、それなら制作者CSSや物理マークアップによる装飾で我慢します。

適当に作ってしまうと閲覧するサイトのスタイルシートと競合してしまって、逆に読みにくくなることがあります。デザインのバランスも崩れて不快です。それで、結局使わない方が面倒がなくてよいというオチになることがあります。

まさにこれです。でもたまにはユーザースタイルシートを使いたいと思うので、そのときはWeb Developerを利用しています。

Web Developerの「無効化」と「CSS」のコンボは、ユーザースタイルシートを使いたいと思ったときだけに適用することができ、しかも制作者CSSとの競合も避けられます。しかし手順が少し面倒なので、この機能をボタン一発でできるような拡張はないものかとちょっと探してみましたが、見つかりませんでした。 望む機能を書き出してみます。

  • プルダウンメニューでユーザースタイルシートと制作者CSS、代替CSS(あれば)を選択できる
  • ユーザースタイルシートを選択した場合、制作者CSSをすべて無効にできる
  • 同じドメイン内ならページを移動しても選択したスタイルシートが保持される
  • プルダウンメニューとは別に、制作者CSSを無効にし、ひとつのユーザースタイルシートをワンクリックで適用させる「ボタン」もあるとうれしい
  • 拡張機能の設定から以下の項目について設定できる
    • ユーザースタイルシート(複数)の登録
    • 制作者CSSをどの程度無効にするか(link要素での指定は無効、head要素内は有効とか、特定のプロパティは有効など)
    • デフォルトでは制作者CSSかユーザースタイルシートのどちらを適用させるか(すなわちユーザースタイルシート「常用」もできる)
    • 特定のWebページに対してのみ適用させるCSSの設定(サイトごとにユーザースタイルシートを自動的に振り分け)

具体的に機能を列挙してみると、ますますほしくなってきました。どこかにありそうな気もするんですが。

#26
カテゴリ:HTML・CSS
タグ[ CSS Firefox ]

同じカテゴリの記事

(-5件)

sugar:

こんにちは。bbsで衝撃を受け、以来、拝読しております。

ここFC2ブログに来るまで、cssデザインというものにものすごぉい苦手意識を持っており、css見るのも抵抗があるような状況でしたが、いろいろな方々のテンプレートに触れ、その面白さに今更ながら気付かせていただいているところです。

  • 2005年06月26日(日)23:26:03
  • URL
  • 編集
みりばーる:sugarさん、はじめまして

私は運良く(?)HTMLレイアウトの時代を経験することなくCSSレイアウトから覚えることができたので、CSSはあって当たり前のように感じております。が、やはりブラウザのバグには悩まされますね。
遅くなりましたが、トラックバック送らせていただきました。

  • 2005年06月28日(火)19:56:50
  • URL
sugar:トラックバックテーマご参加ありがとうございました。

おかげさまで何だか読んでるだけでわくわくするトラックバックテーマになっております。

>が、やはりブラウザのバグには悩まされますね。

! 今度のテーマが思いついたような気が・・・します(笑)。

ともかく ありがとうございました(^^

  • 2005年06月28日(火)21:06:58
  • URL
  • 編集
Chako:はじめまして。

以前から、色々と参考にさせて頂いております。
今回こちらで「Web Developer」を知り、さっそく導入してみました。「ユーザースタイルシートを当てる」という意味をいまいち理解できていなかったのが解決できた上、この便利な機能で助かっております。どうもありがとうございました。(トラバさせていただきました)

>HTMLレイアウトの時代を経験することなくCSSレイアウトから覚えることができた
うらやましいです(笑)ワタシなんてバリバリのテーブル世代なので...

  • 2005年07月05日(火)19:33:38
  • URL
  • 編集
みりばーる:Chakoさん、はじめまして。

 Web Developerは本当に便利で、サイト制作者の必需品と言ってもいいと思います。特に「ブロック要素を枠で囲む」と「構文の検証」を重宝しています。
 ところで、ユーザースタイルシートはWeb Developerを使わずともたいていのブラウザで利用できます(WinIEですと「インターネットオプション」の「ユーザー補助」から選択できます)。ただ、現在のページのCSSに“追加で”読み込むことになるため、徹底的に作りこんだCSSファイルを用意しないと逆に見難くなってしまうのが難点です。

  • 2005年07月05日(火)22:08:00
  • URL
  • 編集
コメントの投稿

トラックバック(-2件)

http://mb.blog7.fc2.com/tb.php/26-bb3df0be

ユーザースタイルシート

話はかなり前のことになりますが...FC2 ブログテンプレートコンテスト全作品感想集の中で、ワタシのテンプレート「beige_sakura-day」にいただいた感想。こんな手があったとは! タイトル周辺のテーブルレイアウトの意味がソースを見てもよくわからなかったので、ユーザスタ

  • 2005年07月05日(火)19:17:21
  • from べーじゅのこころ
WebDeveloperマンセー!

Firefox拡張の「WebDeveloper」が物凄く便利だということを、以前からFirefox使いのエクさん(彼のブログは二つあるんだがこの場合はこっちの方がいいのか)から聞いていました。昨日やっとこFirefoxをインストールしたので早速入れてみようかな…と思った矢先に、こんな記事

  • 2005年07月05日(火)23:34:24
  • from ウェビンブログ

<<テンプレコン | 「こちら」リンクは損!?>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。