「Helvetica」を含む日記

はてなキーワード: Helveticaとは

2024-08-27

■Hatelabo::AnonymousDiary

Hatelabo::AnonymousDiary

Permalink | 記事への反応(0) | 23:58

2024-03-25

■UD デジタル教科書体のバリエーション

Windows10 以降のWindowsに標準搭載されるようになった「UD デジタル教科書体」というフォントがある。游ゴシックに並んで書体が美しいフォントで、そこらへんのチラシや張り紙などで濫用されているのをよく目にするだろう。

だがUD デジタル教科書体はバリアントが6種類もあって、それぞれがどんなフォントなのかわかりにくい。Word でバリエーションを選ぼうとすると、一覧にはこんな風に並ぶ。

UD デジタル教科書体 N-B

UD デジタル教科書体 NK-B

UD デジタル教科書体 NK-R

UD デジタル教科書体 NP-B

UD デジタル教科書体 NP-R

UD デジタル教科書体 N-R

フォント名を単純に昇順で並べただけで、バリアント順になっていない。これでは何がなんだかわからないので整理してみよう。

書体名	和文	欧文	ウエイト
UD デジタル教科書体 N-R	等幅	等幅	標準
UD デジタル教科書体 N-B	等幅	等幅	太字
UD デジタル教科書体 NP-R	等幅	プロポーショナル	標準
UD デジタル教科書体 NP-B	等幅	プロポーショナル	太字
UD デジタル教科書体 NK-R	プロポーショナル	プロポーショナル	標準
UD デジタル教科書体 NK-B	プロポーショナル	プロポーショナル	太字

各バリアントは

（和文／欧文）×（等幅／プロポーショナル）×（ウエイト）

という順列組み合わせになっていることがわかる。

どれを選べばいい？

基本的には「NP-R/B」一択。

日本語の文面は等幅フォントが読みやすく、英文・英単語はプロポーショナルフォントが読みやすいからだ（メイリオや游ゴシックなどもこの組み合わせである）。その組み合わせの NP ひとつでオールマイティにいける。

なお、和文に強いてプロポーショナルフォントを使う場面はなく、せいぜい見出しやタイトルなどの短いセンテンスや、UI 部品のメニューなどスペースが限られる用途などに限定して使うべきだろう。

また、英語の等幅フォントも同様で、桁が揃っていないと見にくい表の数値や、プログラムのコードくらいしか一般的には使い道がない。

つまり「N」や「NK」の出番はほとんどないのである。（誤字訂正しました。指摘サンクス）

繰り返します。UD デジタル教科書体は NP-R/B 一択です。

ちなみに、はてな匿名ダイアリーをWindows 環境で閲覧すると、本文の表示には「Meiryo UI」が使われています。この書体はOSのUI用に作られた省スペースフォントで、文字幅を強く圧縮した独特の形状をしています。ファイル名やメニュー項目を表示するには省スペースで重宝ですが、ブログの本文などの長文を表示するような用途にはまったく適していません。ごちゃごちゃと詰まっていてとても読みにくいです。こんなもの、普通は読みものコンテンツの最優先フォントに使ったりはしません。

なぜこんなことになっているのか、スタイルシートを読み解いてみましょう。

font-family: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Noto Sans JP", sans-serif;

まず先頭に "system-ui" という総称フォントが書かれているのが噴飯ものです。

総称フォントとは「指定された固有フォントがひとつも見つからなかった時に最後の手段として代替できるような一般名」のことで、本来はフェイルセーフとして font-family 値の末尾に書き添えます。ブラウザは総称フォントに対しては必ず何らかのフォントを割り当てていますから、どう転んでも何かのフォントは見つかり、最低限の表示が保証されるわけです。

ところがそれを先頭に書いたりしたら一発でフォントが見つかって、それ以降のフォント指定は読み飛ばされてしまいます。system-ui の後ろのカンマ以降の情報は実質的にただのゴミです。書く意味がありません。

なぜこんなスカタンなフォント指定になっているか、だいたいの想像はつきます。

system-ui, -apple-system, BlinkMacSystemFont

