p5.js調整

Author: y-yamasaki

assets/css/base.css

@@ -59,12 +59,13 @@ html {
     scroll-behavior: smooth;
     -webkit-text-size-adjust: 100%;
     text-size-adjust: 100%;
+    overflow-x: hidden; /* 横スクロール防止 */
 }
 
 body {
     margin: 0;
     padding: 0;
-    overflow-x: hidden;
+    overflow-x: hidden; /* 横スクロール防止 */
     font-family: var(--font-body);
     line-height: 1.6;
     color: var(--color-text);
@@ -88,6 +89,8 @@ body {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
+    overflow-wrap: break-word; /* 長い単語の折り返し */
+    word-break: break-word; /* 長い単語の折り返し(互換性) */
 }
 
 h1,
@@ -197,6 +200,7 @@ button {
     margin: 0 auto;
     padding: 2.5rem 1.25rem;
     flex-grow: 1;
+    width: 100%; /* コンテナのはみ出し防止 */
 }
 
 .text-muted {

assets/js/menuAnimation.js

@@ -10,18 +10,16 @@ const repulsionStrength = 20;
 let isMouseInsideBrowserWindow = false;
 
 function setup() {
-  // ページの全体の高さを取得
-  let pageHeight = Math.max(
-    document.body.scrollHeight,
-    document.documentElement.scrollHeight,
-    document.body.offsetHeight,
-    document.documentElement.offsetHeight,
-    document.body.clientHeight,
-    document.documentElement.clientHeight,
-  );
+  // スクロールバーを含まないビューポートの幅を取得
+  let w = document.documentElement.clientWidth;
+  // 背景固定 (fixed) なので、ページ全体の高さではなくウィンドウの高さを使用
+  let h = windowHeight;
 
-  animationCanvas = createCanvas(windowWidth, pageHeight);
+  animationCanvas = createCanvas(w, h);
   animationCanvas.position(0, 0);
+
+  // position: fixed を明示的に設定（p5.jsのデフォルト動作による上書き防止）
+  animationCanvas.style("position", "fixed");
   animationCanvas.style("z-index", "-1");
   animationCanvas.style("pointer-events", "none");
 
@@ -40,15 +38,10 @@ function draw() {
 }
 
 function windowResized() {
-  let pageHeight = Math.max(
-    document.body.scrollHeight,
-    document.documentElement.scrollHeight,
-    document.body.offsetHeight,
-    document.documentElement.offsetHeight,
-    document.body.clientHeight,
-    document.documentElement.clientHeight,
-  );
-  resizeCanvas(windowWidth, pageHeight);
+  // リサイズ時もスクロールバーを含まない幅で計算
+  let w = document.documentElement.clientWidth;
+  let h = windowHeight;
+  resizeCanvas(w, h);
 }
 
 class Particle {
@@ -88,25 +81,29 @@ class Particle {
     this.pos.add(this.vel);
     this.acc.mult(0);
 
+    // 画面端の判定と位置補正
+    // (ウィンドウリサイズでキャンバスが小さくなった場合にパーティクルが外に残らないよう constrain で補正)
     if (
       this.pos.x > width - this.size / 2 ||
       this.pos.x < this.size / 2
     ) {
       this.vel.x *= -1;
-      if (this.pos.x > width - this.size / 2)
-        this.pos.x = width - this.size / 2;
-      if (this.pos.x < this.size / 2)
-        this.pos.x = this.size / 2;
+      this.pos.x = constrain(
+        this.pos.x,
+        this.size / 2,
+        width - this.size / 2,
+      );
     }
     if (
       this.pos.y > height - this.size / 2 ||
       this.pos.y < this.size / 2
     ) {
       this.vel.y *= -1;
-      if (this.pos.y > height - this.size / 2)
-        this.pos.y = height - this.size / 2;
-      if (this.pos.y < this.size / 2)
-        this.pos.y = this.size / 2;
+      this.pos.y = constrain(
+        this.pos.y,
+        this.size / 2,
+        height - this.size / 2,
+      );
     }
   }