[暴満館] タグ: cssのエントリ

Home / Diary / タグ: css

Stylishで快適にユーザースタイルシートを書くための覚書
Stylishで偏執的なレイアウトを作成するための覚書
ニコニコ動画視聴補助CSS
あの素晴らしいCSSを二度三度
positon:fixedの代わりにCSS Expressionを使ってみた
CSSによる擬似フレームに潜む落とし穴

Stylishで快適にユーザースタイルシートを書くための覚書

偏執的な書き方はともかく、Stylishを使って記述から投稿までを解説したようなサイトは見たことがないので、こちらも覚書として自分の手法を紹介する。

なお、ここから先は偏執的ではない。

Stylish専用プロファイルの作成

Firefoxに導入する拡張を絞り、広告ブロック等も行わないようにすることでwebページへの影響を最小限に抑える。これにより素のwebページを弄ることができるようになるので、ユーザースタイルシートを導入した際の他ユーザーとの差異を小さくすることができる。

別プロファイルを起動できるようにする。

複数の Firefox を同時起動するを参考に、

C:\Firefox\firefox.exe -no-remote -P "Stylish"

このような感じでショートカットを作成。初回はプロファイル編集ダイアログが表れるので新規プロファイルを作成する。間違っても通常使うプロファイルに設定してはいけない。

右クリックメニューからStylish専用プロファイルを起動する

このままでは、「ユーザースタイルシートを作成したいページのURLをコピー⇒専用プロファイル起動⇒URLをペースト⇒開く」といった手順が必要になるので、簡略化するべくJSActionsを利用して、右クリックから起動できるようにする。

JSActionsの導入については三軒隣の斜め向かい:JavaScript Actionsにて詳しく説明されているので、参考にすると良い。

無事にフォルダの設定まで完了したのなら、以下のスクリプトを「Stylish専用プロファイルで開く.js」とでも名前をつけてscript_set/globalに保存する。

// 現在のページまたはリンク先をStylish専用プロファイルで開く
jsa_execStylishProfile( );
function jsa_execStylishProfile(){
    // Firefoxのパス
    var fxpath = "D:\\Firefox\\firefox.exe";
    // プロファイル名
    var prof = "Stylish"

    var docURL = ( _jsaCScript.context.onLink )
                ? _jsaCScript.context.link.href
                : window.location;

    _jsaCScript.exec( fxpath, ' -no-remote -P ' + prof + ' ' + docURL );
}

Firefoxを再起動後、適当なページで右クリックメニューから「Actions/Stylish専用プロファイルで開く」と選択すれば、見事に専用プロファイルが起動するようになる。

好みのテキストエディタでスタイルを書く

StylishのスタイルシートエディタはFirefox標準のtextareaなので非常に使いづらい。そこでuserChrome.jsを利用して、好みのテキストエディタで編集できるようにする。導入についてはuserChrome.js - Mozilla Firefox まとめサイトを参照してほしい。

userChrome.jsを導入したら、次にuserChrome.jsの話題8 Stylishのエディットウインドウに外部エディタ起動ボタンを追加する(改1)を参考にstylish0.5_edit.uc.jsをchromeフォルダに保存する。

うまくいけば、StylishのスタイルエディタにEditerというボタンが表れるので、これを押すことで外部エディタが起動するようになる。

webページをキャプチャする

実際に作成したユーザースタイルシートをuserstyles.orgに投稿する場合、スクリーンショットがあると導入の指針になるので、可能なら作成していく。

webページのキャプチャにはFirefoxの拡張の一つ、Screengrab!を利用する。

Screengrab!を導入すると、ステータスバーのアイコンからwebページのキャプチャが行えるようになる。saveは画像ファイルとして保存、copyはクリップボードに格納する。それぞれのサブメニューは以下のとおり。

Complete Page/Frame…: スクロール領域も含めた、ページの全てをキャプチャする
Visible Portion…: 現在表示している部分のみをキャプチャする
Selection…: 選択した部分をキャプチャする

チートシートを用意する

CSS3 セレクタチートシート

CSS3のセレクタは強力なものが多く、その幾つかはFirefox2.xでも利用可能。こちらのチートシートにはFirefoxだけでなくOperaの対応状況も載っているので、両ブラウザで使えるユーザースタイルシートを作成する際にそばに置いておくと重宝する。

その他拡張機能の導入

Firebug: 消したい要素をクリック一つで判別できるだけでなく、CSSがどのように適用されているかも知ることができる。Stylishとの相性はグンバツ。神拡張。
Web Developer: 必須というわけでは無いが、機能の一つにウインドウを指定サイズでリサイズできるというものがあるので。他で代用できるなら入れる必要はあまり無い。

その他、webページに影響を与えない拡張なら必要最小限に抑えて導入していく。

ユーザースタイルシートのバックアップ

