xhtmlのDOCTYPE宣言の重要性とレイアウト崩れを防ぐ方法
作成日:2011.02.20
Movable Typeで作成したサイトがIEでレイアウト崩れを起こした原因は、DOCTYPE宣言の不適切な記述でした。この記事では、XHTMLで正しいDOCTYPE宣言を行う方法と、よくある誤りについて解説します。DOCTYPE宣言がどのようにブラウザの表示に影響するのかを理解し、IEでの表示崩れを防ぐためのヒントを提供します。
error この記事は最終更新日から14年以上が経過しています。
先日（というかかなり前）、Movable Type で作ったサイトのテンプレートをクライアントさんが自分で修正したら、IEでレイアウトが崩れてしまった、という問合せがきたのでソースを見てみたら、僕が書いた xhtml のソースでは DOCTYPE宣言を、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">としていたところが、何故か、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">になっていたのが原因だった、ということがありました。
xhtml の DOCTYPE宣言は、
<!DOCTYPE html PUBLIC "公開識別子" "システム識別子">という形式になっていて、公開識別子とシステム識別子の両方の記述が必須になっています。
xhtml ではなく、HTML4 ではシステム識別子を省略して、公開識別子のみの記述で、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">のような感じでもOKですが。
多分、クライアントさんが何らかの html編集ソフトを利用したら、ソフト側で勝手に DOCTYPE宣言を自動で修正してシステム識別子を省略しちゃったんじゃないかなぁ、と想像してるんですが、もしそうなら迷惑なソフトですね。
というわけで、 xhtml1.x でのDOCTYPE宣言は、大体以下のような感じになります。
xhtml1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
xhtml1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
xhtml1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xhtml1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">え？ 「HTML5は？」って？ ｇｇｒｋｓ
<!DOCTYPE html>だけでいいみたいよ。
奈良市を拠点に、26年以上の経験を持つフリーランスWebエンジニア、阿部辰也です。
これまで、ECサイトのバックエンド開発や業務効率化システム、公共施設の予約システムなど、多彩なプロジェクトを手がけ、企業様や制作会社様のパートナーとして信頼を築いてまいりました。
【制作会社・企業様向けサポート】
Webシステムの開発やサイト改善でお困りの際は、どうぞお気軽にご相談ください。小さな疑問から大規模プロジェクトまで、最適なご提案を心を込めてさせていただきます。
ぜひ、プロフィールやWeb制作会社様向け業務案内、一般企業様向け業務案内もご覧くださいね。
highlight.js 入門 ― CDN を活用したシンタックスハイライトの基本ガイド
2025.06.05
highlight.js を使ったシンタックスハイライトの導入方法を具体的なコード例とともに紹介します。CDN 経由でライブラリを読み込み、HTML コード内の <pre> と <code> タグを利用して、正確な言語指定とスタイル適用を実現する手法を分かりやすく解説。初心者でもすぐに実装できる内容となっています。
ダッシュボードのパフォーマンス改善：Ajaxとiframeの実践例
2024.12.11
サーバーサイドですべてを処理してから画面を出力するのではなく、データを分割して効率的に表示する手法をご紹介。Ajaxとiframe、それぞれの特徴や実装例をわかりやすく解説します。
Google FontsのMaterial Symbols 基本設定メモ
2024.12.10
Google FontsのMaterial Symbols and Iconsの基本的な使い方をまとめた記事です。導入手順や、アイコンとテキストを綺麗に揃えるためのCSS設定例について解説しています。
contenteditableで作るインライン編集システムとデータ送信の仕組み
2024.12.03
contenteditable属性を利用すれば、HTML内のテキストを直接編集できるインターフェースを構築できます。 本記事では、contenteditableを活用したインライン編集機能の実装手法について解説します。 UIの向上を目指す際の参考として。