このフォント指定は、MacOS 付属の「San Francisco」という粋なフォントを呼び出す裏技として一部で流行していた方法なのです。すごく使いたかったんでしょうね、San Francisco を……。

しかしMacOS以外のOSでも、system-ui にはそのOS固有のフォントが割り当てられています。Windows の場合は長文の表示にまったく適さない Meiryo UI だった、というわけです。

どっちみち San Francisco は記事内の半角英数記号くらいにしか使われませんが、Windows の和文表示をすべて台無しにしてでもそうしたい何か強い理由があったんでしょうか。私には合理的な理由は思い当たりませんが。

Permalink | 記事への反応(10) | 12:31

2022-12-04

■

Hatelabo::AnonymousDiary

Permalink | 記事への反応(0) | 19:33

2021-10-19

■anond:20211019200228

等間隔美しく並ぶhelvetica

狂い出してゆく

Permalink | 記事への反応(0) | 20:05

■anond:20211019195834

アライArial？

ちがうのだーヘルベチカ Helveticaだよ

Permalink | 記事への反応(2) | 20:02

2021-04-01

■吉田vs増田

吉田吉田吉田吉田吉田吉田吉田増田吉田吉田吉田吉田吉田吉田吉田増田吉田

さて、増田は何個？

これ編集中に増田が吉田になるってことは、フォントいじってんのか。

font-family: "JustKidding",system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Sans","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","Noto Sans JP",sans-serif

だとよ。

Permalink | 記事への反応(2) | 13:29

2020-11-19

■フォント 指定にArialと書くな頼むから

ArialはHelveticaの劣化コピーで表示はガタガタ、読みづらい。

そもそも日本語サイトでArialやらHelveticaを指定するな。

英数字とそれ以外の太さがバラバラになって大変に醜い。

頼むからfont-family: sans-serif とだけ書いておいてユーザーに選択権を渡してくれ。

おいGoogle、おいはてなブックマーク、お前らのことだよ！

Permalink | 記事への反応(2) | 00:50

2020-03-17

■anond:20200317104040

まえ

-apple-system-font,
Helvetica,
Arial,
"ヒラギノ角ゴ Pro W3",
Hiragino Kaku Gothic Pro,
sans-serif

いま

system-ui,
-apple-system,
BlinkMacSystemFont,
'Helvetica Neue',
'Hiragino Sans',
'Hiragino Kaku Gothic Pro',
'ヒラギノ角ゴ Pro W3',
'Noto Sans JP',
sans-serif

Permalink | 記事への反応(1) | 10:52

2019-09-04

■anond:20190904163638

俺はHelveticaつかってるよ

Permalink | 記事への反応(0) | 17:13

2019-08-17

■anond:20190817145930

Helvetica好きなやつは無印好き

普通すぎて存在が増えるワカメと一緒だよな

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

2018-12-02

■10大すごい欧文フォント

10大すごい欧文フォントって何だろう。

・Helvetica

・Times

・Futura

・Garamond

・Arial

くらいしか思い浮かばない。

Permalink | 記事への反応(0) | 09:21

2017-06-01

■http://anond.hatelabo.jp/20170601122751

俺は意識高い系だからこういう質問には「Helvetica以外に美しいフォントはない」って早口でいうようにしてる

メイリオ

Permalink | 記事への反応(1) | 15:37

2016-09-10

■ドラえもん のび太のはてな 漂流記

う゛ぇ～～～～ん，ドラえもーーーん！

どうしたんだい，のび太君？またジャイアンに虐められたの？

違うよ，そんなんじゃないよ．これ見てよ，僕の渾身の記事にせっかくブクマが付いたのに，「小学生が書いてんのか？」「大脳が壊れたメンヘル」「プリントアウトして病院へ」って叩かれるんだよ～

どんな記事書いたの？

「僕がおすすめする読まないと人生損する漫画ベスト3!!!」

若干煽り気味だけど（小学生のくせに何言ってんだ），そこまで悪くないんじゃない？何で叩かれたの？

コメント見てると，1位「ワンピース」が気に入らないみたい．でもそんなのおかしいよ．

