「このコードは古い！使ってないよね？！」
もし今でもこんなコードを使っていたら、ちょっと待って！
何年もリニューアルしていないサイトの更新をお願いされた時、見慣れない書き方が。
へーこんな書き方もあるんだ！って真似したら危険！
技術が進化した現在では、それらの古いコードを使い続けると、以下のような問題が起こることがあります。
- サイトが重くなる
- デザインが古く見える
- セキュリティリスクが高まる
特に初心者の方は、既存のコードをそのまま真似してしまうことも多いですが、古い方法を踏襲するのは危険です。
今回はよく見かける古いコードと、現代的な置き換え方法を解説します！
🚫 <font>タグで色を指定？
昔のウェブサイトでは、文字の色やサイズを <font> タグで直接指定するのが一般的でした。例えば以下のようなコードです：
<font color="red" size="4">重要なお知らせ！</font>
これ、今見るととても非効率的ですよね。HTMLの役割は「構造」を定義することです。
一方で、デザイン（見た目）を定義するのはCSSの役割。<font> タグは、HTMLとCSSの役割を混同させてしまっている典型例です。
現在では、CSSでスタイリングするのが標準的です。以下のように書き換えましょう：
<p class="important">重要なお知らせ！</p>
.important {
color: red; font-size: 1.25rem;
}
これならコードが読みやすく、スタイル変更も簡単です。
🚫 floatでレイアウト？
昔は、Webページのレイアウトを作るために float プロパティを多用していました。例えば以下のようなコード：
.container { width: 100%; }
.left { float: left; width: 30%; }
.right { float: right; width: 70%; }
この方法は、回り込みや余白の調整が非常に面倒で、追加のclearfixコードも必要になるなど、非効率的な面が多くありました。
現在では、レイアウトには Flexbox や CSS Grid を使うのが主流です。Flexboxを使えば、たった数行で簡単にモダンなレイアウトが作れます
.container { display: flex; gap: 1rem; }
.left { flex: 1; }
.right { flex: 2; }
Flexboxは、子要素を柔軟に配置できるため、レスポンシブデザインも簡単に実現できます！
🚫 <center>タグで中央揃え？
中央揃えしたいときに <center> タグを使う方法、見たことありませんか？例えばこんな感じ
<center>お知らせ</center>
これも、現在では完全に非推奨です。HTMLの構造を汚してしまい、デザインの調整が困難になります。
現代では、CSSを使って中央揃えを実現します：
<p class="center-text">お知らせ</p>
.center-text { text-align: center; }
たったこれだけで、見た目がスッキリし、将来的なデザイン変更も簡単です。
🚫 テーブルでレイアウト？
ウェブ開発の黎明期には、ページ全体のレイアウトをテーブル（<table>）で作成することが一般的でした。例えば以下のようなコード
<table><tr><td>左側のコンテンツ</td><td>右側のコンテンツ</td></tr></table>
しかし、テーブルは本来、データの表示のために設計されたものです。これをレイアウトに使うのは、メンテナンス性や拡張性の面で非常に問題があります。
現在では、FlexboxやCSS Gridを使ってレイアウトを作成するのが推奨されています。例えば以下のように書き換えることができます
<div class="layout"><div>左側のコンテンツ</div><div>右側のコンテンツ</div></div>
.layout {display: grid;grid-template-columns: 1fr 1fr;gap: 1rem;}
これならコードもシンプルで、デザインの自由度も大幅に向上します。
まとめ
HTML5で廃止されたタグや古いCSSのテクニックをそのまま使っていると、以下の問題に直面することがあります：
- コードが複雑で読みにくい
- サイトのパフォーマンスが低下する
- モダンブラウザで正しく表示されない
ウェブ開発は常に進化しています。最新の技術やベストプラクティスを取り入れて、効率的でメンテナンス性の高いコードを書きましょう！
廃止タグを知っておくことも重要！