WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:外部cssファイルへのリンク

0:[投稿] まゆまゆ [2002/09/17 17:49 ][環境:WIN+IE UNIX系+Perl]

DIVやPタグなどを使って文書構造のみを示すHTMLファイルに、ページレイアウト(positionも多用してます)を施すCSSは外部ファイルを使っています。
外部CSSファイルは2種類用意し、Javascriptを使ってOS・ブラウザ判別を行い、それぞれ使い分けています。


(現在のhead内記述)
<script type="text/javascript" src="xxx.js"></script> //OS・ブラウザ判別用jsファイル

<script type="text/javascript">
<!--
if((_mac && _ie5)||(_mac && _ie6)){ //mac用
with(document){
 open();
 writeln('<link rel="stylesheet" type="text/css" href="macstyle.css">');
 close();
 }
}
if( winブラウザ用 ){
 上記mac用と同じ記述
}
//-->
</script>


この記述方法ですと、winのほうでは思い通りのレイアウトが実現できます。問題はmacで、ブラズザの縦スクロールバーが表示されずブラウザからはみ出る部分を閲覧することができなくなるのです。
(動作確認環境:iBook MacOS9.2 IE5.0)
一度本ページからリンクされているサイト内の別ページへ移り、ブラウザ戻るボタンで本ページへ戻るとスクロールバーが表示され正しく表示されます。また、ブラウザウィンドウのサイズを変えてみても(最大にしたり元のサイズにしたり)、正しく表示するのですが。

シンプルに<link rel="stylesheet" type="text/css" href="macstyle.css">と書くと、問題はほぼ解決します(10回に1度の割合でおかしくなります)。ですがHTMLファイルのメンテナンス上、どうにかしてCSSファイルを使い分けしたいのですが、何かよい方法はあるのでしょうか。アドバイスよろしくお願いいたします。

ちなみにDOCTYPE宣言は、<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">です。


1:[回答] 29歳からのPerl [2002/09/18 01:32 ]

まず、ブラウザによりcssを使い分ける方法の一番のお勧めですが、
CGIを使用する方法になると思います。javascriptがオフでも有効ですし利点が多いです。
CGIが使用できるか?が、最大の欠点ですが。
こんな感じで、いつも使用してます
<link rel="stylesheet" type="text/css" href="std.css">
<link rel="stylesheet" type="text/css" href="css.cgi">

ソースの中で気になったのが、open/closeを使用してる点なのですが、わたくしの理解不足な気もします。
「<script type="text/javascript">」なのですが、古い(?)ブラウザの場合、動作しない場合があります。
<script language="JavaScript">
...
// ブラウザ情報をこれまでに取得
if ( Browser.MacIE5orLater ) {
 document.write("<link rel='stylesheet' type='text/css' href='macIE5.css'>");
}
...
</script>


ただし、最大の問題は、
<link rel="stylesheet" type="text/css" href="macstyle.css">
と単純に記述した場合の打率が9割という点ではないでしょうか?
この問題をすっきりしないと解決しないと思います。


2:[関連] あ [2002/09/18 01:50 ]

>ちなみにDOCTYPE宣言は、<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">です。

 CSSファイル切り替えとは別の話なので関連ということで。
その宣言だとVersion違いでIEの持つ標準モード・互換モードの差異が生じたりしないのでしょうか?
MAC版は知りませんが、ちょいと気になったもので。


3:[質問] まゆまゆ [2002/09/18 03:51 ]

29歳からのPerlさん、あさん、アドバイスありがとうございます。

CGIを使ってCSSを使い分けることができるのですね。初めて知りました。実はPerl(CGI)については最近学習をはじめたところなので、今度このプログラミングを是非トライしてみたいと思います。

> ソースの中で気になったのが、open/closeを使用してる点なのですが、わたくしの理解不足な気もします。

この点については、単純にdocument.write()を使って実験してみましたが、やはり結果はopen/closeを使っている場合と同じでした。

> その宣言だとVersion違いでIEの持つ標準モード・互換モードの差異が生じたりしないのでしょうか?

いままでIE、ネスケ等の複数バージョンでどれも同じように表示させるよう教育されてきたせいで、「いちかばちか」のタグを使ってHTMLを組んできました(お恥ずかしい限りです…)。その関係で4.01 Transitional//ENを無条件に記述してきたのですが、仕様に忠実なかたちをとっていれば、HTML 4.01 Strict(URLあり)などで記述してもよいのでしょうか?
勉強不足で恐縮です…

> <link rel="stylesheet" type="text/css" href="macstyle.css">
と単純に記述した場合の打率が9割という点ではないでしょうか?

そうだと思います。
以前、MacIEではpositionプロパティを使っての表示位置を正しく認識しないのでは、というようなことを聞いたことがありまして、試しに外部cssファイルからposition・top・left・width・heightを全て取り除いてみたところ(javascriptによるリンクの記述は変えていません)、常にスクロールバーが表示されページ全体が正しく閲覧できるようになりました。
そのかわりと言っては何ですが新たな問題が出てしまいまして、画像ファイル(ロゴやボタン用のタテヨコサイズもデータサイズも小さいもの)のいくつかが表示されなくなってしまいました…
これはもうMacIE5のバグだとあきらめるしかないのでしょうか。
それとも私のMacIEの設定に問題があるのでしょうか。
もしどなたかご存知でしたらアドバイスをお願いいたします。


4:[回答] 平野 敬 [MAIL] [URL] [2002/09/18 07:21 ]

MacIE の CSS バグについては、ありみかさんのところで頻繁に特集されています。
http://www.google.co.jp/search?q=Mac+IE+CSS+%83o%83O&as_epq=%82%CB%82%B1%82%DF%82%B5%82%C9%82%C1%82%AB&sitesearch=www.remus.dti.ne.jp

>仕様に忠実なかたちをとっていれば、HTML 4.01 Strict(URLあり)などで記述してもよいのでしょうか?

font など非推奨の要素を用いないことが Strict の条件です。文書型宣言における URL (システム識別子)の有無は、Strict であるか否かとは関係ありません。


5:[回答] あ [2002/09/18 08:15 ]

>>3
>CGIを使ってCSSを使い分けることができるのですね。

CSSファイルを切り替えるならSSIタイプとかイロイロあるので、探してみてください。
また、MAC IEだけぢゃなくiCABなどの対応策も無視できないかと。


6:[回答] まゆまゆ [2002/09/18 20:57 ]

平野敬さん、あさん、アドバイスありがとうございます。

> MacIE の CSS バグについては、ありみかさんのところで頻繁に特集されています。

本当ですね!じっくり読んでみます。
解決の糸口が見つかることを願いつつ…

> また、MAC IEだけぢゃなくiCABなどの対応策も無視できないかと。

はい。避けては通れぬ問題だと思います…

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World