僕が今一番大好きな漫画だし，好きな人も多いはずだよ？

う～ん，まあ，有名だし，みんな知ってるからねえ．みんな自分が知らない新しい情報が知りたいんだよ．．

なんだよ，こいつら！僕が善意で教えてあげてるのに！叩きやがって

しかも君の記事見てると，漫画の画像を勝手にうｐしているじゃないか，著作権違法で怒られるよ．．

大丈夫だよ，僕小学生だし

え・・（なんだこいつ）

それより，ドラえもん！新しいネタを考えたいからさ，誰にも邪魔されないような道具貸してよ

また？いい加減やめればいいのに．．ブログより楽しいこと，もっといっぱいあるよ？

嫌だ嫌だ！田舎で暮らしながらブログを書いて，ブログ収入で静ちゃんを幸せにするんだ！

また現実味のない夢みたいなことを．．（聞き分けがないなあ）

しょうがないなあ，はいつ「石ころ帽子」

サンキュー，ドラえもん．

ガチャッ　のび太―，お使い行って・・，あらドラちゃんしかいないの？じゃあいいわ．

にししし，ママ気づいてないみたい．じゃあ僕は裏山行ってくるね．

―― 空き地

あ，スネ夫とジャイアンが野球してる．

二人には見つかってないね，よかった．

スネ夫の奴，今日はなんなんだよ「ボクちゃんのブログは3人用～」だなんて！

共同執筆なんてもっとできるだろうに．僕のブログも馬鹿にして！思い出しただけで腹が立つ！

大体，金かけて気取ってるんだよなあ，

独自ドメインがあって，wordpressに自作テンプレートを作ってもらって，

フォントは，web フォント用のHelvetica にモリサワフォントだなんて．．そんなの勝てるわけないじゃないか！

いいんだ！僕には無料の Google Noto Sans があるからいいんだ！スネ夫のブログなんてロード容量重くしてPVが減ればいいんだ．

僕は，記事の内容の質でスネ夫のブログなんて打ち負かしてやる！

あ，静ちゃんが向こうから歩いてくる

シャーーーーーーーーーーーーーーー

おーい！静ちゃn　

ガン！

え？

車に轢かれた！？

やばい！石ころ帽子を被ってたんだ．．

誰か助け――　グシャ

――22世紀

？？「――！あれ？」

？？「突然，有名ブログの記事だけでなく，ブログ自体が消えた，どういうこと？ログすら残ってない．．こんなことって．．」

カチッ

？？「大変！はてなが中身のない記事ばかりで溢れてる！このままではいつも以上に荒れ続けるわ！」

？？「わたしの好きなブロガーさん．．も消えているわ，まずは彼のところへ行ってみましょう． id:nobinobi さんのところへ――」

予告：

監督：細田守

主題歌：ゆず

（主題歌が流れながら）

ここがネットの海さ．．のび太君（ホモボイス）

へぇ～，ネットの世界って白いのね

互助会共和国？

ボクちゃんのブログがやっぱりナンバーワン！

パンチカードってなんだ？うまいのか？

？？「ジャイアンさんの歌声をフーリエ解析してその周波数成分を取り出せば，あるいは．．」

伝説の増田．．さん？

奴は『RAID0』にいる．．！（ホモボイス）

ドラえもんの処理が重すぎる？なら，ぼくが並列処理を書くよ！

大脳が壊れたメンヘル共め，スターはくれてやる，だがこの世界は私の記事だけでいいのだ！（運昇ボイス）

ぼくたちがネットの秩序を取り戻すんだ！

互助会が正しいか間違っているかなんて，僕には．．．わからないよ．．

――のび太君，君は本当にこの世界が必要だと思うかい？（ホモボイス）

『ドラえもんのび太のはてな漂流記』

ネットの海で一人死んじゃうなんて寂しぎるよドラえもぉーーーーーーーーーーーーん！！！！！

20XX年8月公開予定

今前売り券を買うと，カラースターキーホルダーが貰えるよ！（※色は選べません）

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

2016-04-08

■東京オリンピックのエンブレム

Bがいちばんマシだと思う。

