二〇〇三年 九月 三日(

旧暦 八月七日 友引
癸未年 八月初七日

テンプレートの難しさ

このページのデザインにちょっと手を加えてみた。
なんか、文章ばかり長く見えてしまうのがイヤだったので、エントリは一つだけ見えるようにして、あとはタイトルだけしたに並べるようにした。
で、これを機会に、IE以外のブラウザでもチェックしてみたんだけど・・・、
やっぱ、むずかしいなぁ・・・。 やれやれ。

通常、このページに関する作業はWindows版のIE5.5で行っており、デザインもそれでちゃんと見えれば、とりあえずヨシ、というスタンスで行ってきたのだが、そのやり方が「古いパソコンも大事に使おう!」というもう一つのポリシーとは相容れないモノを含んでいるのは、ウスウス気づいてはいた。

現実としてIEのシェアが95%以上であるとしても、IEだけで許容されるページを作っていくというのは、やっぱりちょっと後ろめたいところがあって、せめて、Win95で動かすことの出来る、ネスケ4以降、Opera6以降ぐらいにもちゃんと対応したいというのが本音ではある。

しかし、MTのスタイル自体をちゃんと理解していない段階で、いろいろいじくり回してもドツボにハマるのは目に見えているので、MTのテンプレートを理解しながら、徐々に改善していこうと思っている。

で、今回少しいじってみて、改善は出来ていないものの、何がどうなっているか少しは感触がつかめたような気がする。

今後のために、一応画像を残しておくことにする。

nn4.7.gif
Netscape4.7
DIVタグで指定された要素の背景色が考えたように反映されない。
contents(左側)とlinks(右側)が高さ方向でズレる。(中央揃えになっているっぽい)

ns62.gif
Netscape6.2
右側のlinks部分が入りきらず、contentsの下側に回り込んでしまう。(ブラウザの幅を広くしても同じ。)
幅の指定の仕方を考慮しなければならないらしい。

opera7.gif
Opera7
比較的悪くない。DIVに付けたスタイルのmarginが有効になっておらず、左右が余白なくくっついてしまっている。(中身の大きさのせいか。)

リンク元:
腹黒草

Posted by mura at 2003年9月 3日 14:33
コメント

いや、驚きました。井の中の蛙(かえる、じゃなくて)何とやらで、まったく考えていませんでした。

ネスケ4.6で自分のところを見たら、写真に本文が重なっちまってました。そっか、IEを念頭に置かれたものだったんですね…。

Posted by: kuro at 2003年9月 4日 10:52

やりようによってはネスケにも対応することは出来るはずです。
とりあえずは、圧倒的シェアのIEに迎合する形で進行しても、まあ、実害はないのではないかと(笑)。

Posted by: mura at 2003年9月 4日 12:16

こちらにも参上。
メニュー部分とコンテンツ部分の幅の指定がうまくできませぬ(泣)。マックでみるとまっとうだけど、ウィンでみると、コンテンツが幅広すぎてスクロールがでちゃうという、珍しい?パターンに陥りました。
いやはや、XMLの本を探しに行こうかな。

Posted by: かえる at 2003年9月 5日 15:15

どもども。
ワタシもハマりました。かなり。
結局、widthを%ではなく、px単位で指定することで、だいたいの(といってもWinとMacのIE5以降)ブラウザで表示させることができました。
でも、そうやると、このページみたいに幅が限定されます。
ワタシの場合、640×480の画面で見ることも少なくないので、自分的にはオッケーなんですが、そうじゃない場合の方が多いでしょうからねぇ。大変そうだな・・・。

それと、この問題はXMLではなくCSSなのでは?
(こういう問題を解決できる本ってあるのかなぁ・・・。)

Posted by: mura at 2003年9月 5日 15:31

とか言いながら、またMacのIEで見てみたら、幅がズレてる・・・。
昨日修正したところの影響みたい。やれやれ・・・。

Posted by: mura at 2003年9月 5日 16:38

こんにちわ。わたしも悩んだ末PX固定にしてみました。
どうやらセーフかも・・・
そうですね、これはxmlじゃなくち、CSSの方の問題かも、
っていうかもう込み入っちゃっていていやでござるあ(笑)。
(ウィンだと固定、マックだと成り行きで見えてる状態です)

確かにこちらのmuraさんのページもマックのIE5.5で見ると、コンテンツとリンクがごっちんこして食い込んじゃってますわ、少しだけど。
でも、これでMT専用ビューワーとか出たらさらに話がややっこしくなるか!?

なんか、トラックバックやRSSへの道はまだまだ遠いいです。とほほ。そっちが本質なのに。
まあ、来週にはそれでも開けますので見に来てやってください。

Posted by: かえる at 2003年9月 5日 22:23

かなり反則ワザなんですが、とりあえず全然ブラウザ地獄が解消されないので、テーブルで組んでしまいました・・・。(敗北感)
でもまあ、いろいろやってみてかなり勉強になりました。
divタグのmarginやpaddingやwidthなんかのサイズが一番素直に反映されるのは、いまのところWinのIE5.5だと思いました。

WinのIE6やMacのIE5(5.1)などでは、WidthやPaddingのサイズが正しく反映されません。

たとえばPaddingの指定も、
padding:10px;
とやったときと
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;
とやったときの表示が変わったり、
paddingを指定したときの中身で全体の幅が変わったりします。(<div>〜</div>の間にテキストしかない場合と、、さらに<div>がある場合とではwidthの指定をしていても結果が変わるようです。)
その他、borderの幅が全体の幅に含まれるのか、含まれないのかとか、なんかいろいろ違いがあるようです。

WinのIE5.5だと、かなり素直に理にかなった結果になるので、それに頼ってると他でとんでもない目に合わされてしまいます。

結果として、titleの幅をどんなに調整してもIE5.5とIE6、MacのIE5.1でそろえることができなかったので、テーブルの使用に踏み切りました。
そのほかネスケ6.2やOpera7などとの差もあり、テーブルなしでは「こっちを立てれば、あちらが立たず」どうどうめぐりのアリ地獄なので、キレてPCをタタキ壊してしまってもアレですし。

結局、ブラウザによってCSSを振り分けるJavaScriptをかますとかしないといけないってことなのかな・・・。やれやれ。

Posted by: mura at 2003年9月 9日 00:32

こんにちわ、さすがmacでもごっちんこ解消されてぴしっと揃って見えるようになりました。

しかし、結局、ブラウザの見え方差異問題から解放されることはないのですね。
エントリーの中の、写真の組み込みもどうにかしたいなあ、と思って禁断の(笑)テーブル組にしてみたりです。

というわけで、昨日、オープンしましたのでよかったら覗いてやってください。

Posted by: かえる at 2003年9月 9日 15:01

めりこみ現象は、右のカタマリが左に食い込んでいるというより、左の要素で指定の幅にきっちりおさまらないのがいたのが原因でした。
めり込んでいるように見えたのは、上のバナー部が右に飛び出ていたからですが、あれも幅指定に従わないならず者だったのです。

Posted by: mura at 2003年9月 9日 18:59

MTのテンプレートにtableを使っちゃっていいのかな、っていうのはかなり悩むところで、作業中にもしばしばそのことが頭に浮かんできて仕方がない。
Movableの意味がそこにあるような気がしているというのもあるんだけど、ソースレベルでHTMLを提供できるということに重点を置いて考えると、やはりtableは邪道ではないかと思ってしまうわけだ。

しかし、やっぱり「見え方が違う」というレベルを超えて「崩れてしまう」というのは納得いかないわけで、「それは、古いブラウザなんだから」とか「少し崩れてるけど、読むのには問題ないでしょ」とか言えない。

でも、このサイト
http://www.2xup.com/
みたいにCSSをウリ(?)にしているところでも、ワタシのブラウザでは右側のコラムがあふれて中央のコラムにカブってしまっているわけで。

ある意味、こういう状態をみんなで作り出すことでスタイルシート表現の統一を勝ち取っていくというほうが正しい道なのかとも思えたりして・・・。

うーむ。

Posted by: mura at 2003年9月18日 18:31
コメントする









名前、アドレスを登録しますか?






トラックバック
このエントリのトラックバックURL

◇このサイトのサーバの調子によって、トラックバックを送信してもエラーが表示されたり、すぐにこのページに反映できないときがあります。ですが、トラックバック自体は送られていますので、重ねて送っていただかなくても大丈夫です。こちらでも出来るだけ早く反映できるようにrebuildしますので、ご容赦ください。
参照元URL
関連エントリ