negl のページ構成
negl を動かす際は以下の３つの要素を HTML 内に配置してください。
#global-containerは body の直下に配置されるセレクタで、ページの全体を囲む要素に付与してください。.page-containerは global-container の中に配置され、ページの主要な内容を囲む要素に付与してください。#canvasは canvas 要素に付与し、画面いっぱいに広げ、常に背面に配置するようにスタイルを当ててください。
⚠️
canvas要素を.page-container 内には配置しないようにしてください。
これらのセレクタやタグを適切な場所に配置することで、negl が正しく動作します。見本の HTML は以下の通りです。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- index.jsの読み込み -->
<script type="module" src="./scripts/index.js"></script>
</head>
<body>
<!-- 1. 必ず必要なタグ -->
<div id="global-container">
<!-- 2. 必ず必要なタグ -->
<div class="page-container">
<!-- ここに必要なタグを記述 -->
</div>
<style>
/* 3. canvasを画面一杯まで広げる。 */
#canvas {
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
/* canvas要素を背面に移動 */
z-index: -1;
}
</style>
<!-- 3. 必ず必要なタグ -->
<canvas id="canvas"></canvas>
</div>
</body>
</html>#global-containerや.page-container等のセレクタは変更することができます。変更方法はセレクタの変更を確認してください。