Aの市松模様とDの朝顔はコンセプトがよく分からない。

市松模様のデザインを見る外国人は、なぜチェック模様なのか困惑するだけだろう。

朝顔は日本や東京とどう関係があるのか日本人ですらよく分からない。

特にD朝顔のデザインはゴチャゴチャして無駄に複雑すぎる。

このようなデザインは小さな商品にプリントすると潰れて見えるし、低品質な紙媒体に印刷するとインクが滲んだりするかもしれない。

スポンサーの商品や様々なメディアで広く使われることがあまり考慮されていないようにみえる。

Cは北京オリンピックのエンブレムを複雑にした劣化バージョンみたい。

赤とか緑とか原色の色使いがハレーションを起こしそう。

白黒で印刷した時に濃淡で色を区別できにくそうな配色。

文字の縦横の大きさやカーニングのマヌケ感が気になる。

TOKYO2020はHelveticaなのにParalympicGamesの文字は別の斜体フォントを使ってるチグハグ感にも納得行かない。

とにかく個人的にCはパッと見てすべてダサい。

というわけで、Bも少し複雑だしグラデーションが余計な要素だが消去法でBを選んだ。

これらの候補を並べてみると、佐野研二郎のデザインはかなり考え抜いた秀逸なデザインだったことが分かる。

Permalink | 記事への反応(0) | 23:17

2015-09-02

■佐野研二郎 先生を罵倒してるネットの屑どもへ

いい加減腹立ったので書いておく。

内部資料用に拾ってきた画像使って何が悪い。

内部資料だぜ？

それを勝手にクライアントであるノーパンしゃぶしゃぶ武藤が外に出したのであって、佐野先生は内輪で使うためにあれを用意したに過ぎないわけ。

お前らだってツイッターのアイコンは適当に拾ってきた画像だろ。

コピーライトを削った？

それがどうしたんだよ。お前らが使ってるそのどこかで拾ってきたアニメ調の壁紙、画像検索にかけてみろよ。コピーライトなんか余裕で削ってるぜ？　みんなやってんだよそれくらい。画像まとめサイトや壁紙配布サイトの管理人がやってることを、日本のトップデザイナーであり年収５億を誇る佐野先生が東京五輪のエンブレム選定という世界規模の大仕事のプレゼンでやっちゃいけないのかよ。なんだその差別。

拾ってきた画像使って何が悪い。

大体、アートの世界ではネットで画像を拾ってくるっていうのはごく普通のことなわけ。

例えば若手の一流アーティストであるカオスラウンジ。

海外のド素人が作ったキメこなを、東浩紀先生も絶賛する梅沢先生がアートに昇華させたわけで、ありがとうございますと涙を流して感激するならともかくパクリパクリって頭どうかしてる。

画像は使います！使います！それ以上のコミュニケーションはないです。
ネットにある画像はフラットだから全部使う。使うことにごめんねはない。
ネットにある画像はサンプリングしていきます。
その結果として体力のないコミュニティが潰れてもしょうがない。
ネットにあるものは全部僕らの素材ですからそれ掠めとって芸術作品として世に出しますよ。
（黒瀬陽平『カオスラウンジ宣言』UStream内の発言より）

梅沢先生はなぜか「自分はコピペでやりくりしてるから」とか卑屈なこと言ってて、黒瀬先生はノーコメントなのが残念だけれど、藤城先生は佐野先生の全面擁護を展開、ネット民は今すぐ首吊って死ねとツイートされていて本当に心強い。

アーティストってのはインターネット上の素材を自由に使い、編集する権利を持ってるわけ。どうもそれを理解してないゴミどもが多くて困る。

そもそもド素人がパクリパクリうるせぇんだよカス。

構図が似てたらパクリとかアホか。

んなこと言ったらArialはHelveticaのパクリか？

FAIRYTAILはワンピースのパクリか？

コンプライアンスはマルドゥック・スクランブル外伝のパクリか？

ArialなんかaだけでHelveticaとの違いが一発で分かるし、FAIRYTAILは作家名を見れば一発で違うと分かるし、コンプライアンスは漫画であって小説じゃないから一発で違うと分かる。

