More than 5 years have passed since last update.

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

Posted at 2018-11-13

※ はてなブログから技術ネタを移動しました
※ 初稿：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宣言って大事なんだね。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up