◀︎ ▶︎

<html lang="ja">
<meta charset="utf-8">
<meta name="viewport"content="width=device-width,initial-scale=1.0">
<title>Illustrator Tool の説明</title>
<style>
body{display:flex;
min-height:100vh;
justify-content:center;
margin:0;
background-color:#ffffff;}

h1{margin-top:50px;
margin-left:30px;
font-size:16px;
color:#123456;}

h2{margin-left:0px;
text-align:center;
font-size:12px;
color:#456789;}

header{position:relative;
padding:20px;
text-align:center;}

input{margin:10px;
color:#123456;
font-size:20px;
width:300px;
text-align:center;}

.アイフォン_シェイプ{position:relative;
overflow:hidden;
margin-top:4px;
margin-bottom:4px;
padding:20px;
text-align:center;
overflow-y:auto;
background-color:#f0f8fa;
border:1px solid #0088cc;
border-radius:40px;
width:100%;
max-width:800px;
aspect-ratio:9 / 19.5;}

section{text-align:center;
margin-top:20px;}

form{margin-top:20px;}

.ハンバーガー{position:absolute;
top:10px;
right:10px;
cursor:pointer;
padding:2px 6px 4px;
background-color:#123456;
color:#ffffff;
border:none;
font-size:20px;
border-radius:6px;}

nav{display:none;
text-align:left;
margin-top:20px;}

nav a{display:block;
padding:10px;
color:#123456;
text-decoration:none;
border-bottom:1px solid #dddddd;}

nav a:hover{background-color:#ddeeff;}

.クリック{display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
color:#123456;}
</style>

<div class="アイフォン_シェイプ">
<header>
<h1>Illustrator Tool の説明</h1>
<img src="logo_002.png"style="position:absolute;top:0px;left:0px;width:100px;height:100px;"alt="logo_002.png">
<h2>■□□□□□□□□□</h2>
<button class="ハンバーガー"onclick="とぐる_ぼたん()">☰</button>
</header>
<nav id="目印">
<a href="Sample_Coding_124-D.html">▷ Top Page ( Tool の説明 )</a>
<a href="Sample_Coding_124-E.html">▷ Game - 1 ( 質問を読んで画像を選択 )</a>
<a href="Sample_Coding_124-F.html">▷ Game - 2 ( 画像を見て答えを選択 )</a>
<a href="#">▷ Site Map</a>
</nav>
<main>

</html>