【2026年版】そのHTML、もう古い？非推奨タグ・CSS・JavaScriptの書き方と代替方法

古いWebサイトの改修やLPのコーディングで、以前は一般的だったHTMLタグやCSSの書き方を見かけることがあります。

結論から言うと、非推奨のコードは新規制作で避けるべきですが、「古い」という理由だけですべて置き換える必要はありません。

大切なのは「仕様上の非推奨」「現在も有効だが注意が必要」「現在も有効」を分けて判断することです。

今回はMDN Web Docsを参考に、HTML・CSS・JavaScriptの代表例と代替方法を整理します。

HTML：使わない方がよい古いタグ

まずは、過去のWeb制作でよく使われていた廃止・非推奨の要素です。

古いタグ	代替方法	用途
`<font>`	CSSの`font-size`、`color`等	文字の装飾
`<center>`	`text-align: center`、Flexbox等	中央揃え
`<big>`	`font-size`	文字の拡大
`<strike>`	`<s>`または`<del>`	取り消し線。意味で使い分け
`<tt>`	`<code>`またはCSS	等幅文字
`<acronym>`	`<abbr>`	略語
`<marquee>`	必要性を再検討。必要な場合はCSSアニメーション等（動きの軽減設定に対応）	文字のスクロール
`<blink>`	点滅演出自体を再検討（必要なら動きの軽減設定にも配慮）	点滅表示
`<nobr>`	`white-space: nowrap`	改行禁止
`<frameset>`、`<frame>`	通常のHTML構造、CSS Grid等	旧式の画面分割
`<applet>`	JavaScript・Web API等で再設計	Javaアプレット
`<plaintext>`、`<xmp>`	`<pre><code>`＋エスケープ	ソース表示

注意：
<s>は「現在は正しくない情報」、<del>は「文書から削除された内容」を示します。
見た目が似ていても意味は異なります。

HTML属性：装飾をHTMLに書き込んでいないか

タグ自体は現在も使えても、古い装飾属性が残っている場合があります。

古い記述	見直し先
`align="center"`	CSSの`text-align`等
`bgcolor="#ffffff"`	`background-color`
`cellpadding="10"`	セルの`padding`
`cellspacing="0"`	`border-spacing`
`valign="middle"`	`vertical-align`
`hspace`、`vspace`	CSSの`margin`
`language="javascript"`	削除（通常は不要）
`frameborder="0"`	CSSの`border: 0`

ただし、<img width="600" height="400">は一律に削除すべきではありません。

画像の縦横比をブラウザーに伝え、レイアウトシフトを抑えるために有用です。

実際の画像サイズ・比率に合わせて指定しましょう。

CSS：古いプロパティと新しい書き方

旧記述	代替・見直し先	判断
`clip: rect(...)`	`clip-path: inset(...)`	非推奨。rect()とinset()は引数の意味が異なるため要調整
`page-break-before`	`break-before`	印刷時の互換性も確認
`page-break-after`	`break-after`	印刷時の互換性も確認
`page-break-inside`	`break-inside`	印刷時の互換性も確認
`word-wrap`	`overflow-wrap`	互換エイリアス。緊急修正不要
`display: -webkit-box`	`display: flex`	旧Flexbox構文
`display: -ms-grid`	`display: grid`	旧IE系の構文
`-moz-border-radius`	`border-radius`	古い接頭辞
`filter: progid:DXImageTransform...`	標準CSSの`filter`等	IE独自仕様

clip: rect(top, right, bottom, left)は要素の基準位置からの各辺を指定しますが、clip-path: inset(top right bottom left)は各辺から内側への距離を指定します。
数値をそのまま移しても同じ切り抜き範囲にならないため、実際の表示で確認してください。

ベンダープレフィックスはすべて不要になったわけではありません。
例えば一部のCSS機能では-webkit-付きの指定が依然として必要な場合があります。
対象ブラウザーと機能ごとの対応状況を確認してください。

「古い＝非推奨」ではないCSS

float、inline-block、position: absolute、px、!important、100vhはいずれも有効です。

floatは文字の回り込みに適し、複雑なページレイアウトにはFlexboxやGridが向いています。

モバイルの画面高では100dvhも選択肢ですが、100vhが廃止されたわけではありません。

webコードの判断フロー — 「非推奨」はMDN等の仕様上の扱い、「注意が必要」「現在も有効」はこの記事の実務上の整理です。
なお、target=”_blank” は現行仕様で暗黙的にnoopener相当となり、rel=”noopener”の追記が必須という意味ではありません。

JavaScript：見直したいAPIと書き方

以下には、仕様上の非推奨APIと、現在も有効ながら新規開発で別の書き方が選ばれやすい構文の両方を含みます。

旧記述	代替・改善方法
`document.write()`	`createElement()`、`append()`等
`event.keyCode`	`event.key`、`event.code`
`event.cancelBubble`	`stopPropagation()`
`event.returnValue = false`	`preventDefault()`
`document.all`	`querySelector()`等
`document.execCommand()`	Clipboard API等（用途に応じて）
`escape()`、`unescape()`	用途に応じて`encodeURIComponent()`、`decodeURIComponent()`等（結果は同一ではない）
`substr()`	`slice()`、`substring()`等（引数・負数の扱いに注意）
`getYear()`	`getFullYear()`
`setTimeout("run()", 1000)`	`setTimeout(run, 1000)`
`XMLHttpRequest`	新規実装では`fetch()`を検討
`var`	原則`const`、再代入時は`let`

substr(start, length)とslice(start, end)では第2引数の意味が異なります。
またescape()とencodeURIComponent()も同じ文字列を返すとは限りません。
自動的な一括置換は避け、入力値と出力結果をテストしてください。

XMLHttpRequestやvarは、単に古いからという理由で仕様上の非推奨と断定できません。
既存コードを変更する際は動作への影響を確認します。
また、document.execCommand()の代替は操作内容によって異なり、すべてをClipboard APIだけで置き換えられるわけではありません。
編集操作では取り消し履歴の保持など、移行先に同等の機能がないケースがあります。

修正例：古いHTMLを意味のある構造とCSSへ

修正前

<center>
  <font color="red" size="5">お知らせ</font>
</center>

修正後

<h2 class="notice-title">お知らせ</h2>

.notice-title {
  color: red;
  font-size: 1.5rem;
  text-align: center;
}

見出しであれば<h2>などの適切な要素を選び、装飾はCSSで管理します。
ただし、見出しでない文章を見た目だけのために見出しタグへ変えるのは避けてください。

既存サイトを見直す5ステップ

調査する：
HTML・CSS・JavaScriptを横断して、旧式タグ、装飾属性、非推奨API、旧ブラウザー向け構文を洗い出します。
検索結果にはコメントや文字列も含まれるため、実際の使用箇所を確認します。
　
分類する：
MDN等で仕様上のステータスとブラウザー対応を確認し、「非推奨」「有効だが注意が必要」「現在も有効」に分類します。後ろの2分類は実務上の整理であり、MDNの公式ステータス名ではありません。
　
代替方法を選ぶ：
同じ表示・操作・意味を維持できるかを検討します。clipやsubstr()のように、単純な文字列置換で同じ結果にならないものに注意します。
　
修正する：
影響範囲を限定し、必要ならバックアップやバージョン管理を利用して段階的に変更します。古いコードでも有効なものは無理に置換しません。
　
検証する：
主要ブラウザー、PC・スマートフォン、キーボード操作、フォーム、画像、印刷など対象サイトに必要な機能を確認します。可能なら変更前後の差分も比較します。