Firefox ユーザーである（※他ブラウザでもいけます。が、当エントリでは導入方法を紹介していません。追記したbookmarkletだとoperaやsafariなどのブラウザでもすぐにお試しできます）
Firefoxのアドオン「stylish」を入れている。もしくは必要なら入れてもいいって人。
（mixiをPCで使っている場合）右に出てくる鬱陶しいバナーにうんざりしていたり、日記とコミュにしか興味がない人。
お気に入りのブログが、情報源の質には満足しているが左右のアフィリが鬱陶しい点を残念に思ってる人
コンソール（CUI）が好きな人、シンプルなのが好きな人、ぶっちゃけ文字以外用がないのに飾りの画像とかWEBにいらねーよと思ってる人
カラム、２カラムのレイアウトのせいで、目線が左右に移動しないといけないのがイラっとくる人、コードは上から下だけでいいだろって思っている人
- wikipediaも段組みやめてくれよサイドバーうざいよ、デフォルトの白背景色は目が痛いって思ってる人とか特に
リンクテキスト探しがきらいな人、どこがリンクがすぐに知りたい人
背景色が明るいのが目が疲れる人、壁紙も黒にしちゃってるような人、長時間ネットしまくりなんで目が疲れにくいのがいい人
サイトによって極端に読みにくいサイズや色のテキストがあることに普段からイラっときている人

要は、Lynxのようなシンプル Webに世界がなればいいのになと思っている方。

そして、どんなサイトでも目線は左右に動かしたくない！スクロールは上下だけで済ませたい！

と、強く考えておられる方むけの情報です。

何を作ったの？

私はテキストブラウザのLynxを時々使っているのですが、これでサイトを見るとシンプルに見れるのですごく良いんですよね。

ただ、LynxはFlashとか画像が見れないし、マウスが使えないのはいざって時にちょっと不便。

で、Firefoxをテキストブラウザ化できないかなあと、ふと思いまして、思いつきで作ってしまいました。

私めもwebデザイナーやっとるんですが、上記のように、昨今のweb デザインなんて普段はなくていいって思っている奴でして。

仕事じゃ3カラムのサイトとか作りますが自分はそんなん好きじゃないです。色がサイトごとに違うってのも理解できない。

必要なのは情報であってデザイナーのデザインなんてどうでもいいんですよ。

だから2chのシンプル画面とか大好きです。

そんな訳で、どんなサイトでもテキストブラウザ状態で閲覧できるFirefox用の拡張 cssを作りました（やっつけだけど）。

ただ、ニュースサイトで画像が見れないと困る時もあるので、普段は小さなサムネイルで、カーソルを合わせた時だけ大きく表示されるようにしています。

＠このcssはコンセプト実証モデルです。思いつきで作ってるのでちょっと問題もあります。フィードバックとか意見など頂けると嬉しいかも。

＠将来的には、グリモンでjsも組み合わせてもっとコンソールのような感覚でブラウジングできるようにしたい

＠（参考用）私のよく見るサイト・・・ニコ動、wikipedia、スラッシュドットジャパン、2nn.jp（2ch）、mixi、はてなでホッテントリに上がっているブログ各種

ちなみに、こんなん使うな、既にこんないいのあるわいってのをご存知の方は教えてくれると嬉しいです。

それなりに探したのだけど、見当たらなくて・・・だから自作したので。

導入方法について

Firefoxのアドオン「stylish」をインストールします。→　https://addons.mozilla.org/ja/firefox/addon/2108
インストール後、stylishの管理画面を開きます。（Firefox ウィンドウの右下にあるメモ帳っぽいアイコンで右クリック→スタイルの管理）
「スタイルの管理」で「書く」を選択、タイトルはblack-outとかテキトーに入れてください。で、下記のコードを貼付けて保存してください。
どんなサイトでも同じデザイン（コンソールのような画面）になります。なお、いつでもstylishdのメニューでcssの有効／無効は切り替えられますのでご安心を。
テストとして、wikipediaを見てみられると雰囲気が掴めると思います。

/*
 * ----------------------------
 * black-out.css
 * author zamamin.com
 * build 2008.8.09 15:03
 * version 0.0.31
 *  fix @namespaceを書いてなかったので追加
 * ----------------------------
 *
 */

