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

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

サンプル（１）の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要素も中央揃えになります。

サンプル（１）

 

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

サンプル（２）のCSSソース

center.left  {
	text-align:left;
	}

 

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

サンプル（２）

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

サンプル（３）のhtmlソース

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

 

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

サンプル（３）のCSSソース

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

 

見た目は変わりません。

サンプル（３）