(^^)v3: CSSのfloat指定

2006年07月30日 09:45

CSSのfloat指定

会社ではWindowsXPを（しかたなく）使っている。で、休み時間などに自身のブログをたまに見る。夜間にこのブログを自動構築しているのでその結果を見たかったのね。ところがちゃんと見えないのですよ。サイドバーが本文の下に来ていてナビゲーションバーの役割をなしていない。

會澤のblogは次のようなスタイルシート（クラス）構造になっている。極簡単にいえばですけどね。先頭部分に「banner」というクラス名でブログタイトルがあります。ブログの本文にあたるのが「content」というクラス名です。サイドバーは「links」。最下部にコピーライトを表示している「footer」がある。更にこのクラスの内部に様々なクラスが定義されていますが、問題とは直接関係ないので省略します。

さて、Windows/IE（実はIEコンポーネントというhtml解釈エンジンを使った派生ブラウザも多いのですが全て同じ問題を抱えています。加えてバージョンによっても結構違ったりするのですが、ここでは十把一絡げで論じます）で見ると「content」「links」の解釈がマック上の各種ブラウザと異なるのがわかる。

「content」「links」のクラスには、CSS(Cascade Style Sheets)のfloatを指定して「content」を左側に、「links」を右側によせて配置させています。更にここが最大の問題なのですが、それぞれの大きさを「content」75％、「links」20％と指定しています。KHTMLを利用しているSafari。Gekkoを利用しているFireFoxともに％表記で合計100％にしてやると誤動作します。本文とサイドバーが密着しているのも見ずらいという気がしているので、まぁ５％ぐらいマージンをくれてやろうと言うことで75％+20％の指定にしている。

ちなみに、A段のサイズを明示しない方がうまくいきます。横幅の指定で（複数の段の横幅の）合計が100％ぴったりになるように（明示的に）指定すると、一部のブラウザではうまく表示されないためです。

常にメインコンテンツを先に記述できる!?　スタイルシートの段組のメリット - ［ホームページ作成］All About から2006年7月30日に引用

なんて記述があるぐらいです。では、「links」クラスにwidth:20%なんて指定せずに「残り全部」って言うことでwidthを省略すればいいじゃん。って思うのですが、これだとうまく表示されません。う〜ん。

更に事をやっかいにしているのがサイドバーに表示している「NowPlaying」の表示。これがブラウザの表示ウィンドウ横幅が狭い場合に解釈の障害になるようです。つまり、NowPlayingは画像ですね。これは横幅が決まっています。會澤は本文とサイドバーの表示エリアを％で切っていますので、NowPlayingの画像幅よりもサイドバーに割り当てられる横幅が小さくなってしまう場合にどう解釈するのか？という問題ですね。KHTML/Gekkoいずれもこれはほぼ同じ動作をします。一定の横幅まではfloatを有効にして回り込んでくれるのですが、ある閾値を越えると回り込みをやめてしまいます。

先に述べたWindows/IEの場合、この閾値がおかしいと思うんですよ。会社で使っているWindowsノートは画面の横幅が比較的小さいのです。上に述べたように横幅に制約があるためかなぁと思い、表示を縮小表示にしてやってみたのですが、回り込みしてくれるのは、相当横幅がある場合に限られてしまうようなのです。float+width+画像という組み合わせがIEコンポーネントの解釈を混乱させているだろうと考えています。

もっとも、ブラウザの解釈が問題なのではなく、會澤の解釈・咀嚼が問題なのかもしれません（可能性大）。Windows/IEでご覧になっている方がいらっしゃいましたら、以上のような理由でございますのであしからず。当面はMac/Safari、Mac/FireFoxをデフォルトと考えていますのでよろしくです。

このエントリに頂いたコメント。この表示は随時更新されます。

by t0mori(2006-07-31T11:38:27-05:00)

厄介ですよねぇ、WinIE対策は……。

優先順位が違うんですかねぇ……IEは画像サイズを優先してるように見えますね。

llinks側にもっと割り振ってやって、加えてmin-widthで最小幅を決めてしまえば何とかなりそうな。（min-widthは携帯ブラウザとか極端に狭いディスプレイだと問題ありそう）

ちなみにうちは67%+28%=95%って感じです。

或いはlinksだけ固定にするって出来ないんでしたっけ？

by 會澤(2006-07-31T13:16:09-05:00)

やっぱ困ってる人がいたんですね。自分だけかと思ってました。

片側だけ固定ってのも色々調べてみたんですが、どうもうまくいかないです。固定する側をhtmlファイルの先頭側に書けばうまくいくらしいとの記述もあるのですが、會澤環境ではどうもうまくいきません。

いっそ％ではなく、px固定でやった方が綺麗にまとまるのですが、サイドスクロールが出てくるのがどうしても許せないんです。

フォントが汚い＆大きいのも気になるのですけどね。

by t0mori(2006-07-31T16:46:40-05:00)

あ、いや、誤解を招く書き方をしてすみません。

うちはこれで困った事が無いので、うちのやり方を書いてみただけなんです。でもスクロールバーが許せないならmin-widthもダメかも。

何れにせよ會澤さんところはNowPlayingの画像の横幅に対して、linksに割り当ててる分が少ないんじゃないかと思いますよ。

フォントも苛つきますよね。バグハックをやれば何とか出来ますけど、本末転倒なのでやらない事に決めました。

by OKAMURA(2006-08-02T15:22:36-05:00)

width プロパティの値を合計 100% にすると正しく解釈した場合、横幅の総合計は 100% 以上になるケースの方が多いですよ。width プロパティは「内容の幅」を指定するものなので padding や margin あるいは border の幅も含めた「外枠の幅」はそれ以上になるからです。

by 会沢＠会社(2006-08-03T03:52:00-05:00)

margin/paddingがwidthに含まれるってのは“たぶん”そうなんだろうなぁと思っていました。

思っていても口に出せないのは自信のなさの表れ。もっともわかっていても厳密にmargin/paddingを計算して...などということはできないので同じことですね。

t0moriさんからも指摘を受けたように再度の幅があまりに狭かったようなので少し広げました。

本人としては多少バランスが悪く感じるのですが、まぁよしとします。

コメントを書き込むためには、下の「Comments」リンクをご利用下さい。