覚え書き小技集

初心者にとってマークアップ言語とは言え、正しい HTML を記述することが容易でなくなりつつあります。

特に、スタイルシートを利用するとブラウザの種類による依存度が高く、主要ブラウザの多くに対応するには、テクニックが必要です。

CSS による中央寄せ

スタイルシートで中央寄せを行うと、ブラウザによっては上手くいかないことがあるようです。

次の方法が、ブラウザ依存が少ないと思います。

body で中央寄せを行い次の div によって左寄せを行います。

body{
 text-align : center;
}
div.Main{
 margin-left: auto;
 margin-right: auto;
 text-align : left;
}

また、table タグには以下をつけましょう。Opera などでは無いと中央寄せされません。

table{
 margin-left: auto;
 margin-right: auto;
}

target タグの変わりに

target属性はa要素や、link要素に指定する事ができるウィンドウを支配する属性です。しかしながら、target属性はHTML4 Transitionalで非推奨、HTML4 Strictや、XHTML 1.1では完全に抹消されました。

フレームもtarget属性同様、HTML4ではFramesetのみで使用可、XHTML1.1では完全に抹消されました。したがって「target が必要ない、ユーザが『新規ウインドウ』で開くかを決定すればよい」と言うのが W3C勧告です。

<script type="text/javascript">
<!--
   if(top.length)top.location.href=location.href;

</script>

Netscape Navigator 4.x 対応の CSSを作成

NN4.x では、中途半端にスタイルシートが適用されるバグのために、思うように表示されないと考えている方も多いことでしょう。

「内部定義」などに変更しなくとも、今までの指定を少し変えるだけで、正しい表示可能です。

background 指定で文字の背景部分のみに着色される問題

次のようなHTML を記述したとします。
ファイル名 index.html

（省略）
<link href="./base.css" rel="stylesheet"
      type="text/css" />
<title>NN 4.x CSS 対策</title>
</head>
<body >"blue">

<div class="Main">
<h1>NN 4.x CSS 対策</h1>

<p>
NN4.x では、中途半端にスタイルシートが
適用されるバグがある。
</p>
</div>

</body>
</html>

NN4.7x と他のブラウザで見た結果は次のようになります。

body{
 text-align : center;
}
div.Main{
 background-color : #ffffff;
 margin-left: auto;
 margin-right: auto;
 text-align : left;
}

NN4.7x で見た結果は次のようになります。

次のようにスタイルシートを定義します。

body{
 text-align : center;
}
div.Main{
 background-image : url(./css/block.gif);
 background-color : #ffffff;
 margin-left: auto;
 margin-right: auto;
 text-align : left;
}

NN4.7x で見た結果は次のようになります。

Netscape Navigator 4.x はシンプル表示のCSSを作成

HTMLで、NN4系は、media属性が"screen"以外の値を指定しているCSSファイルは読まない

@import "dsp_uni_pcnet.css"と記述すると、IE3と4、NN4は除外される

、@media screen {}と記述すると、IE3と4と5(Mac版のみ)、NN4は除外される

スタイルシートの最も重要な特徴の一つは，コンピュータのスクリーン，印刷，音声出力，点字出力などの異なる複数の出力媒体について，構造化文書の表現方法を指定できることにあります

@charset "Shift_JIS";
@media screen, print{

@import url("base.css");

body{
    background:url(img/back.gif) no-repeat fixed 0% 0%;
}

/*============= end of @media screen,print ===============*/
}

覚え書き小技集