スタイルシート -- どのブラウザでも同じように見えるようにするには

観測気球

収集物の記録書庫 a data archive of collection -- collectible toys

[要旨] 要旨: 「チェリオメアリー」のけーきさんに、当「観測気球」を Maciotosh...
[キーワード]

« サイドバーのリンクリストのスクロールバー設置完了 | トップページ | blog は過渡期? »

2004.02.25

スタイルシート -- どのブラウザでも同じように見えるようにするには

要旨: 「チェリオメアリー」のけーきさんに、当「観測気球」を Maciotosh のいろんな Webブラウザ で表示させたときのスクリーンショットを取得していただいた。実際に見てみると、確かにブラウザによって、見え方が全然違う。

関連記事: 戦うスタイルシート

  • Safari 1.0
    記事本文、サイドバーとも幅が狭い。width: の指定が期待とおりに作用していない模様。サイドバー折りたたみはちゃんと閉じた状態で表示されているので、DOM 関連の問題はない? (閉じたまま、開かなかったりするのかもしれません。ちょっと不安)
    タイトル/サブタイトル部分の画面サイズに応じて伸び縮みする背景画像はちゃんと実現できている模様。
    Safari 1.2 ではどういう見え方になるのかも気になるところ。
  • ominiweb 5.0 beta2
    サイドバーのみ幅が狭い。width: auto; じゃ駄目なのかな?
  • Opera 6.0.2
    DOM が全く作用していない(したがって、ココログで用意されているデフォルトのスタイルシートがそのまま適用される)。Windows版IE6.0 で JavaScript 機能をオフにして見たときと同じ見え方。
    Opera に関しては、新しいバージョン(7.x といっても 7.2x 以降じゃないと駄目かも?)なら大丈夫なのではないか、と思います。
  • Internet Explorer 5.2
    サイドバー折りたたみの JavaScript はそれなりに動いている(<h2> ~ </h2> で囲んだ部分が文字化けしてます)ようですが、スタイルシート上書き JavaScipt は全く作用していないようです。デフォルトのスタイルシートと Mac IE の不完全なDOM機能があいまって、他のブラウザでは再現しにくい画面になっています。
  • Firefox 0.8
    概ね期待とおりの見え方をしています。width: と overflow: の相互作用のせいなのか、LinkList 部分では横方向のスクロールバーが出ています。縦方向のスクロールバーだけが出ることを狙ってるんですが。これは width: の値を調整することで解決できると思います。他のブラウザに比べると問題は軽微。

先の記事のコメントで書いたように、マイリスト埋め込み文字列の修正により、手元にある Windows 版の IE6.0 と Opera 7.23 では期待通りの見え方をしています。修正を行なう前は、Opera 7.23 で見ると、「+」マークが BlogPeople、MyblogList それぞれの左上に表示されていました。あと width: の調整により、Opera 7.23 でも、画面サイズに関係なく、どんな場合も横スクロールバーが出ないようになりました。

どういう対応をしたのかというと。マイリスト埋め込み文字列を以下のように修正しました。

  • 修正前
    • 項目1
      </li></ul> <div class="bloglist" style="position: relative; top: -40px;"> <h3>BlogPeople</h3> <div class="listing"> <script language="javascript" type="text/javascript" src="http://www.blogpeople.net/display/javacode_utf8.jsp?key=xxxxxxxxxxxxxxxx"></script> <script language="javascript" type="text/javascript" src="http://www.blogpeople.net/display/joincode_utf8.jsp?key=xxxxxxxxxxxxxxxx"></script></div></div> <ul><li style="display: none;">
    • 項目2
      </li></ul> <div class="bloglist" style="position: relative; top: -50px;"> <h3>MyblogList</h3> <div class="listing"> <script language="javascript" type="text/javascript" src="http://list.myblog.jp/list/js?code=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" charset="EUC-JP"></script> </div></div> <ul><li>
  • 修正後
    • 項目1
      </li></ul></div> <div class="bloglist" style="position: relative; top: -40px;"> <h3>BlogPeople</h3> <div class="listing"> <script language="javascript" type="text/javascript" src="http://www.blogpeople.net/display/javacode_utf8.jsp?key=xxxxxxxxxxxxxxxx"></script> <script language="javascript" type="text/javascript" src="http://www.blogpeople.net/display/joincode_utf8.jsp?key=xxxxxxxxxxxxxxxx"></script></div></div> <ul><li style="display: none;">
    • 項目2
      </li></ul> <div class="bloglist" style="position: relative; top: -50px;"> <h3>MyblogList</h3> <div class="listing"> <script language="javascript" type="text/javascript" src="http://list.myblog.jp/list/js?code=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" charset="EUC-JP"></script> </div></div> <div class="sidebar"><ul><li>

マイリストに埋め込む文字列を考えるのは、やっぱりパズルですね。最終的にどういうソースになるか、頭に描けてないと、なかなか最適な答えが出てきません。

投稿者: tsupo 2004.02.25 午前 02:57 | 固定リンク | このエントリーをはてなブックマークに追加 | このエントリを del.icio.us に登録 このエントリの del.icio.us での登録状況 | このエントリを Buzzurl に追加このエントリの Buzzurl での登録状況 | このエントリをlivedoorクリップに登録 このエントリのlivedoorクリップでの登録状況 このエントリをlivedoorクリップに登録している人の数 | 酢鶏巡回中

楽天市場


ウェブログ・ココログ関連」カテゴリ内の最近の記事

プログラミング」カテゴリ内の最近の記事

品揃え豊富で安い!NTT-X Store


アマゾンわくわく探検隊

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/6737/231760

この記事へのトラックバック一覧です: スタイルシート -- どのブラウザでも同じように見えるようにするには:

» 観測気球: スタイルシート -- どのブラウザでも同じように見えるようにするには from 此処録ANNEX : ココログTIPS
観測気球: スタイルシート -- どのブラウザでも同じように見えるようにするには... 続きを読む

受信: 2004.03.09 午前 12:21

コメント


Mac 用 Opera の最新版をチェックしてみたら6.03でした(汗)
案の定見え方は6.02と同じでした。
結構いい動きをしてると思ったんだけどなぁ<Opera
あとは Safari1.2も気になりますね。
こちらの OS では動作確認できないのが残念です。

tsupoさんの細かい作業には頭が下がります。

投稿者: けーき (2004.02.25 午後 08:18)

コメントを書く




※イタズラ防止のため、メールアドレスを入力しないと投稿できません。

次からのコメント入力の手間を省くために、名前やメールアドレスをcookieに記憶しますか?


URL を入力すると、その URL にリンクがはられます。
なお、メールアドレスは公開されません。ご安心ください。


ワード

ニッセン

fujisan.co.jp

楽天市場