🖼️
canvasをWebページいっぱいに表示するCSS
canvasをページいっぱい表示するCSS
結論
こちらの CSS を canvas、HTML、Body 要素に適用すると実現可能です。
以上！ という感じですが、これだけだと寂しいのでおまけの話もします。
おまけの話
今回は備忘録的に残しておきたかったため記事にしました。
「canvas を Web ページいっぱいに表示をする」というのは、筆者がブラウザ上で 3D 表現をしたいときによく実装する処理です。具体的には Babylon.js というライブラリを使ってページを作るのですが、シンプルなデモであればページ遷移や他の DOM 要素も必要ないので Pure-JS によるペライチの Web ページを作ります。
Web 上での 3D 表現には WebGL とか WebGPU を使うのが慣習なので、canvas 要素からそれらの API にアクセスして使います。できれば canvas を画面いっぱいにピッタリ表示出来ていればかっこいいですよね。しかし、なんだかんだwidth: 100%やheight: 100%を指定するだけだとウィンドウの大きさによってははみ出てしまい、全面に表示しているはずなのにスクロールバーが出てしまうなどしてカッコ悪いです。
とはいえ致命的な問題でもないので解決を先延ばしにしてきたのですが、ふと「Babylon.js 公式のツールはどうしてるんだろう」と疑問になり調べてみたところ今回ご紹介した CSS を発見しました。
今回は「画面いっぱいに」をテーマにしたので HTML 要素や Body 要素にも適用すれば実現可能ですが、canvas 要素にだけ適用すれば親要素の表示可能エリアいっぱい広がる見え方になります。
この内容がご参考になれば嬉しいです。最後まで読んでいただきありがとうございました。
Discussion