プロファイルフォルダ内にあるstylish.rdfがStylishの本体なので、コピーするなりしておく。

userstyles.orgに投稿する際の注意

投稿したスタイルは削除できない
投稿したスタイルの名前は50byteまで
他とする重複タイトルは登録不可能
スクリーンショットは75KByte以下且つGIFかPNGのみ
スクリーンショットは横幅が300pxになるまで縮小される
Editページのobsoletion formから投稿したユーザースタイルシートを検索に引っかからなくなるようにできる

画像の一括リサイズ

キャプチャした画像は75KB以下でないとアップロードできない上、横幅が300px以上だとサーバーで汚く縮小されてしまうので、GIMPを利用して一括縮小してしまう。

一括変換プラグインで一度に複数画像を処理するを参考にプラグインを導入すれば、容易に一括リサイズが可能になる。

Info

投稿日: 2008年4月20日
タグ: css、firefox
このエントリの固定リンク: http://diary/log/1755.html
ブックマークに追加する
コメント: コメントを投稿する

2008
0420

Tagscss firefox

⇧

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として利用できるが、対応しているセレクタの関係上、うまく適用されないことがたまにある。

まだまだ試行錯誤の段階なので、上記テンプレートはユーザースタイルシートを作成する度に少しずつバージョンアップを重ねている。

そのため、初期に作成したものと最近のものでは仕上がりがかなり違うので、暇を見て修正している最中だ。もし、インストールしたユーザースタイルシートがおかしいと思ったら、しばらく経ってからインストールし直すと正常に動作するかもしれない。

suzusaki | userstyles.org

Info

投稿日: 2008年4月20日
タグ: css、firefox
このエントリの固定リンク: http://diary/log/1754.html
ブックマークに追加する
コメント: コメントを投稿する

2008
0420

Tagscss firefox

⇧

ニコニコ動画視聴補助CSS

再生エリアの上になんか出てるー！？

#flvplayer {
position : absolute;
top : -101px;
left : -7px;
}
#WATCHHEADER {
position : absolute;
top : 460px;
}

これをテキストとして保存、niconico.cssとでも名づけてユーザーCSSとして使うといいだろう。

視聴補助スクリプトのほうにも一応反映しといたが、ユーザーCSSにしといたほうが何かと好都合。

ついでなんで実装しわすれてたF5キャンセラーキャンセラーも実装しといた。

Info

投稿日: 2007年6月18日
タグ: css、opera
このエントリの固定リンク: http://diary/log/1539.html
ブックマークに追加する
コメント: コメントを投稿する

2007
0618

Tagscss opera

⇧

あの素晴らしいCSSを二度三度

FirefoxにはStylishというユーザースタイルシートの管理を容易にする拡張が存在する。

これを活用すると、全てのWebサイトを自分好みに調整できるようになる。使ったことがある人にしかわからないが、あまりにも便利すぎて笑いが止まらない。

さらに、StylishとFirebugを組み合わせると、レジェンダリーな構造のWebサイトでさえも5分で裸にひん剥けるので重宝している。

んが、これはあくまでもFirefox用。stylishはどうしようもないが、CSSだけでもOperaで使えるようにできないだろうか。

・・・じゃあ、移植しちまおう。まるっと。

というわけで、stylishで管理しているCSSをOpera用に書き出すスクリプトを試しに作成した。

opelish.ahk

作成した・・・のはいいんだが、問題が。

stylishはCSSをrdfにまとめて保存しているので、そこからurlとcssを地味に抜き出して書き出す。

FirefoxはどのページにCSSを適用させるかを、ドメイン、URL完全マッチ、URL部分マッチの3タイプで選べるが、Operaの場合、ユーザーCSSはドメインまでしか指定できない。

だからといってユーザースクリプトとして書き出すと、確かに好きなページに適用させることが可能になるが、適用されるまでにタイムラグが発生するだけでなく、ページのスクリプトを無効にしているとそもそも動作すらしない。

常にスクリプトをONにしているのなら、あまり問題では無いんだが、常にOFFにしている身としては辛い。

これ以上を望むとなるとproxomitron等と連携する必要がでてくる。できればOpera内で解決したいんだが・・・どうすんべ。

なお、このスクリプトは、とりあえずでっちあげただけの試作品なので、rdfのパースがいけてなかったり、Firefoxでしか適用されないプロパティを放置するなどといった不具合というか手抜きが存在する。登録しているCSS次第では出力すらできない可能性があるので注意してもらいたい。

Info

投稿日: 2007年5月16日
タグ: ahk、css、opera
このエントリの固定リンク: http://diary/log/1534.html
ブックマークに追加する
コメント: コメントを投稿する

2007
0516

Tagsahk css opera

⇧

positon:fixedの代わりにCSS Expressionを使ってみた