@namespace url(http://www.w3.org/1999/xhtml);

/* 全てのエレメントをリセット */
body,body * {
background-image:none !important;
background-color:#000 !important;
border-color:#333 !important;
text-decoration:none !important;
color:#aaa !important;              /*<- テキスト色 */
font-size:16px !important;          /*<- 文字サイズ */
font-weight:normal !important;
padding:0.15em !important;
margin:0 !important;
line-height:1.25em !important;
text-align:left !important;
text-indent:0 !important;
font-family:Arial,Helvetica,Verdana,'ヒラギノ角ゴPro W3','Hiragino Kaku Gothic Pro',Osaka,'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif !important; 
float:none !important;
clear:both !important;
position:relative !important;
width:auto  !important;
height:auto  !important;

}

body {
background-color:#000 !important;
padding:0.5em !important;
}

body * p, body * div,
body * h1, body * h2, body * h3, body * h4, body * h5, body * h6{
margin-bottom:0.3em !important;
float:left !important;
clear:both !important;
}


/* リンク色 */
body * a,
body * a *{
color:#a50 !important;
}

/* アクセス済みのリンク色 */
body * a:visited{
color:#a50 !important;
}

/* カーソルを合わせた時のリンク色 */
body * a:hover,
body * a:hover *{
color:#0aa !important;
background-color:#609 !important;
}


/* 画像は普段は小さくサムネイル表示。鬱陶しいので薄く表示 */
body * img{
opacity:0.3 !important;
height:15px !important;
width:15px !important;
}

/* 画像はマウスカーソルもっていけば原寸サイズになる */
body * img:hover{
opacity:0.9 !important;
height:auto !important;
width:auto !important;
}


button,
input,
select,
option,
textarea{
 color:#f00 !important;
 padding:0.05em !important;
 height:auto !important;
}

/* テーブルのスタイル */
table{
border:none;
}

table td,
table th{
border:none;
border-right:1px dashed #999 !important;
border-bottom:1px dashed #999 !important;
}



/* for 2ch（暫定） */
body * dt{
font-weight:bold !important;
}


/* 二コ動 */
embed#flvplayer{
height:540px !important;
width:952px !important;
}

既知の問題点というか仕様

ごちゃごちゃしたサイトに出くわした時に、必要に応じて使う、というのを想定しています。どんな時でも使える万能cssではないです
mixiの日記投稿のように、文字入力に関してはあまりメリットはないです。view専用のcssと考えられるとよいかと。
windowsではメイリオの入っているvista機やxp機がおすすめです。macは、まぁとりあえずこのフォントでいいかなとテキトーにやっています（一応、macとwin両方で閲覧テスト済み）
objectやembedタグのあるサイトでは、objectやembed部分が変になるかも。今後の課題。ニコ動だけ特別対応させています。
リンクカラーがオレンジなのは映画イノセンスのオレンジ色の画面が好きだったから
スタイルを何もかも破壊するのでfirebugもおかしくなります

update

2008.8.10 21:05
- @namespaceを書いていなかったので追記。ありがとうございました。 -> http://pc11.2ch.net/test/read.cgi/software/1216790587/553

Permalink | 記事への反応(2) | 11:36

2007-07-16

■Vistaの良い点・悪い点

ひょんなことから（古いマシン壊れた……orz）Vistaを使い始めて、そろそろ1ヶ月になる。Vistaの良い点・悪い点が分かってきたので、ここに書く次第。自分のブログは放置中なのだ。

良い点

メイリオ素晴らしい！！！

すげー見やすい。目が疲れづらくなった気がする。あまりにも素晴らしいので、エディタのフォントもメイリオ（meiryoKeGothic）にした。文字を打つのが気持ちいい。「ＭＳＰゴシック」なんて、今見ると滅入る。

フォントはMacの方がまだきれい、と言う人もいるが、謎。メイリオ + Clear Typeの方がどう見てもきれいだと思うが……。Macのアンチエイリアス（というか、一般的なアンチエイリアス）で日本語を表示すると、ぼんやりしていて見づらい。

メイリオはXPでも使えるが、それはどーなんでしょーねー（棒読み）。

デザインが良くなった

