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>だけでいいみたいよ。
セレクトボックスでデータ更新を実現する仕組みと実装例
2024.11.29
「チェックボックスを使ったデータ更新の仕組み」に続く記事として、今回はセレクトボックスを活用したデータ更新の方法をご紹介します。複数の選択肢から値を選び、それをサーバー側に送信して更新する仕組みを、実装例とともに解説します。
チェックボックスでデータ更新を実現する仕組みと実装例
2024.11.27
一覧画面のチェックボックスを用いて、データの状態を即時に更新する仕組みを実装する方法を解説します。HTMLの構造設計からJavaScriptの連携処理、サーバーサイドでの対応まで、説明しています。
datalistとJavaScriptで作るタグ入力フォームの実装ガイド
2024.11.17
ブログやアプリケーションで便利な「タグ入力フォーム」。この記事では、datalist要素を利用して、既存タグの選択と新規タグの追加を同時に実現するUIの作成方法をご紹介します。さらに、JavaScriptとCSSを活用して、複数選択対応やタグ削除機能、Enterキーでのタグ追加機能も実装。タグ入力フォームを効率的かつユーザーフレンドリーにカスタマイズする方法を詳しく解説します。
ページリロードボタンを作成するシンプルな方法
2023.05.25
リロード機能を持つボタンを追加したい時に便利な、location.reload() を利用した実装方法を解説します。初心者にもわかりやすいコード例付きです。