<!DOCTYPE html>
<html lang="ja">
<head>	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>アリクイ身長差メーカー</title>


	<link href="https://fonts.googleapis.com/css2?family=Kaisei Opti:wght@300;400;500&display=swap" rel="stylesheet">
	<script src="js/html2canvas.min.js"></script>
	<script src="js/draggabilly.pkgd.js"></script>
	<script src="js/draggabilly.pkgd.min.js"></script>
	<link rel="stylesheet" href="css/style.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>

</head>
<body>

	<header>
	<a href="howto.html" style="font-size: 0.8rem; color: #555;">つかいかた/利用規約</a><br><br>

	<a href="kuchibashi.html" style="font-size: 0.8rem; color: #555;">くちばしリスとお話をする</a>
	</header>

	<table>
		<tr>
			<th><h1>アリクイ身長差メーカー</h1></th>
			<th><img id="space-image" src="image/アリクイ.png" alt="スペース・オオアリクイ"></th>
		</tr>
	</table>
	<!-- 入力欄 -->
	<div>
		<label for="name-input">名前</label><br>
		<input type="text" id="name-input" placeholder="未入力可"><br>
		<label for="height-input">身長</label><br>
		<input type="number" id="height-input" placeholder="1㎝～300㎝まで" min="300">
	</div>



	<!-- ボタン -->
	<input type="file" id="image-input" accept="image/*" multiple>
	<button id="screenshot-btn">画像を出力</button><br>
	<button id="toggle-scale-btn">目盛り表示/非表示</button>
	<button id="toggle-name-btn">名前表示/非表示</button>
	<button id="toggle-height-btn">身長表示/非表示</button><br>
	<button id="delete-btn">すべての画像を削除</button>
	<button id="shower-btn">？？？</button>
	<span>&nbsp;</span>

	<div id="image-container">
		<!-- 目盛りの表示 -->
		<div class="scale-graduations" id="scale-graduations">
			<span>&nbsp;</span>
			<div class="line"></div>
			<span>-10 cm</span>
			<div class="line"style="color: #F00;"></div>
			<span>0 cm</span>
			<div class="line"></div>
			<span>10 cm</span>
			<div class="line"></div>
			<span>20 cm</span>
			<div class="line"></div>
			<span>30 cm</span>
			<div class="line"></div>
			<span>40 cm</span>
			<div class="line"style="color: #999;"></div>
			<span>50 cm</span>
			<div class="line"></div>
			<span>60 cm</span>
			<div class="line"></div>
			<span>70 cm</span>
			<div class="line"></div>
			<span>80 cm</span>
			<div class="line"></div>
			<span>90 cm</span>
			<div class="line"style="color: #999;"></div>
			<span>100 cm</span>
			<div class="line"></div>
			<span>110 cm</span>
			<div class="line"></div>
			<span>120 cm</span>
			<div class="line"></div>
			<span>130 cm</span>
			<div class="line"></div>
			<span>140 cm</span>
			<div class="line"style="color: #999;"></div>
			<span>150 cm</span>
			<div class="line"></div>
			<span>160 cm</span>
			<div class="line"></div>
			<span>170 cm</span>
			<div class="line"></div>
			<span>180 cm</span>
			<div class="line"></div>
			<span>190 cm</span>
			<div class="line"style="color: #999;"></div>
			<span>200 cm</span>
			<div class="line"></div>
			<span>210 cm</span>
			<div class="line"></div>
			<span>220 cm</span>
			<div class="line"></div>
			<span>230 cm</span>
			<div class="line"></div>
			<span>240 cm</span>
			<div class="line"style="color: #999;"></div>
			<span>250 cm</span>
			<div class="line"></div>
			<span>260 cm</span>
			<div class="line"></div>
			<span>270 cm</span>
			<div class="line"></div>
			<span>280 cm</span>
			<div class="line"></div>
			<span>290 cm</span>
			<div class="line"style="color: #F00;"></div>
			<span>300 cm</span>
			<div class="line"></div>
			<span>310 cm</span>
			<div class="line"></div>
			<span>&nbsp;</span>
		</div>
		<h2>アリクイ身長差メーカー　　</h2>
	</div>

	<script src="js/common.js"></script>


<a>綺麗に利用するためのヒント<br></a>
・表示する画像は、背景を透過していると見栄えがいいです。<br>
・ご自身で透過する際は、上下左右の余白を無くしてください。<br>
・スマホの場合は、横画面にも対応しています。<br>
・横画面のほうが、沢山の画像を並べられます。


	<footer>
		<p class="footer-text">c 2025 身長差メーカー. All rights reserved.</p>
	</footer>
</body>
</html>
