DOCTYPE宣言の有無で変わるレイアウト

1697 ワード
はてなブログ HTML5 備忘録 HTML HTML テキストリンク

※ はてなブログから技術ネタを移動しました
※ 初稿：2017/07/14

DOCTYPE宣言の有無でレイアウトが結構変わると今頃気づきました。理由はググれば分かるんですが、参考までに具体例を示しておきます。

使用したコード

<!DOCTYPE html> <!-- この行の有無によって何が変わるか -->
<style>
video {
    background-color: black;
    width: 100%;
    height: 100%;
}
</style>
<video src="http://localhost:3000/media/video.mp4"/>

例として"width: 100%; height: 100%;"指定のHTMLVideoElementの高さの変化をご覧ください。これの1行目のDOCTYPE宣言の有無で比較しています。ブラウザはmacOS SierraのSafariですが、Chromeでもほぼ同様の変化でした。

例1: DOCTYPE宣言なし

例2: DOCTYPE宣言あり

ブラウザのウィンドウ枠とか見にくいんですが、DOCTYPEなしだと高さはブラウザのウィンドウ枠いっぱいまで。DOCTYPEありだと"height: 100%"のstyle指定があってもvideoHeightにフィットしてそれ以上の高さになりません。

DOCTYPE宣言って大事なんだね。