もう使わない!HTMLの非推奨タグとCSSでの代替方法まとめ

HTMLやCSSには、以前はよく使われていたけれど現在は非推奨となったタグや属性があります。ここでは、以前の使い方の例と、HTML5/CSSでの代替方法を色分けして見やすくまとめました。

1 非推奨HTMLタグ一覧(HTML4 → HTML5移行)

タグ 用途 以前の使い方例 代替方法(HTML5/CSS)
<font> 文字色・フォント・サイズ <font color="red" size="4">文字</font> CSS: color, font-size, font-family
<center> 中央揃え <center>中央文字</center> CSS: text-align: center;
<big> 文字を大きく表示 <big>大きい文字</big> CSS: font-size
<strike> 打ち消し線 <strike>打ち消し文字</strike> CSS: text-decoration: line-through;
<u> 下線 <u>下線文字</u> CSS: text-decoration: underline;
<applet> Javaアプレット埋め込み <applet code="Example.class" width="300" height="200"></applet> 非対応。JavaScriptやプラグインで代替
<marquee> 文字のスクロール <marquee>スクロール文字</marquee> CSSアニメーションやJavaScriptで代替
<bgsound> 自動音声再生 <bgsound src="sound.wav"> HTML5: <audio> や JavaScript

2 非推奨HTML属性一覧(以前の使い方と代替)

属性 用途 以前の使い方例 代替方法(CSS)
bgcolor 背景色 <table bgcolor="#ffcc00"> CSS: background-color
align 文字・画像の位置 <div align="center">中央</div> CSS: text-align, float, display
border テーブル枠線 <table border="1"> CSS: border
background 背景画像 <body background="bg.jpg"> CSS: background-image
width / height(画像タグ) 画像サイズ <img src="img.jpg" width="300" height="200"> CSS: width, height

3 まとめ

HTML4で使われていたタグや属性は、見た目だけを指定するものが多く、現在はCSSやHTML5のセマンティックタグに置き換えるのが推奨です。
背景色や背景画像、文字装飾はCSSで統一することで、レスポンシブ対応やデザインの変更も簡単になります。