 |
 |
別にテーブルレイアウトを使うことに抵抗はまったくないヘンゼルですが、それでも最近はこんな悩みが…。
少し前に MyClip を付けてみたのですが、サーバーからの応答がたまに 10秒前後も遅れることがあるです。
Firefox や Opera ではそれでもさほど問題ないのですが、テーブルの中身が揃ってから初めて全体を表示する IE ではそうもいきません。
そしてヘンゼルの館を見に来る人々の多くは IE を使って閲覧しているらしいのです。
ではテーブルレイアウトに変わる方法はあるのでしょうか?
といっても絶対配置をするつもりがないので、あとは float を使うしかありません。…ないはずです(^^;
ここで気を付けなければいけないのは HTML 上での記述の順番で、ヘンゼルの館の場合 MyClip は右下に設置されていますから、右列が一番最後にならなくてあまり意味がありません。
となると、左列および中央に対し float: left; を指定することになるはずです。
…なんて、実のところヘンゼル、テーブルレイアウトにしちゃう前に、一度 CSS での段組にチャレンジしてはいるですが、可変幅の手頃なサンプルをそのときは見つけられず、自力でがんばってもどうしても上手くいかなかった、という経験があったりするのですね～。
で、今回は「MinuteDesign」さんという参考書が…って、あれ? あれ? 繋がらなくなっています。閉鎖されたか、サーバーがメンテ中のようです(ノд｀。)
しかたがないので上のサイトさんからリンクされていた「Creating Liquid Layouts with Negative Margins」という記事を参考にするです。
で、記事に書かれている方法ですが…3段組しようとすると div が何重にもなっています(ノд｀。)
使い道ウンヌンを無視すれば table の方が、HTML 綺麗なんじゃ…(´｀)
ついでに、直感的で判りやすい table の方が、何がどうなっているのかさっぱり判らない謎の div + CSS よりメンテナンスも楽なんじゃ…(´｀)
Σ(°°)
今回の目的は IE でのレンダリングの高速化です。コンテンツと外観の分離なんて関係ありません。どうせ記述するのはスキンファイルなんですから!
Σ(￣口￣;)
「Creating Liquid Layouts with Negative Margins」にあるサンプル、IE だと、ちょっとウィンドウ幅縮めただけで表示が崩れちゃうです(T_T)
これではヘンゼルがその昔 negative margin など知らずにチャレンジしてたときと結局何も変わりません(ノд｀。)
他にいいサンプルも見つからないし、現状では IE でも Firefox でも Opera でも表示が崩れない、可変幅段組レイアウトは table を使う以外ないということでしょうか。
でもこの「現状」って、ヘンゼルの館の寿命より長い予感がしますが(笑)
結局サーバーの応答が遅い! という理由で、埋め込み e-Words を外し、こうさぎを外し、そしてまた MyClip を外すことになりそうです。
外部のサービス利用するくらいなら似たような機能の plugin を作ったほうがよくて、それもダメなら付けないほうがいい、ということですね(^^;
いあ、テーブルレイアウトをやめて、固定幅 2段か、限定可変幅 2段くらいにして、HTML の最後の方に記述する分には問題ないわけですが、レイアウトを変えてまで付ける気はないということで(^^)b
Re:最後のテーブルは捨てられない…? ちくたく 05/03/31(木) 08:01
僕も最初はtableでレイアウトしようとしてたんですけどね。
元々のrNoteスキンがCSSで2カラム化してたのでCSSで3カラム化する方が楽だったので^^;
CSSの利点としてはどのカラムから読むか自由に決められるという点がありますね。
僕のサイトでは真ん中、左、右の順に読み込ませています。
本文を最初に読み込んで、なるべく重いものは右に置くっと(笑)
CSS非適用のブラウザとか読み上げブラウザ使う人がいた場合はそちらの方が人に優しいかなぁと。
↓なんのひねりもないこんな方法で3カラム化してるわけですが(元となるを文章を書いたのは僕っす)。
http://rnotewiki.matrix.jp/index.php?%A5%B9%A5%AD%A5%F3#v164a334
Re:最後のテーブルは捨てられない…? ヘンゼルの記憶 05/04/01(金) 01:21
わざわざありがとうございます(^^)/
実は 3段の前に 2段の状態でもいろいろ実験し、結果テーブルにしちゃっています。
例えば、rNote 付属サンプルや、ご紹介いただいた 3カラムのサンプルに対して、em 単位での幅指定でフォントサイズに応じて左右の列幅を変えたい、と思ってもなぜか上手くいきません(^^;
具体的には Firefox で、どんなにウィンドウを広げても、常にページがそれ以上に広がり横スクロールバーが消えなくなっちゃいます。
なぜかはよく判りません(^^;
あと IE には min-width がないので、上記方式では縮められたときにちょっと苦しかったり。
特に #content の中に横幅のある table や、white-space:nowrap; なもの、pre などがあると、それらだけをのこして、他が縮むという変な見え方になっちゃいます(^^;
この問題、3段組で横幅が広がってくるとさらに苦しくなってきます(^^;
で、absolute やめて float にすると上記の問題が一度は解決したように思ったのですが、それは Firefox のときだけで、IE(枠の中身によっては Opera も)では幅縮小によって崩れてしまいます(^^;
こう書くとくだらない理由ばかりですが、そのときは table を使わないことにこだわるほうがもっとくだらなく思えたのですね～。
W3C に敬意を抱いていませんし(笑)
で、今でも、table を使うことによって捨てることになるものと、table を使わないことによって捨てることになるもの、を秤にかけて、ゆらゆらしている状態です(^^;