Update index.html

Author: Yamonov

index.html

@@ -76,15 +76,15 @@
         }
         input[type="range"]::-webkit-slider-thumb {
             -webkit-appearance: none;
-            width: 24px; /* 元は16px */
-            height: 24px; /* 元は16px */
+            width: 32px;
+            height: 32px;
             background: #4CAF50;
             border-radius: 50%;
             cursor: pointer;
         }
         input[type="range"]::-moz-range-thumb {
-            width: 24px;
-            height: 24px;
+            width: 32px;
+            height: 32px;
             background: #4CAF50;
             border-radius: 50%;
             cursor: pointer;
@@ -324,7 +324,8 @@
 		const dpr = window.devicePixelRatio || 1;
 		const width = Math.floor(container.clientWidth);
 		// 高さはアスペクト比2:1で自動調整、最小高さ200px
-		const height = Math.max(Math.round(width / 2), 200);
+		// 変更後（高さを1.3倍に）
+		const height = Math.max(Math.round((width / 2) * 1.3), 200);
 		canvas.width = width * dpr;
 		canvas.height = height * dpr;
 		canvas.style.width = width + 'px';
@@ -483,10 +484,10 @@
 		drawDensityGradientBarPixel(sharpened);
 
 		// グラフの描画設定
-		const padX = 0.06 * canvas.clientWidth;
-		const padY = 0.12 * canvas.clientHeight;
+		const padX = 0.03 * canvas.clientWidth;
+		const padY = 0.08 * canvas.clientHeight;
 		const graphWidth = canvas.clientWidth - padX * 2;
-		const graphHeight = canvas.clientHeight - padY * 2 - 40;
+		const graphHeight = canvas.clientHeight - padY * 2 - 24;
 		const graphX = padX;
 		const graphY = padY;
 
@@ -523,7 +524,7 @@
 		ctx.fillStyle = '#333';
 		ctx.font = '12px Arial';
 		ctx.textAlign = 'center';
-		ctx.fillText('ピクセル位置', graphX + graphWidth / 2, graphY + graphHeight + 40);
+		ctx.fillText('ピクセル位置', graphX + graphWidth / 2, graphY + graphHeight + 28);
 
 		// ---- 目盛り ----
 		ctx.fillStyle = '#666';
@@ -532,7 +533,7 @@
 		// X軸目盛り（ピクセル位置）
 		for (let i = 0; i <= 40; i += 2) {
 			const x = graphX + (graphWidth / 40) * i;
-			ctx.fillText(i.toString(), x, graphY + graphHeight + 15);
+			ctx.fillText(i.toString(), x, graphY + graphHeight + 10);
 		}
 
 		/**