永井先生もおっしゃっているとおり、教養もない大衆にはコンセプトの違いが理解できないんだろう。お前ら大衆はブルーヌードを見て「なんだこれオランピアのパクリじゃねぇか！」と喚き立てるわけだろ？　あのコンセプトの違いが見て分からないとかほんと残念な目をしてんな。

しかも迷惑メールを送りつけるとか、恥を知れよ。

佐野先生はもう十分社会的制裁を受けてるだろうが。

迷惑メールなんぞフィルタで自動削除だろとか考えてんのか？

メッセサンオー事件の被害者のことを考えれば鼻糞未満の被害だろうがとか考えてんだろう。人間として最低だなお前ら。

さらに佐野先生が公開した写真をネット上に晒すとか。

佐野先生が公開した写真を断りもなく、その引用元も明記せずに勝手によそで晒し、配布するっていうのは非常識としか言い様がない異常な行為で、まともな人間のやることじゃない。

あれは佐野先生の著作物だろうが！

佐野先生に許可とれよ屑どもが！

フリー素材じゃねぇんだぞ！

ツイッターや2chで佐野先生の悪口が連日書かれている状況とか、まさに「人間として耐えられない限界状況」だと思う。カオスラウンジの黒瀬先生は何も気にすること無く今日も美術学校講師としても活躍していらっしゃるし、鳩山元首相とか元気ハツラツとしてツヤツヤしていらっしゃるけど、ネット炎上が人を確実に死に追いやる行為だということをお前らは自覚した方がいい。

お前らのやってることはまさに現代の魔女狩りなんだよ。

魔女が他人の作ったものを剽窃して金と名誉と社会的地位を荒稼ぎしていたことが露呈したからといって、狩っていいって話にはならねぇだろ。正義ヅラしやがって。正義の反対は悪ではなくまた別の正義なんだよ。魔女の正義を理解しろよ。金のない貧乏人が僻んでんじゃねぇ。

加えて家族への攻撃とかほんと論外。嫁はミスターデザインの広報担当でトートバッグの件は部下に責任があり悪いのは全て部下です佐野は関係ありません悪いことは全て部下がやりましたと言っただけで今回の問題とは無関係な全くの善人であることは明白だろうが。

だいたい、お前ら佐野先生が自殺したらどう責任をとる気なの？

お前らだってSTAP事件の笹井先生のことを毎日思い出しては「やり過ぎてしまった、人の命は地球より重いのになんてことをしてしまったんだ」と悔やんでるだろ？　それをまた繰り返したいのか？

集団で個人を叩いて面白いか？　どうせお前らは集団で叩かれた側の人間だろうが。いじめはダメだって習わなかったか？　不正な手段で金と地位と名誉を少々得たからって、それはいじめる理由にならねぇだろうが。とはいっても先生の財産は半端ねぇし、なんぼでもやっていけるだけのコネも持ってるし、お前らがギャーギャー喚いたって痛くも痒くもねぇけどな。東電元社長の清水さんとかあれだけお前らが槍玉に上げたけど、結局今でもバリバリ現役だからな。慶応評議員にも立候補したし。

佐野先生よりもっと悪い奴がいるはずだって意見がある。それは一面的には分かる。でもそれじゃ佐野先生も悪いみたいじゃないか。佐野先生は悪くない。コピーライトを削って100万ぽっちを稼ぎ、五輪エンブレムのデザイナーとしての地位を得ようとしたこと、それは業界の闇と陰謀によって佐野先生がやらざるをえなくなってしまったことだというのは誰が見ても一目瞭然で、佐野先生は完全に被害者なんだ。9/1付けで写真の権利者が佐野先生からコンタクトがないことを明かしたけど、その程度の不手際を責めるのは明らかに不当だと思う。佐野先生のところは担当者がいつも不在なくらい多忙なんだよ。お前ら家に引きこもってるニートとは違うんだよ。

私は佐野先生を全面的に支持します。

Permalink | 記事への反応(1) | 22:15

2014-11-20

■スライドの作り方のコツ

http://zemilog.com/article/intelligible_design_for_presentation

