GeckoユーザーのためのユーザースタイルシートTips

GeckoとはFirefoxなどのブラウザで利用されているレンダリングエンジンです．

ユーザースタイルシートとは

従来，Webページのデザインはページ制作者のみが行なってきました．このため，自分の環境では不都合があったり自分にとって好ましくないデザインの場合でもデザインを変更して読みやすく・見やすくすることはできませんでした．

しかし，ユーザースタイルシートの登場により，大げさに言えばユーザー（閲覧者）がページのデザインを行なうことが可能になりました．ユーザースタイルシートに対応したWebブラウザ，例えば，Internet ExplorerやFirefox，Opera等を利用している場合，自分の都合に合わせてページを読む・見ることが出来ます．ここではFirefoxやSeaMonkey（Mozilla）等のGeckoブラウザの機能をフルに使ったユーザースタイルシートの実例を紹介します．

World Wide Webは，見る側が好きなように見ることが出来る今までにないタイプのメディアなのに，それを活用しないのはもったいないことだと思います．

ユーザースタイルシートの使い方

FirefoxやSeaMonkey（Mozilla）でユーザースタイルシートを使うにはプロファイルディレクトリ（設定ファイルがあるところ）のchromeディレクトリ以下にuserContent.cssという名前のCSSファイルを作成して下さい．このCSSファイルがユーザースタイルシートになります．

なお，userContent.cssをシンボリックリンクにしておくと便利かも知れません．

a要素まわり

アンカーテキスト（リンクの文字）に常に下線を引くようにします．

a[href] {
  text-decoration: underline !important;
}

また，別窓（新しいWindow）を開くリンクをみつけることも出来ます．

[target="_blank"]:after {
  content: "(\5225\7a93)"; /*別窓と表示*/
  color: red; /*文字色を赤くします*/
  background-color: transparent; /*背景は透明とします*/
}

また，mailtoスキームのリンクを見分けることもGeckoブラウザでは可能です．なお，CSS3の先行実装ですので，Webページ用のスタイルシートではCSS3が勧告されるまで使用しないで下さい．

a[href^="mailto:"]:after {
  content: " [e-mail] ";
}

筆者は普段からJavaScriptを切っているので，javascriptスキームのリンクも区別出来るようにしています．

a[href^="javascript:"]:after {
  content: " [JS] ";
}

行の高さ

行間が狭いからということで，わざわざ行間の広いフォントを利用することもありましたが，ユーザースタイルシートを使えば，そのようなフォントを利用する必要がなくなります．

body {
  line-height: 1.5;
}

1.5のところを変更すれば，行間を狭めたり，広めたりすることが可能です．なお負の値は不正です．

title属性やalt属性

title属性は様々な要素に指定でき，付加的な情報を与えます．title属性（とその値）が与えられている要素の上にカーソルを持って行くと，一般的なWebブラウザではツールチップにtitle属性の値が表示されますが，気付かないことがあるので，title属性の値を本文中に表示させます．

[title]:after {
  content: "(" attr(title) ")";
}
/*アクセシブルなページが読みにくいのでa要素とhr要素は除外*/
a[title]:after, hr[title]:after {
  content: "";
}
/*引用符が欠けるのを防止*/ 
q[title]:after {
  content:  close-quote "(" attr(title) ")";
}

alt属性でtitle属性と同様の効果を狙っている不適切なサイトについても，この方法で対処出来ますが，おすすめしません．

[alt]:after {
   content: "(" attr(alt) ")";
}

引用

blockquote要素の後に引用元と，title属性の値を表示するには次のようにします．ここではtitle属性の値を白抜きの括弧（『』）で囲み，q要素には引用符（“”）をつけるようにしています．

blockquote[title]:after {
  content: "\300E" attr(title) "\300F";
}
blockquote[cite]:after {
  content: "(" attr(cite) ")";
}
blockquote[title][cite]:after {
  content: "\300E" attr(title) "\300F(" attr(cite) ")";
}
q {
  quotes: "\20\201C" "\201D\20" "\20\2018" "\2019\20";
}
q:before {
  content: open-quote;
}
q:after {
  content: close-quote;
}
q[title]:after {
  content: close-quote "\300E" attr(title) "\300F";
}
q[cite]:after {
  content:  close-quote "(" attr(cite) ")";
}
q[title][cite]:after {
  content:  close-quote "\300E" attr(title) "\300F(" attr(cite) ")";

blockquote要素（quoteは引用の意味）を引用以外に用いている不思議なサイトが世の中には多いですが，筆者は適切な運用が行われているサイトでの表示を優先します．

具体的には，引用は引用らしくします．以下の例では，blockquote要素の左に線を引き，左余白を取ります．また，イタリックで“Quotation: ”と挿入します．

blockquote {
  border-left: 4px solid;
  padding-left: 1em;
  margin-left: 1em;
}
blockquote:before {
  content: "Quotation: ";
  display: block;
  font-style: italic;
  font-weight: normal;
}

del要素，ins要素

Geckoは，特に指定しない限りdel要素，ins要素をdisplay: inlineとしてあつかいます．また，標準モードにおいて，display: inlineとされた要素内にdisplay: blockとした要素がある場合，display: blockとされた要素の前後でdisplay: inlineの要素を分断するようです．このため，ins要素，del要素の子孫要素にdisplay: blockな要素（p要素，ul要素など）があるとins要素，del要素に指定されたtext-decorationの効果が及びません．そのため，del要素やins要素の存在に気付けないことがあります．

これは，以下のようにすることで解決します．

del {
  text-decoration: line-through;
}

del > h1, del > h2, del > h3,
del > h4, del > h5, del > h6,
del > div, del > p, del > pre,
del > address, del > blockquote,
del > ul, del > ol, del > dl, 
del > form, del > fieldset,
del > table, del > table * {
  text-decoration: inherit;
}

ins {
  text-decoration: underline;
}

ins > h1, ins > h2, ins > h3,
ins > h4, ins > h5, ins > h6,
ins > div, ins > p, ins > pre,
ins > address, ins > blockquote,
ins > ul, ins > ol, ins > dl, 
ins > form, ins > fieldset,
ins > table, ins > table * {
  text-decoration: inherit;
}

関連記事・参考記事

• ユーザースタイルシートのススメ
• ユーザースタイルシートから始めるCSS
• CSS リファレンス