インライン要素と width height プロパティ

　先日作った MagpieRSS による RSS Reader 、ヒマを見ては少しずつプログラムの仕様とデザインをいじり続けています。今後のプログラム仕様と PHP 周りの技術的な「難すぅ～ぃ話」は RSS Reader のページに展開していくとして（外から見ても分かりませんしね）、今回はそのデザインの話です。まぁでもやっぱり「難すぅ～ぃ話」になってしまうんですが(^_^;

先生！こんな症状が起きてます！

　取得記事一覧のページの記事タイトルのみをばばっと表示させる RSS Reader なんですが、見た目からすると以下のようにタイトル部分の横位置がそれぞれずれてしまっています。

　これは日付に使っている "Impact" というフォント書体 *1 が等幅タイプではなくプロポーショナルになっているからで、 *2 日付の文字列によって変わる文字列の幅がそのままタイトルの横ずれになってしまっているという症状です。細かい所なんですけど、ホラ、私は根っからのＡ型っていうことで（笑）

対策はどうしよう？

　今思いつく解決法は、

1. フォントを等幅フォントにする。
2. 構造を表形式 (table) にする。
3. 日付部分の幅をスタイルシート (CSS) で指定して、文字幅に関係なく固定とする。

　1. は折角作り上げた見た目が変わるからイヤ。
　2. にすると携帯電話や PDA で読みにくくなるからイヤ。
　となると、当然 3. になるわけですがこれが不可能に近いといったほどイバラの道となるのでした…

日付表記の幅を固定する

　フォントが別のものに置き換えられたりアイコンが付けられている日付表記ですが XHTML では以下のように書いています。

　これを入れてやれば、CSS の装飾によってブラウザ画面上には

　という表示がなされます。この日付表示の幅を固定するのであれば CSS によって、

　などとしてサイズを指定してやれば完璧じゃん？　と思えますが、ところがどっこいそうは問屋が卸しませんよ。なぜなら通常の汎用インライン要素 (span) は、width や height などによるサイズ指定が出来ない要素だからです。

インライン要素とは？

　インライン要素に対して、ブロック要素というのがあります。インライン要素は簡単に言えば文章。ブロック要素は簡単に言えばその名の通り「箱」。ちょっと乱暴に言うと、全てのウェブデザインはこれら２つのみによって構成されています。

　すべてのインライン要素は、それが入れられているボックス要素の大きさのみによってサイズが決められます。分かりやすく言うと、同じ文章量でも A4 の紙に書くのと A5 の紙に書くのでは行幅と行数（つまりサイズ）が違ってきますよね？　文章（インライン要素）のサイズは紙の大きさ（ブロック要素）にゆだねられたものでなければなりません。そのため、インライン要素に幅や高さの指定をすることはあり得ないのです。

• ブロックレベル要素とインライン要素 （Web標準普及プロジェクト）

サイズ指定が出来るインライン要素、インラインブロック

　しかしそれでは HTML の構造をきちんと持たせたままのデザインがしにくかろうということで、CSS 2.1 から新たにサイズ指定が出来るインライン要素、インラインブロックという考え方が導入される予定です。W3C には以下のように記述されています。

• inline-block, Visual formatting model （The World Wide Web Consortium (W3C)）

This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element.

　この値により生成されるブロック要素は、インライン要素として文章と一緒に流し込み可能な性質を持つ、ブロック要素として機能します。

（かなり意訳 by たけだ＠管理人）

　具体的なプロパティ指定は、

　ですが、今はまだ正式に CSS 2.1 に対応しているブラウザはありませんのでまだ使える手ではありません。

だけど使っちゃった

　何故かというと８割くらいのブラウザに対しては効果あるから。私が試したブラウザは Internet Explorer 6 と Mozilla Firefox 1.5 と Opera 8.5 で、実験結果は以下の通り。

Internet Explorer 6

　インラインだろうが inline-block だろうが、俺ゃそんなの知らんもんねーといった具合に全ての要素でサイズ指定が効く。つまり CSS の解釈はザルだけど結果的には意図する動きをするという、結果オーライな話。つまりダメな子ちゃん。

Mozilla Firefox 1.5

通常のインラインではサイズ指定は突っぱねられる。 inline-block と指定しても width height は効かない。つまりインライン要素として正しい解釈をしつつ、かつ CSS2.1 には未対応であることが分かります。

Opera 8.5

通常のインラインではサイズ指定は突っぱねられますが、inline-block と指定すると効くようになる。Opera は Windows で動くブラウザの中でもっとも先行実装（仕様の先取り）の多いブラウザなので、納得といえば納得。ちなみに CSS 2.1 はまだ草案の段階で、正式に勧告されたわけではありません。

Safari 1.2

現時点では未調査。ですが、これまた先行実装の多いブラウザなので、きちんと解釈してくれている可能性は大です。どなたかレポートを求む！！

　というわけでそれぞれのブラウザが行う処理は様々なんですが、結果的に表示反映されないのは Firefox のみなので、当サイトアクセス解析によるブラウザ比率から考えると、

　なーんだ、８割以上は（経緯はどうあれ）大丈夫なんじゃん！（笑）

まとめ

　というわけで、CSS 2.1 が将来的に各ブラウザに採用されるのを見守りつつ、手は打っておいた上でそれの様子を見るという形で決着が付いたのでした。…内容難しかった？

• *1 Impact は Windows 98 から XP にまで幅広く標準として導入されているフォントです。
• *2 たとえば Impact のフォントを例にしてみると、 1 と M は当然文字幅が違いますからこれを横に並べると例え同じ文字数であっても、
  1111111111
  MMMMMMMMMM
  といったように文字列の幅が大きく変わってくるので、文書の体裁にも影響を及ぼします。これをプロポーショナルフォント(Propotional Font) といいます。逆にこの影響がないフォントも当然ありまして、
  1111111111
  MMMMMMMMMM
  これを等幅フォント(Non-proportional or Fixed-width or Monospace Font) といいます。