XPのあのデザインから比べれば、Vistaのデザインは大幅に良くなった。が、Macには遠く及ばず。デザインに統一感が無いのが気になる。これはもう社風かもね。

その他

あとはたいしたことじゃないので、箇条書き。

タスクバーやAlt+Tabでサムネイルがでる（普通に便利）
スリープがついた（ご飯食べるときとかに使ってる）
エクスプローラーのアドレスバーが進化している（見やすい・階層上がるときに便利）
リアルタイム検索がついた（が、私はローカル検索をほとんどしない）
サイドバーがついた（が、私は使ってない）

あ、それからもうひとつ。発売当初のOSにありがちな不具合みたいなものには、1度も出会ったことがない。Microsoftがんばった。

悪い点

マシンパワー食い過ぎ

私は最新のデスクトップマシンを使っているので、重いと感じたことは一度もないが、XPからアップグレードした人は重いと感じるかも。ノートは知らん。

対応していないソフトがある

が、それは意外と少ない。ってか、大抵いける。私は40くらいのソフトを入れたが、動かなかったのはスタンドアロン版のIEだけだった。互換性を維持するためにかけたコスト、現場の苦労を思うと、泣けるぜ。

ただし、ソフト自体は動くが、スクロールホイールがうまく効かない、というケースが結構ある。これはわりとストレスなんだが、特殊な現象かもしれない。ググっても情報が出てこないので。

エクスプローラーがお節介

エクスプローラーのアドレスバーは進化したが、本体部分は使いづらくなった。フォルダ内のファイルによって表示モードを切り替えるようだが、それはお節介というもの。

その他

ダイアログうざい（UAC切った）

良い点と数が合わないが、他に悪い点は思い当たらなかった（あんまり細かいことは除く）。

結論

OS単体としてみれば、VistaはXPから向上している。しかし、その向上幅は意外とせまい。で、狭い向上幅の割に、マシンパワー食い過ぎじゃない？という疑問が残る。

というわけで、メイリオを違法に使うという意志があるならば、同じマシンでXPからVistaに乗り換える利点はほとんど無い。デザインは着せ替えができるしね（そういえば、これは合法なんだろうか）。

また逆に、新しいデスクトップマシンを買うのであれば、Vistaで構わない。無理やりXPのマシンを探したり、ダウングレードする利点はほとんど無い（必須のソフトが不運にも対応していない場合くらい）。ノートは知らん。

Permalink | 記事への反応(0) | 22:42

2007-05-06

■テキストエディタのフォントにこだわりが在る人集まってくれ。

何のフォントを使っているのか教えてくれないか。

メイリオに変えたらガラっと変わって驚いている。

Permalink | 記事への反応(0) | 16:50

2007-02-22

■実装ではなく趣旨を理解しよう

*{ margin : 0 }はもう古い！？ | Emotional Web

はてなブックマーク - *{ margin : 0 }はもう古い！？ | Emotional Web

はてなが酷い。

はじめに

base.cssとかcommon.cssとかを書いて読み込ませるのは、何のためだったか考えてみよう。古い新しいの問題じゃないと気づくだろうか。少なくとも、レンダリング時間なんて完全に後付けだと洞察できるはずだ（あなたたちはjs大好きだよね）。

さて、真っ新なとこからCSS書いてくとき、どんなデザインにしろほぼ毎回指定する要素が出てくる。a img{border:none;}とかhtml,body{margin:0; padding:0;}とかだ。それなら始めにa img{border:none;}とかを羅列したファイルを用意しておけば、余計な手間が省けるじゃないか。たぶん根本の動機はこんなとこだろう。

それがいつの間にかデフォルトで適用されるスタイルをキャンセルするっていう方向へ迷走し、*{margin:0; padding:0;}なんて表現が生まれた。この指定は言うまでもなく有害で、著名なのはフォームのボタンが縮こまったり、liのネストが判別できないなどの副作用が生まれる。あまりにもすべてがキャンセルされるため、わざわざひとつずつ要素のスタイルを定義しなければならなくなって、ファイルサイズは増え可読性は下がり、冒頭で言うようにレンダリングにも時間が掛かるようになる。FireBugがない時代、この要素のスタイルはどのファイルのどの部分で指定されてるのか調べるのは本当に大変だった。*.cssをgrepしたとしても、単にul li{}とか書かれてるのがカスケーディングしてたらお手上げ。

