いつか読みたい、で悪戦苦闘。

いや〜まいったx２。

まったくイメージ通りに画像と文字がはまらなくて。どうしても文字が画像の横に回り込まない。いろんなサンプルを見ても、pタグの中にimgと文字を並べてfloat:left(またはright）掛けてるだけなのに。

本文に写真を入れる時はすんなり文字が回り込むので、余計わからない。

結局、imgとpを分けて、さらにpはdivで囲って、そのdivの中にfloat:leftを入れ、imgと(pの入った)divが２つ並んで入るようにwidthを調整（imgを50%、pのdivを45%）したらようやく入った。

それからline-heightが19.5pxになっていたため（どこで指定されたものかまでは調べていない）、行間がかなり離れてしまっていたので、line-height:100%にしてみると、ちょうどいい感じになった。これをfirebugで見ると10.4pxになっていた。1や1emでも同じ効果になるようで、最終的に1.2と書いておくことにした。

ここまで来るのにfirebugでいろいろ値を調べまくったが、使い方がいまひとつ分かっておらず、cssも結局何がどんな値で適用されているのか、見方が分からず、そこでかなり悪戦苦闘したが、「HTML」ビューにしたときに右側に表示されるペインの「累積」を選ぶと累積された結果としてのcssの値が確認できるようだ。累積という表現がピンと来なかったが、他に良い表現も今思いつかず。とにかくこれがあって良かった。ものすごく助かりました。

それにしてもcss、一時（いっとき）ある程度覚えたものの、一瞬の出来事だったので、なかなか馴染めないが、これも悪戦苦闘して見ていると、馴染んできてあまり頭に来なくなる。でも折り返しひとつ苦労するってどういうこと？とつい嫌みな考えを持ってしまうが、結局自分本位な価値観で騒いだところで、正しい正しくないの問題ではないのでどうしょうもない。

ただ、W3Cとして仕様を決定する前に、リファレンスページとブラウザを公募して、仕様をよくデバッグして欲しいと思うが、わがままだろうか。コンパイラのテストだって沢山TPを書いて、最終的には既存の実際に動いているアプリを通したりする。そうすれはURLが折り返せない不満なんていうのは、すぐに分かったのではなかろうか。widthの計算方法の曖昧さにも気づき、ブラウザ毎に違わずに済んだのではなかろうか。

とにかく、firebugやググって出てきたいろんな参考にさせて頂いたサイトのおかげで何とか表示することができた。ありがとうござます。デフォルトブラウザのfirefoxにも。

(2010.9.13追記)そのうち読むつもりに名称変更。