ウィンドウ全体をスクロールバーなしで占める方法 - HTMLガイド

CSSを使用した方法:

<!DOCTYPE html>
<html>
<head>
<style>
html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
// キャンバスの描画コードをここに追加する
</script>
</body>
</html>

JavaScriptを使用した方法:

<!DOCTYPE html>
<html>
<head>
<style>
html, body {
  margin: 0;
  padding: 0;
}
#canvas {
  position: absolute;
  top: 0;
  left: 0;
}
</style>
<script>
window.addEventListener('load', function() {
  var canvas = document.getElementById('canvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  // キャンバスの描画コードをここに追加する
});
</script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>

これらの方法では、HTMLとCSSまたはJavaScriptを使用してキャンバス要素をウィンドウ全体に広げます。CSSの例では、htmlとbody要素にmargin: 0;とpadding: 0;を設定し、overflow: hidden;を追加してスクロールバーを非表示にします。そして、#canvasセレクタにposition: absolute;、top: 0;、left: 0;、width: 100%;、height: 100%;を設定してキャンバス要素をウィンドウ全体に広げます。

JavaScriptの例では、ウィンドウのloadイベントを監視してキャンバスの幅と高さをウィンドウのサイズに合わせて再設定します。これにより、ウィンドウのサイズが変更された場合でもキャンバスが常にウィンドウ全体に広がるようになります。

いずれの方法を選んでも、キャンバス要素はウィンドウ全体に広がり、スクロールバーは表示されません。これにより、キャンバスを使用したレスポンシブなデザインを実現することができます。