これらのデメリットを認識したとき、はて*{margin:0; padding:0;}のメリットはなんだろうと考える。あ、特にないよね。じゃあやめよ。←いまここ

こんなのは実際にCSSを書いてたら気づくことだ。海外とか時代とか関係ない。元記事の趣旨は「*{margin:0;}は古い」じゃなくて「どんなCSSが効率的か Part2」だ。レンダリング重いから*{margin:0;}やめようなんてコピペ脳丸出しじゃ、いつまで経っても効率的なCSSなんぞ書けんよ。

＊原理主義者が「（例えば数十年後にリリースされた）UAがどんなスタイルを適用するかわからないので、最初にリセットするのは永続性完全性の観点から意味がある」と言うけども、未知のUA（というかデフォルトスタイル）まで考えてCSSを書くのはあまりに大変だ。それに、そんなことになれば、たぶん、compat.user.cssみたいなのが流行るはず。デフォルトスタイルに頼った表現がしょせん実装依存なのは認めるけど、ちょっと非現実的すぎるので、考慮から外させてもらう。俺はいま実務の話をしたいんだ。

じゃあどんなのがいいんだよ

で、元記事では、じゃあどんなCSSがいいのかって点がついで程度にしか触れられていないので、俺なりに考えてみた。

a img{border:none;}

これは外せない。aの中のimgにborder付けたいってほうがイレギュラーなので、わざわざa.logo img{border:1px solid #333;}なんて書き直すのも苦にならない。例外には手作業でもって対応すべき。

html,body{margin:0; padding:0;}

ほとんどの場合、隙間を空けたいよりも隙間を空けたくない。キャンパスはフルに使いたい。

印刷時にはそうでもないので、@media print {body{padding:1cm;}}なんてのがあってもいいけど、それはまた別の話。あとそういうのは印刷するユーザー側で指定すべきだとも思う。理想論だけど。

*{font-style:normal;}

lang="ja"な文章において斜体は不要。どうせあなたはemとかaddressとかにfont-style:normal;付けるんだから。

pre,code{font-family:monospace; white-space:pre;}

preやcodeがsans-serifだとイラっと来ますよね。

これは絶対やるな

やられるとイラっとくるもの。個人的。

body{font-family: "MS Pゴシック";}など

俺はページをメイリオやヒラギノやM+ FONTやVLゴシックで見たいんだよ！　お前の趣味を押しつけんな！　あと最後に一般名（sans-serifとか）くらい書け！

でもpre.2ch-ascii-art{font-family: "MS Pゴシック";}なんてのはやさしさが溢れていてとても好ましいと思う。部分的にfont-family指定するのは別にいいけど、全体のデフォルトフォントをいじられるのは不愉快でしかない。

pre{overflow:auto;/* or scroll */}

まあ仕方ないのはわかる。解決法も知らない。けどホイールでスクロールしてるとき興味のないサンプルコードで引っかかるのはとてもムカつくんだ。俺は君のサイトが崩れてるかどうかより、いつも通りのスクロールに関心がある。

pre以外にグラフィック目的でoverflow:auto;を指定するのは論外。

まとめ。そうねえ。

「CSSは個々人のスタイルを反映してるということでしかないんじゃないの」

「そうですね」

Permalink | 記事への反応(2) | 21:46

2006-12-10

■Font

プログラミングにはConsolas、それ以外ブラウザなどはTarisakaかメイリオ

Permalink | 記事への反応(0) | 15:44

2006-11-20

■[ピコピコ]http://anond.hatelabo.jp/20061119161651

[゜π゜]　＜メイリオ

[゜π゜]　＜アノコ　キレイナンダケド　ドコカ　ボンヤリシタトコロガアルノヨネー

Permalink | 記事への反応(0) | 01:50

「メイリオ」を含む日記

■やばいメイリオが美しすぎる

■メイリオの

■日本語が不自由

■メイリオってFireFoxとIEとで行高が変わるのかぁ

■Firefoxをテキストブラウザ化するcss作った【黒画面】【コンソール】

2008.9.28 12：53 追記

2008.9.13 23：30 追記

2008.8.10 22：29 追記

当エントリは、下記の方におすすめの情報でございます。