Stylishで偏執的なレイアウトを作成するための覚書
StylishとはFirefoxの拡張のひとつで、ユーザースタイルシートの作成と管理を助けてくれるもの。
userstyles.orgには大量のユーザースタイルシートが投稿されていて、Stylishを導入しているなら現在開いているサイトのユーザースタイルシートが無いか確認したりすることができる。
このStylishを使って去年あたりから細々とユーザースタイルシートを投稿してきたので、ここらで自分流のスタイルシートの書き方とかについていろいろまとめてみようと思った。
なお、一度でも使ったことがあるなら分かるが、かなり偏執的なレイアウトにしてしまうので、合わない人にはとことん合わないということを注意しておきたい。
どのようなサイトに向けて作成するか
基本的には訪問頻度と文章を読む上でのレイアウトの酷さ。レイアウトの酷さには以下の点が挙げられる。
- 無駄にデカいサイトロゴ
- サイドバーが多い
- サイドバーが縦に長い
- 画像が多い
- 文字が小さい
- 行間が狭い
- 文字間が狭い
- リンクに下線が引かれていない
- 適度に改行されていない
- 段落と段落の間が詰まっている
- 数世代先の色使い
などなど。そこまでレイアウトが酷いサイトにはそうそう出会わないが、文字が小さいサイトが非常に多いので、今まで作成したユーザースタイルシートの大半は文字を大きくするついでにレイアウトも変えてしまったサイトだ。
どのようなレイアウトにするか
可読性と速さを追求したレイアウトにしたい。
まずは可読性。自分の中で理想的なのが、スタイルシートを全く適用させない状態で本文の幅を40文字前後にして中央寄せにしたもの。さらに行間と文字間を広げ、文字も大きくすることで可読性を向上させる。文字を大きくするのは単に視力が弱いから。
次に速さ。可能な限り広告の画像やコンテンツの背景画像等を極力読み込まないようにし、1カラムのシンプルなレイアウトに仕上げる。こうすることでブラウザのレンダリング負荷を下げ、無駄なファイルリクエストを減らし、1秒でも速くページの読込と表示が完了するようにする。
読みやすいレイアウトの基礎作り
body {
font-size : 112.5% !important; /* 18px */
margin : 0 auto !important; /* 中央寄せ */
padding : 0 !important;
background-color : #f0f0f0 !important;
color : #111 !important;
width : 40em !important; /* 最大幅40文字分 */
max-width : 100% !important; /* 横スクロールバーが出ないように */
border : 0 !important;
}
フォントサイズを大きくし、文章の幅を最大40文字に。背景色と前景色を読みやすい色に固定する。
* {
background-image : none !important;
float : none !important;
text-align : left !important;
letter-spacing : 1px !important;
line-height : 1.5 !important;
min-width : 0 !important;
text-indent : 0 !important;
white-space : normal !important;
}
背景画像は文章の邪魔になることが多いので消去。floatによる段組レイアウトも必要無し。文字間と行間を広げることで可読性を上昇させる。
あらゆるレイアウトを崩す
#container
, #container div {
font-size : 100% !important;
position : static !important;
background-color : transparent !important;
width : auto !important;
height : auto !important;
border : 0 !important;
margin : 0 !important;
padding : 0 !important;
}
それなりに構造がまともなサイトであれば、レイアウトはdivにclassやidを振ってCSSで調整しているのが大半なので、大元のノード及び子孫全てのdivに対してこのスタイルを適用することで、ほとんどのサイトで1カラム化が完了する。
最後に調整
#container * {
font-size : 100% !important;
position : static !important;
background-color : transparent !important;
width : auto !important;
height : auto !important;
}
グローバルセレクタだけでは優先順位の関係上適用されなかったもの（言い換えれば、サイトオーナー側でよく設定されているもの）を、今度は大本のノードの子孫全てというセレクタで再設定する。これでほとんどのサイトは陥落する。
本当はグローバルセレクタでレイアウトを一気に設定したいが、そうするとFirebugでの表示に不具合が生じるので、仕方なくこのような形になっている。
上記だけでも多くのサイトが理想のレイアウトに近くなるが、いくつか邪魔な要素が残るはずなので、classやidを指定して消していく。これらの作業は大体10分前後で完了する。
こうして完成したユーザースタイルシート群は「DestroyAllLayouts」シリーズと名付けることにした。ネーミングに関しては、デストロイオールヒューマンズというゲームタイトルの語呂が良かので拝借した記憶がある。
なんでもかんでも消せばいいと思っているのか？
最近のエントリ一覧や関連のあるエントリ一覧は残したいと思っているが、サイドバーに組み込まれていたり、残すことで他の必要ない要素も残さなければならないようなサイトは泣く泣く消している。
何が必要かは個人によって差があるが、以下についてはできるだけ残したいと思っている。
- サイトロゴ兼トップページへのリンク
- 前後の記事へのリンク
- コメント
- 最近のエントリ
- 関連のあるエントリ
崩せないサイトもある
tableレイアウトを多用していたり、そもそもHTMLが破綻しているようなサイト。数年以上前からサイトに手を加えずにそのまま運営している羅列方ニュースサイト等に多い。
このようなサイトはCSS3のセレクタをもってしても通用しない構造をしていたりするので満足にレイアウトを変更できない。隣接セレクタを利用した力技でなんとか対処しているのが現状。
mixiにいたっては心が折れた。
作成したユーザースタイルシート
下記リンクからどうぞ。OperaでもUserJavaScriptとして利用できるが、対応しているセレクタの関係上、うまく適用されないことがたまにある。
まだまだ試行錯誤の段階なので、上記テンプレートはユーザースタイルシートを作成する度に少しずつバージョンアップを重ねている。
そのため、初期に作成したものと最近のものでは仕上がりがかなり違うので、暇を見て修正している最中だ。もし、インストールしたユーザースタイルシートがおかしいと思ったら、しばらく経ってからインストールし直すと正常に動作するかもしれない。
Info
Navigation
- 関連のあるエントリ
- 2008-04-20 Stylishで快適にユーザースタイルシートを書くための覚書
- 2006-01-20 枠付きグラデで四角い角を丸くする - Nifty++
- 2007-06-18 ニコニコ動画視聴補助CSS
- 2006-02-05 テキストを即座にググれるようになるFirefox拡張「Paste and Go or Search Button」
- 2008-12-29 アドレスバーに等幅フォントを
- 新しいエントリ（日付順）
- Stylishで快適にユーザースタイルシートを書くための覚書
- 古いエントリ（日付順）
- 救急救命カドゥケウス2 8月7日発売決定！
SBM Comments
torichi- ユーザースタイルシートでページを読みやすく
- use.rna.me
- "数世代先の色使い" という表現がすてき
- Kuruma
- 無駄にでかいロゴを自動推定して隠す機能があればいいのかなと思った。
- piro_deno
- stylishはいいね！
- mj39
- 文章を読む上でのレイアウトの酷いサイトを改善するためのCSSの書き方
Comment
投稿したコメントは公開されません。サイトオーナーのみが閲覧できます。
返信等を希望する場合は、コメント内に連絡先のメールアドレスかサイトのURLを入力してください。
2008
0420
