CSS

少し前に、とある方から 「Landscape のデザインが好き」というメッセージを頂いた。すごくうれしい。Landscape のデザインがなぜ現在のかたちになっているのか、何を重んじ、何を捨てているか。根本にあるのは、以下で述べる制約だ。

- 制約と誓約

デザインはサイト作成における楽しみの一つだが、悩みどころでもある。これはサイトを作ったことがある人ならわかる。ウェブサイトデザインは少し勉強すると定石が見えてくる。しかし、それをつかんでいない場合や完全に趣味で作ってる場合、あれもこれもと欲張りになりがちになる。結果、芯のない散漫なサイトデザインになってしまう。

マリオを作った任天堂の宮本茂氏は「ファミコンはハードウェアの能力に制約があったからよかった。」と言っていた。制約があったからこそ、ゲーム性の追求に注力できたという。そこで私も制約を課すことにした。

・シンプルにすること。
・仕事場でアクセスしても違和感のない落ち着いたデザインにすること。
・長文記事と短文記事、どちらも読みやすいようにすること。
・必要十分なサイトナビゲーションを設置すること
・迷ったときは、エンジニアらしいかどうかを判断基準にすること。

他にもいくつかあったような気もするけど、大まかな制約としてはこのくらいだ。この結果できたのが今の Landscape だ。配色やレイアウトなどの細かい点についてはまた後日。

「Web ビジネスコンサルタントのネタ帳」に以下の記事が載っていた。
フォントサイズを固定するな！− 後悔しないためのWebデザイン
http://neta.ywcafe.net/000349.html

要するに、ユーザがブラウザの文字サイズ変更機能を使えるようにページをデザインするべきだ、という話。昔からよく言われていることだ。いろいろ反論や個別の事情があると思うが、私も文字サイズは変えられた方が良いと思う。

たとえば、日経 IT Pro の Feed Back などは、ごく小さいフォントサイズに固定されてしまっていて大変見づらい。http://itpro.nikkeibp.co.jp/members/parts/putfeedback.jsp?_P ... こういったサイトを閲覧し、フォントサイズを変えたくても変えられないという経験をすると、自分がページをデザインするときくらいは、フォントサイズを変えられるようにしておこうと思うものだ。

- 文字サイズの変化が極端すぎる (2004-04-27でこの現象については対策済み)

当サイトでも文字サイズはユーザが変えられるようにしてある。どれどれ、確かめてみるか。「表示」の「文字サイズ」の「大」を選んでみる。うん、ちゃんと変わるね。でも、なんだか大きすぎる。「小」にすると、今度は小さすぎる。どうも極端に変わり過ぎなように感じる。前からこんなだったっけ?

- サイズが劇的に変わる理由は?

サイズが劇的に変わる理由を知りたくてウェブを見て回っていたら、たださんがこの件について書いているのを見つけた。

原因はスタイルシートの font-size 属性を em で指定しているからだという。パーセントで指定すると問題ないとのこと。

ただのにっき(2002-12-06) CSS: em単位指定
http://sho.tdiary.net/?date=20021206#p02

<ul>
<li><span>これは通常(無指定)の文字サイズ。ようは100%状態。</span></li>
<li><span style="font-size: 90%;">これはfont-size: 90%;を指定。</span></li>
<li><span style="font-size: 75%;">これはfont-size: 75%;を指定。</span></li>
<li><span style="font-size: 0.9em;">これはfont-size: 0.9em;を指定。</span></li>
</ul>

最後のヤツは、IEで見ると「どこが0.9やねんっ」とツッコミを入れざるを得ないほどひどく小さい。見た目の大きさは75%のとほぼ同じである。なるほど、一部のテーマでツッコミの文字サイズが妙に小さかったのはこのせいか。これはひどいなぁ。

うーん、当たり前だけどマークアップせずに引用すると全然実感がわかない。まあ、直接たださんのページを見る方が早い。

下のツッコミに書いたように、font-sizeをemで指定すると特別ルールが適用されるようなので(原本と和訳)、単に文字サイズを指定したいのなら(IEの実装が正しいかどうかは別にしても)パーセント指定が無難という気はする。

● Yuya (2002-12-06(金) 14:51)
%は高さ基準で、emは幅基準じゃないですかね。（嘘だったらごめんなさい）

● ただただし (2002-12-06(金) 15:26)
高さを90%にした場合と幅を0.9にした場合で、違いがあったら困るような……。
あ、仕様書に「font-sizeにemを使った場合は親要素の値を参照する」って書いてあるなぁ。これか?

● しめりぃ (2002-12-06(金) 15:38)
お気づきの通りemの場合は親要素を参照するので、入れ子式になった場合は非常に小さくなってしまうようです。そしてそれに気づかずにテーマを作ってしまったのは私です。あはん。

そうか、font-size 属性を em で指定した場合は特別な方法で計算するのが原因なのか。で、どんな方法で計算するんだろう?

- font-size を em で指定した場合の特別な計算方法

CSS2の構文と基本データ型 4.3.2 長さ（Lengths）
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/syndata.ht ...

'em'という相対単位は、それが使われた要素の'font-size' の算出値を参照する。例外は'font-size'自身にこの単位を用いた場合で、その時は親要素の'font-size' の算出値を参照する。この単位は縦横の大きさを示すのに用いる（印刷の世界では、この単位をクワタ幅と呼ぶことがある）。

えーと、要するにこういうことか。

margin 属性などの指定に em を使うと、その要素のフォントサイズと em で指定した数を計算して値を導き出す。
しかし、font-size の指定に em を使うと、要素のフォントサイズを決めるのに自分自身のフォントサイズを参照してしまうので、この場合は例外として親要素の算出値と em で指定した数を計算して値を出す。

- 納得いかない

あれ・・・? でも、上記の仕様はブラウザの文字サイズ指定を変えたときに、サイズが劇的に変化してしまう理由の説明になっていないんじゃないかな。「親要素の算出値を参照」って言ってるのに、IE は相対指定そのものを参照してしまっているように見える。

もしかして、私が勘違いしてるのかな。私は CSS の算出値や相対値の概念を詳しく知ってるわけじゃないし、調べてみるか。でも、ねむくなってきたので今日はここまで。続きはまた明日。

やっと時間を作れたのでスタイルシートを調整。右側の直近の記事一覧のところになぜか月の一覧が出たりするのを修正した。

段組に position: relative を使ってみようかとも思ったが、Celeron 500MHz のマシンでは激烈に重くなったのでやめた。マウスホイールでスクロールしようとするとすさまじく引っかかる感じがする。Landscape は今でも結構重い。これ以上重くなると、自分でメモを見返すときにストレスを感じるようになり、メモを書かなくなるおそれがある。それだけは避けたい。

http://www.fromdfj.net/html/column.html
float を使った方法と、position を使った方法を解説。

http://hp.vector.co.jp/authors/VA022006/
html、スタイルシート、色についてのページ。
簡易カラーピッカーはテキストと背景の色あわせに便利そう。
http://hp.vector.co.jp/authors/VA022006/cp/