HTML5になって廃止になったHTML4の要素や属性がありますが、古くから使い続けているページでは、これらの要素や属性がいまだに残っている場合があります。 廃止といっても、実際はHTML5上で以前のように動作しますので、つい廃止タグが使われている古いページであることを忘れ、CSSが効かない?と錯覚してしまうことがあります。

次のサンプルは、実際にあった例で、このページでその部分だけ取り上げると、ごく簡単なことですが、これが、includeなどで複雑に構成された古いページでは、廃止タグにまで注意がおよばず、原因を突き止めるまでにけっこうな時間を費やしてしまいました。

サンプル(1)のhtmlソース

<div class="wrapper">
    <center>
        <div class="example">
            <font>(fontタグ)<br>centerタグの中のbox<br>
                横200px 縦100px</font><br>
            <span>span要素</span>
        </div>
    </center>
</div>

 

サンプルは、今回トラブルの原因になったcenterタグ(廃止タグ)を使っています。同じ廃止タグのfontタグは動作確認のみの付録です。centerタグは、その子孫要素をブロック用、インライン要素を問わずすべて中央揃えをさせるタグです。子要素のdiv(黄色のbox)も、その中のfont要素やspan要素も中央揃えになります。

サンプル(1)

(fontタグ)
centerタグの中のbox
横200px 縦100px

span要素

 

このbox内のテキストのみを左揃えにするため、ソースを調べているうちにcenterタグに行き着きました。ここで安易にテキストのみを左揃えにするCSSを仕込んだのがトラブルの原因で、後になってそのことに気づきました。次のソースは、centerタグをそのままで残し、それにテキストのみを左揃えにするCSSのclassを指定しています。

サンプル(2)のCSSソース

center.left  {
	text-align:left;
	}

 

結果は、テキストだけでなく、boxまで左揃えになってしまい、実際の例ではレイアウト崩れが起こりました。そして、同時にいろいろ手を加えていたこともあって、このCSS追加が影響していることに気づくまで相当時間がかかりました。

サンプル(2)

(fontタグ)
centerタグの中のbox
横200px 縦100px

span要素

実際のケースでは、centerタグをとり除き、子要素であったdivタグに中央揃えのCSSを指定しました。ついでにfontタグもspanタグに置き換えています。centerタグがなくなったことで、htmlの構造がシンプルになり、ソースが2行減っています。

サンプル(3)のhtmlソース

<div class="wrapper">
    <div class="example2">
        <span class="blue">(spanタグ)<br>divタグの中のbox<br>
            横200px 縦100px</span><br>
        <span>span要素</span>
    </div>
</div>

 

サンプル(1)のCSS指定「class="example」に「margin:0 auto;」だけ加えています。

サンプル(3)のCSSソース

.example2 {
	width:200px;
	height:100px;
	padding:5px;
	border:1px solid orange;
	background:yellow;
	margin:0 auto;
	}

 

見た目は変わりません。

サンプル(3)

(spanタグ)
divタグの中のbox
横200px 縦100px

span要素

 

戻るボタン