2004年02月21日 15:51
Mac版IE対策をしました
修正したのは以下の部分
#countainer の width はkaminogayaさんはWINIE対策として「width: 100%;」と書かれていますがこうするとブラウザの幅を狭めたときに少しおかしな動きをするのでautoにしました。
「width: 100%;」のときにブラウザの幅を狭めると途中までは可変的に真ん中のカラムが狭まるのですが途中から右カラムがある位置においてけぼり状態になり真ん中カラムと右カラムの間に空白が入ってしまいます（真ん中カラムは可変で狭まっていきます）。
このwidthをautoにした影響がMac版IEでどう出るか心配です。
#countainer と #content の position プロパティをrelative に、#links と #links2 のそれはabsoluteにしています。
このへんについてはこちらの記事が詳しいです。
それによると position を absolete にした要素は「この要素の祖先要素が position:static 以外の時、要素はその祖先要素から相対的な位置に配置され」る。
だから、#countainer を relative にしておいて中に配置する #link と #links は absolute にすると意図するところにおける。
その際、真ん中のカラム #content は左右を margin であけておく。
そうするとindexテンプレートをいじれなくても標準の順番で見た目が３カラムになる。
どうでしょう？
※追記（2/22）
コメント欄でkaminogoyaさんの書いているユーザビリティとはこちらの記事のコメントにある「#content部分にabsoluteを使ってleftやtopなどの位置指定をするとマウス動作が挙動を起こす可能性がある」のことを指していると思います。
また、以前「kaminogoya」さんを「kaminogaya」さんと誤って記述していました。申し訳ありませんでした。
■HINAGATA-3column
■HINAGATA
■Mac版IE対策のリンク集的記事（マサログのトビラver1.00）
#container{
position: relative;
width: auto;
margin:0 auto 0 auto;
padding: 0;
text-align:left;
}
#content{
position:relative;
margin-top: 0px;
margin-right:200px;
margin-bottom: 0px;
margin-left: 220px;
line-height: 140%;
padding: 0px 20px 50px 20px;
}
#links{
position:absolute;
left:5px;
top:120px;
width:200px;
padding:0;
}
#links2{
position: absolute;
width:200px;
top:120px;
right: 5px;
margin: 0;
padding:0 0 10px;
}
#countainer の width はkaminogayaさんはWINIE対策として「width: 100%;」と書かれていますがこうするとブラウザの幅を狭めたときに少しおかしな動きをするのでautoにしました。
「width: 100%;」のときにブラウザの幅を狭めると途中までは可変的に真ん中のカラムが狭まるのですが途中から右カラムがある位置においてけぼり状態になり真ん中カラムと右カラムの間に空白が入ってしまいます（真ん中カラムは可変で狭まっていきます）。
このwidthをautoにした影響がMac版IEでどう出るか心配です。
#countainer と #content の position プロパティをrelative に、#links と #links2 のそれはabsoluteにしています。
このへんについてはこちらの記事が詳しいです。
それによると position を absolete にした要素は「この要素の祖先要素が position:static 以外の時、要素はその祖先要素から相対的な位置に配置され」る。
だから、#countainer を relative にしておいて中に配置する #link と #links は absolute にすると意図するところにおける。
その際、真ん中のカラム #content は左右を margin であけておく。
そうするとindexテンプレートをいじれなくても標準の順番で見た目が３カラムになる。
どうでしょう？
※追記（2/22）
コメント欄でkaminogoyaさんの書いているユーザビリティとはこちらの記事のコメントにある「#content部分にabsoluteを使ってleftやtopなどの位置指定をするとマウス動作が挙動を起こす可能性がある」のことを指していると思います。
また、以前「kaminogoya」さんを「kaminogaya」さんと誤って記述していました。申し訳ありませんでした。
■HINAGATA-3column
■HINAGATA
■Mac版IE対策のリンク集的記事（マサログのトビラver1.00）
トラックバックURL
トラックバック一覧
1. ＣＳＳってさっぱりわからない…… [ 雅楽多blog ] 2004年02月23日 08:58
以前に一回トップページを３カラムにするもＭＡＣだと表示が乱れるとの話しがあってもとにもどしておいたんだけど、小春日和の陽射しの中で:Mac版IE対策をしましたとの記事を見て再度チャレンジしてみた。ついでにライブドアＰＲＯにしたんだし、ＦＴＰが使えるようになっ.
2. MacIE対応他、改造いろいろ [ パンパでガウチョ ] 2004年02月23日 20:09
昨日から今日にかけていろいろ改造しました。
この記事に一緒に書いてしまうと検索性が悪いので、記事に書く価値のありそうなものについては、『小ネタ』として別記事にします。
MacIEに対応する（つもりで）id要素のスタイル変更
Blog内検索のHTML化
"View Ranking"リ
3. Blogいぢり-ＷinIE以外にも優しいBlogづくり [ 【他人の空耳】 ] 2004年02月23日 20:59
Blogいぢり-ＷinIE以外にも優しいBlogづくりに挑戦して、Macで表示したところで力尽きたお話し。
4. MAC版IE対策 [ Does that include the tip? ] 2004年02月24日 09:24
小春日和の日差しの中でさんの情報によると３列シートにするとMAC版のIEで不具合があるそうで，それを回避するソースが公開されています。
このようなありがたい情報が飛び交うのもBlogならではですね。ところで３列シートの補修ですが，まとまった時間が取れる時にやりたい
5. Mac IE 5 対策終了かと [ マサログのトビラ ver.1.00 ] 2004年06月23日 14:25
※ 再編集してみました。('04年6月23日)これまで当トップページをMac OS 9.2.2 ＋Internet Explorer 5.1.6 で閲覧すると、ブラウザに不本意な横スクロールバーが出現していましたが、ついに消えました。成功です！
ただし、条件付きですが・・・。◇参考記事◇
■コーラ君
コメント一覧
1. Posted by kamonegi 2004年02月21日 18:09
OSX(10.3.2)のIE5.2.3、OSX起動のClassic環境(OS9.2.2)IE5.1.5および5.0
問題なく表示できているようです。
問題なく表示できているようです。
2. Posted by junike 2004年02月21日 18:27
確認コメントありがとうございます！
これなら大丈夫そうですね。よかったです。
これなら大丈夫そうですね。よかったです。
3. Posted by kaminogoya 2004年02月21日 22:40
うまく表示されています。kamonegiさん同様。
所々、修正していただいたようで感謝致します。
3カラムにするには、ユーザビリティを考えてもこの方法が良さげですね。
次回、HINAGATAで公開する際はこの方法を使ってやりたいと思います。
すばらしいディスカッションありがとうございます。
とても参考になりました。
所々、修正していただいたようで感謝致します。
3カラムにするには、ユーザビリティを考えてもこの方法が良さげですね。
次回、HINAGATAで公開する際はこの方法を使ってやりたいと思います。
すばらしいディスカッションありがとうございます。
とても参考になりました。
4. Posted by junike 2004年02月21日 23:54
確認ありがとうございました。
これで「３カラムにする手順」にトラックバックしてくれた人たちに
お知らせすることにします。
これで「３カラムにする手順」にトラックバックしてくれた人たちに
お知らせすることにします。
5. Posted by masalog 2004年02月22日 00:31
こんばんは、masalog です。やっとこちらへ来ました。
上の方々同様、意図する表示になっています（Mac OS 9.2.2 ＋ IE5.1.6 800 × 600）。
少し気になるのは、使用したmac 版IE で、ウィンドウ左にある”お気に入り”タブ等を開こうとすると、クリックしてから開くまでに、ちょっとしたタイムラグがあることぐらいです（これは、こちら側の問題のなのかもしれませんが）。
特に問題のある様子はありませんでした。
大変な作業、お疲れ様でした。僕もいずれは３カラムにしてみたいと思います。
上の方々同様、意図する表示になっています（Mac OS 9.2.2 ＋ IE5.1.6 800 × 600）。
少し気になるのは、使用したmac 版IE で、ウィンドウ左にある”お気に入り”タブ等を開こうとすると、クリックしてから開くまでに、ちょっとしたタイムラグがあることぐらいです（これは、こちら側の問題のなのかもしれませんが）。
特に問題のある様子はありませんでした。
大変な作業、お疲れ様でした。僕もいずれは３カラムにしてみたいと思います。
6. Posted by freiclear 2004年02月22日 20:30
修正お疲れ様でした。
そしてお知らせいただきましてありがとうございました。
参考にさせていただきます<(_ _)>
そしてお知らせいただきましてありがとうございました。
参考にさせていただきます<(_ _)>
7. Posted by Tsutomu 2004年02月22日 22:13
いつもお世話になっております。
ＴＢ（トラックバック）をありがとうございます。
早速、参考にさせていただき、修正してみました。
ＴＢ（トラックバック）をありがとうございます。
早速、参考にさせていただき、修正してみました。
8. Posted by kaminogoya 2004年02月23日 16:55
kaminogoyaです。
こんにちは。
こちらで僕が最初に記述したものに、junikeさんの意見を取り入れさせていただいたもので、HINAGATA-3columnを組み直してみました。
http://hinagata.biz/3c2/
押し付けがましくて失礼ですが、
もしよければ、junikeさんの方でも見ていただければ幸いです。
大変感謝しています。
こんにちは。
こちらで僕が最初に記述したものに、junikeさんの意見を取り入れさせていただいたもので、HINAGATA-3columnを組み直してみました。
http://hinagata.biz/3c2/
押し付けがましくて失礼ですが、
もしよければ、junikeさんの方でも見ていただければ幸いです。
大変感謝しています。
9. Posted by junike 2004年02月23日 20:44
わざわざご連絡ありがとうございます。
記事の最後尾にリンクをつけておきました。
記事の最後尾にリンクをつけておきました。
10. Posted by masalog 2004年06月23日 14:45
masalog です。お久しぶりです。
昨日、こちらの記事にトラックバックしたはずなんですが、なぜかping が飛ばなかったようです。
今日、追記してまた飛ばしてみました。
昨日、こちらの記事にトラックバックしたはずなんですが、なぜかping が飛ばなかったようです。
今日、追記してまた飛ばしてみました。
11. Posted by junike 2004年06月23日 20:22
masalogさん、お久しぶりです。
まだ記事はよく読んでいないのですが、お疲れ様でした。
３カラム化しているサイトで重いところがあるというのは
ここもそうだと思いますが、たぶんサイドバーにいろいろ
あるからだと、自分では思っています（思い込んでいます）。
そのうち変形３カラム（？）の実験でもしようかなと思ってます。
MEMORIZEからの移行でもう１つIDができたので、そこで気兼ねなく
実験ができるので。
まだ記事はよく読んでいないのですが、お疲れ様でした。
３カラム化しているサイトで重いところがあるというのは
ここもそうだと思いますが、たぶんサイドバーにいろいろ
あるからだと、自分では思っています（思い込んでいます）。
そのうち変形３カラム（？）の実験でもしようかなと思ってます。
MEMORIZEからの移行でもう１つIDができたので、そこで気兼ねなく
実験ができるので。
12. Posted by masalog 2004年06月24日 21:23
masalog です。
記事を紹介して頂きましてありがとうございます。
重くなる一因に、position: relative;があるようです。
僕もコーラ君のお父さんのご指摘で外した口です。閲覧者側の環境(OS やCPU、メモリかな？)によってはIE ではとてつもなく重かったり残像？のような現象があったりするようです。僕のmac では気づきませんでした。
サイドバー、僕の＜トビラ＞も肥大化の一途を…。
変形３カラム、楽しみにしてます(^^)
記事を紹介して頂きましてありがとうございます。
重くなる一因に、position: relative;があるようです。
僕もコーラ君のお父さんのご指摘で外した口です。閲覧者側の環境(OS やCPU、メモリかな？)によってはIE ではとてつもなく重かったり残像？のような現象があったりするようです。僕のmac では気づきませんでした。
サイドバー、僕の＜トビラ＞も肥大化の一途を…。
変形３カラム、楽しみにしてます(^^)
13. Posted by nico 2004年07月07日 08:50
masalogさん、こんにちは！
教えていただいたとおりカウンターを右に出すように設定してみたのですが、もーーーっと上に表示させたいんです（いまだとこうさぎと重なってしまっています）
もうちょっとご指南いただけませんか〜〜？
教えていただいたとおりカウンターを右に出すように設定してみたのですが、もーーーっと上に表示させたいんです（いまだとこうさぎと重なってしまっています）
もうちょっとご指南いただけませんか〜〜？
14. Posted by junike 2004年07月07日 19:44
nicoさん
ここはmasalogさんのサイトではありません。
もし何かやりとりしていたのであれば間違いだと思います。
ちょっと見ではよくわかりません。
カウンターの最後の方に改行のタグでもダミーで入れてみたらどうなります？
ここはmasalogさんのサイトではありません。
もし何かやりとりしていたのであれば間違いだと思います。
ちょっと見ではよくわかりません。
カウンターの最後の方に改行のタグでもダミーで入れてみたらどうなります？
