xhtmlのDOCTYPE宣言の重要性とレイアウト崩れを防ぐ方法
2011.02.20
error この記事は最終更新日から13年以上が経過しています。
先日（というかかなり前）、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>だけでいいみたいよ。
ダッシュボードのパフォーマンス改善：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の向上を目指す際の参考として。
セレクトボックスでデータ更新を実現する仕組みと実装例
2024.11.29
「チェックボックスを使ったデータ更新の仕組み」に続く記事として、今回はセレクトボックスを活用したデータ更新の方法をご紹介します。複数の選択肢から値を選び、それをサーバー側に送信して更新する仕組みを、実装例とともに解説します。