[解決済み] <html xmlns="http://www.w3.org/1999/xhtml">」は何をするのですか?
質問事項
私のウェブサイトで何が起こっているのか信じられません。この行を追加すると
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html>
<html>
<head>
すべて正常に動作します。そして、そうしないと、CSSがめちゃくちゃになり、すべてが異なって、レイアウトが醜くなります。
この一行ですべての問題が解決するわけがない!
どのように解決するのか?
通常は
<!DOCTYPE>
宣言は、HTML系言語のバージョン(この場合はHTMLかXHTMLか)を区別するために使われます。
マークアップ言語が違えば、動作も違ってきます。私の好きな例は
height:100%
. ブラウザで次のように見てください。
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
table { height:100%;background:yellow; }
</style>
</head>
<body>
<table>
<tbody>
<tr><td>How tall is this?</td></tr>
</tbody>
</table>
</body>
</html>
... そして、次のものと比較してください。(特に
<!DOCTYPE>
宣言)
HTML (癖のあるモード)
<html>
<head>
<style type="text/css">
table { height:100%;background:yellow; }
</style>
</head>
<body>
<table>
<tbody>
<tr><td>How tall is this?</td></tr>
</tbody>
</table>
</body>
</html>
テーブルの高さが大幅に違うことにお気づきでしょう。2つのドキュメントの違いは、マークアップの種類だけなのです
それはいいとして、では、その前に
<html xmlns="http://www.w3.org/1999/xhtml">
はどうするのでしょうか?
質問の答えになっていませんが。技術的には
xmlns
属性は、XHTML ドキュメントのルート要素で使用されます:(によると
ウィキペディア
)
XHTML文書のルート要素は、必ず
html
を含む必要があります。xmlns
属性を使って XHTML の名前空間と関連付けることができます。
あのね、XHTMLはHTMLではなく
XML
- という、まったく異なる生き物です。(まあ、一種異質な生き物ですが)
xmlns
属性は、ドキュメントが有効なXMLであるために必要なものの1つに過ぎません。なぜか?標準に携わっている誰かがそう言ったからです ;) (詳しくは
ウィキペディアのXML名前空間
しかし、その情報はあなたの質問には関係ないので、省略します!)
しかし、それならなぜ
<html xmlns="http://www.w3.org/1999/xhtml">
はCSSを修正するのですか?
このように文書を構造化すると...(で提案されているように コメント )
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html>
<html>
<head>
[...]
...があなたのドキュメントを修正しているのは、あなたがCSSやHTMLについてそれほど知らないのではと思わせ(悪気はない!)、本当は
なく
<html xmlns="http://www.w3.org/1999/xhtml">
正常に動作しており
と
<html xmlns="http://www.w3.org/1999/xhtml">
でなく、ただ
考える
というのも、あなたは無効なHTMLを書くのに慣れていて、そのために
クワークスモード
.
私が提供した上記の例は、その同じ問題の例です。ほとんどの人は、次のように考えています。
height:100%
の高さになるはずです。
<table>
はウィンドウ全体であること、そして
DOCTYPE
がCSSを壊している...というわけではありません。
html, body { height:100%; }
のCSSルールを適用することで、目的の効果を得ることができます。
関連
-
[解決済み] HTMLでSVGを使用して三日月を描画する
-
[解決済み] HTMLの#記号の文字実体は?
-
[解決済み] HTML5 Validation Error: body start tag が見えたが、同じタイプの要素がすでに開かれていた
-
[解決済み] HTML Divのボーダーが表示されない
-
[解決済み] <meta http-equiv="X-UA-Compatible" content="IE=edge">は何をするのですか?
-
[解決済み] HTMLのid属性に有効な値は何ですか?
-
[解決済み] HTMLの "role "属性は何のためにあるのですか?
-
[解決済み] CSSセレクタの"~"(チルダ/スクイグル/ツイドル)はどういう意味ですか?
-
[解決済み】なぜHTMLは "chucknorris "を色と見なすのか?
-
[解決済み】enctype='multipart/form-data'とはどういう意味ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] (X)HTMLにおける "PRE "タグの用途は何ですか?
-
[解決済み] IFrameからボーダーを取り除く
-
[解決済み] 必要なキーに一致するルートがありません。[:id]
-
[解決済み] ionic 4でion-buttonをセンタリングする方法は?[重複しています]
-
[解決済み] What is the difference between <p> and <div>?
-
[解決済み] Bootstrapのカラム内で画像を中央に配置する方法 [重複]について
-
[解決済み] HTML CSS インビジブルボタン
-
[解決済み] Font Awesome アイコンをプレースホルダーで使用する
-
[解決済み] Railsアプリケーションにアイコンを追加する
-
[解決済み】XMLの "xmlns "の意味は?