以前のエントリでheight:100%がよろしくないのでposition:fixedを使うようにしたいが、IE6は対応していない。ではどうするか。

幸か不幸か当サイトのIEを利用した閲覧者の多くがJavaScriptを有効にしているようなのでCSS Expressionという、CSS内でJavaScriptを使えるというIE限定のウル技を使うことにした。

expression() のまとめ

このサイトを参考に以下のように記述。

body {
filter : expression('');
}
#navi {
position : expression( 'absolute' );
top : expression( body.scrollTop + 10 + 'px' );
}

bodyのやつはチラつき防止だそうで、見事に固定された。もしJavaScript無効なら1カラムで表示。うむ、これでいこう！

・・・と思ったが、また落とし穴が。IE6はheight:100%だろうがexpressionだろうが、要素を固定すると非常にCPUに負荷がかかる。3GHzとかのハイエンドクラスの人は気にならないかもしれないが、ミドルやや下なPCだとかなりもっさりっしゅ。

ってか何故に重いのだ？　右側200pxは再描画する必要無いんだから軽くならね？　って、それはWindowsがやることでブラウザの中の人とはまた別か。んでIE6は無駄な処理が多いと。

さらにマズいことに、このサイトで一番使われているブラウザがIE6で全体の8割。いつぞやから始まる強制IE7化が始まっても減るのは4割程度か？　無視できる数ではない。

あー、レンダリングエンジンが古いのはどうしようもないよな。IE7はしっかり改良されてるから固定しようがFirefoxと同程度なんで全然問題無いんだがなぁ。IE6以下専用でサイドを固定しないレイアウト作るしかないのか。

カドゥケウスZ 2つの超執刀 -攻略術式集-
レイアウト迷走中。一応進展はしてるけど。（見た目はほとんど変わってない）

Info

投稿日: 2007年1月2日
タグ: css
このエントリの固定リンク: http://diary/log/1499.html
ブックマークに追加する
コメント: コメントを投稿する

2007
0102

Tagscss

⇧

CSSによる擬似フレームに潜む落とし穴

まずった。

Opera for Wii（以下Wipera、勝手に略称付け）をダウンロードして早速自分のホームページにアクセス。おお、予想以上にまともっつーか、数ヶ月前にも似たような感覚を覚えたな、とか思いながらカドゥケウスZ攻略ページを開くと・・・上下にスクロールできない。

理由は分かってる。擬似フレームを利用したせいだ。擬似フレームというのはhtmlとbodyにheight:100%とoverflow:hiddenをつけてから中のボックスにoverflow:autoを与えて、さもframeを使っているかのような視覚効果を生み出すCSSウル技の一つ。

この時bodyの高さ=ウインドウの高さになるのだが、そこに問題がある。

基本的に、ブラウザでページを開いた際に真っ先にフォーカスが移るのはbody（htmlかも）要素になる。そして、キーボードの入力はフォーカスされている要素に送られる。

つまり、どういうことかというと、フォーカスを中の要素に移さない限りキーボードでスクロールに関する一切の操作を受け付けなくなる。

OperaかIEで上記のページを開いて適当なチャプターを開いてからPageDownやPageUpやカーソルキーを押してみよう。恐らく一切スクロールしないはずだ。理由は簡単。フォーカスがあるbodyは既にheight:100%でスクロールしようが無いから。

フォーカスを移すには、クリックするのが一番なわけだが、さすがにそれはインターフェース的によろしくない。

各ブラウザともホイールの操作はマウスが乗っている要素に送られるので、幸いにもマウス派には全く問題無いのだが、閲覧者の中にはキーボード派もいるだろう。となると無視するわけにはいかない。

んで、最初に言ったWipera。Aボタンを押してもフォーカスが移動しない。スクロールするにはわざわざスクロールバーを直接弄らなければいけない。他のブラウザならスクロールバーを弄った時点でフォーカスが移るはずなんだが、それも無し。アンカーで移動してもフォーカスは微動だにせず。

ではどうするか。

・・・・・・どうしよう。

PC用ブラウザならJavaScriptを使うことで、ある程度の補助は可能になる。が、JavaScript無効だと手も足も出ない。

Wiperaはフォーカスを移動させることができない。JavaScriptによる補助もたぶん無理。

となると・・・

ざんねん！　わたしのちょうせんは　これでおわってしまった！

あー、レイアウト作り直すかー。

補足

Firefoxは通常の要素にもfocusが使えるので、上記ページではFirefoxのみフォーカスが中の要素に合っている。元々focusはフォーム要素に使うものなんだが、Firefoxが正しいかどうかは知らん。このうえなく便利だが。

Info

投稿日: 2006年12月23日
タグ: css
このエントリの固定リンク: http://diary/log/1496.html
ブックマークに追加する
コメント: コメントを投稿する

2006
1223

Tagscss

⇧