HTMLキャンバスをWebページ全体に表示させる方法【CSS解説】

HTMLの<canvas>要素をWebページの画面全体に表示させたい場合、キャンバスの幅と高さをページの100%に設定する必要があります。しかし、単にwidth: 100%と指定するだけでは、ブラウザのデフォルトスタイルによって余白が残ってしまうことがあります。

以下のCSSを使うことで、キャンバスをページ全体にぴったりと表示させることができます。

キャンバスを全画面表示にするCSS

* {
    margin: 0;
    padding: 0;
}
body, html {
    height: 100%;
}
#canvas {
    position: absolute;
    height: 100%;
    width: 100%;
}

各プロパティの解説

1. マージンとパディングのリセット

ユニバーサルセレクタ*を使って、すべての要素のmargin（外余白）とpadding（内余白）を0にリセットします。ブラウザにはデフォルトのスタイルシートが用意されており、body要素などに自動的に余白が設定されるため、このリセットが重要です。

2. htmlとbodyに高さ100%を指定

htmlとbodyにheight: 100%を指定することで、親要素の高さが画面いっぱいに設定されます。パーセンテージによる高さ指定は親要素の高さを基準とするため、この設定がないと子要素のheight: 100%が正しく機能しません。

3. キャンバスの絶対配置

position: absoluteを指定することで、キャンバスをドキュメントの通常フローから切り離し、width: 100%とheight: 100%によって画面全体に広げます。

補足：ビューポート単位を使う方法

よりシンプルに実装したい場合は、ビューポート単位のvw・vhを使う方法もあります。

#canvas {
    width: 100vw;
    height: 100vh;
    display: block;
}

100vwはビューポート（表示領域）の幅の100%、100vhは高さの100%を意味します。ただし、canvasはインライン要素として扱われるため、display: blockを指定して意図しない余白が発生するのを防ぐとよいでしょう。

まとめ

キャンバスを全画面表示にするポイントは以下の3つです。

• デフォルトの余白をリセットする
• htmlとbodyにheight: 100%を設定する
• キャンバスに絶対配置またはビューポート単位を適用する

これらの設定を組み合わせることで、キャンバスをWebページ全体にぴったりと表示させることができます。