これ見たんだけど、「絶対に抑えたい5つのコツ」とかいいながらスライドを見せてるけど、

最後のスライドが見やすいのはそれらのコツが全く関係ないということに

コレ書いてる人も気づいてないのか？

1. フォントを選ぶ

に関して言えば余程変なフォントを選ばない限り変わらない。まあ、無難なHelveticaとか使っとけ、っていう程度なら分かるけど、大概デフォルトで良い。

余計な事して変なのを選ぶからおかしくなるだけ。

2. 行間をとる

これもデフォルトのテーマでOk。コツもクソもない。

3. 余白をとる

まあ、ぎちぎちまで書くのはどうかと思うが「十分な余白」ってどれくらい？スライドが全部映らない様な

ところならそもそもまともにスライド見れないのでどうでもいい。

4. 揃えて、グループ化する

物によるとしか。特に左のはタイトルページじゃないのか？読みにくいのは最後に書くけど変な所で区切ってるからってだけ。

右のも変なところにそんな線入ってたら邪魔としか言い様がない

5. コントラストをつける

てかタイトルの方は最初から文字の大きさとか色々違うじゃん。。。

後、その薄い青は会場によっちゃ見えない、少なくとも見づらい。

スライドの端まで書くのはやめよう、とかよりよっぽど重要だろ。。。

で、最後のスライドは確かにそれまでのに比べてちょっと見やすいけど、

それは上の5つのこつは全く関係なく、単に文章の区切りの良い所で改行してるから、に過ぎない

右の方なんてリスト内の改行後には先頭を揃えるとかまでしてるし。

なんなんだろう？名前入った資料だから自分で作ったんだろうけど、

それともここに載せた人はまた別の人でその人が勘違い？

世の中のコンサルとかこういう適当なのが多いんだろうな。。。だから結局同じ様に言われたことをやっても何も上手くいかないとか。

本人すら何が良かったのか理解してないんだから、そりゃそうだよな。。。

Permalink | 記事への反応(0) | 00:19

2014-02-14

■http://anond.hatelabo.jp/20140214110006

Helveticaだけでデザインしていいんだったら2000円でもArial（あり得る）が。

Permalink | 記事への反応(1) | 11:04

2008-08-27

■変な名前の会社は多分損してる

ぶっちゃけ、社名で絶対こことは仕事したくねーって会社がある。

偉そうとか、損してるのはおまえだとか言われそうだけど、生理的に受け付けない名前ってのがあるのよ。

仕事を選べる立場にある人、つまり能力の高い人は、とくにそうだと思う。

極論、変な名前の会社には、仕事を選べない能力の低い人が集まることになると思うのよ。

だから無難で口に出して恥ずかしくない名前つけときゃいいのよ。

とりあえず、Helveticaつかっときゃいいやみたいな感じで。

Permalink | 記事への反応(1) | 14:01

2008-08-10

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

2008.9.28　12：53　追記

★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★

公式サイトを開設しました。
デモ動画、マニュアル付きダウンロード・パッケージをご用意しております。
当エントリより下記の公式ページより情報を得られる事を強く推奨いたします。
- http://zamamin.org/labs/black-out

★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★

_________________ここから下は古い情報▼__________________________________________________

今、自分のブログをスクラッチしているので、こちらで。→2008/9/28　スクラッチ完了！BLACK-OUT.CSS公式ページ

作りました

【black-out.css】

2008.9.13　23：30　追記

wmtg.net ドメイン失効に伴い、zamamin.comに変更

2008.8.10　22：29　追記

bookmarkletを作りました！！Firefox以外でも手軽にお試し頂けます。
- 　http://anond.hatelabo.jp/20080810224028

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

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

「Helvetica」を含む日記

■Hatelabo::AnonymousDiary

■UDデジタル教科書体のバリエーション

どれを選べばいい？

（余談）増田のフォント

■吉田vs増田

■フォント指定にArialと書くな 頼むから

■10大すごい欧文フォント

■ドラえもん のび太のはてな漂流記

■東京オリンピックのエンブレム

■佐野研二郎先生を罵倒してるネットの屑どもへ