<html lang="ja"><meta charset="utf-8">
<meta name="viewport"content="width=device-width,initial-scale=1.0">

<style>
body{font-family:Arial, sans-serif;
margin:20px;
background-color:#ffffff;
color:#123456;}
h1{font-size:1.4em;}
.ボックス{max-width:400px;
margin:0 auto;
background:#ffffff;
padding:20px;
border:solid 1px #abcdef;
border-radius:8px;
box-shadow:0 4px 6px rgba(0,0,0,0.1);}
label{display:block;
margin-bottom:8px;
color:#456789;
font-weight:bold;}
input[type="text"]{width:100%;
padding:10px;
margin-bottom:16px;
border:1px solid #123456;
border-radius:4px;font-size:1.4em;}
button{width:100%;
padding:10px;
background-color:#1e99ff;
color:white;
border:none;
border-radius:4px;
cursor:pointer;
font-size:1.2em;}
button:hover{background-color:#456789;}
.リザルト{margin-top:20px;
font-size:1.2em;}
::placeholder{color:#facebc;
font-size:1.2em;}
</style>
<div class="ボックス">
<h1>郵便番号検索</h1>
<label for="zipcode">郵便番号を入力してください:</label>
<p style="font-size:12px;color:red;">※ 郵便番号にハイフン ( - ) を入れても,<br>入れなくてもどちらでもOK.</p>
<input type="text"id="番号" placeholder="例:1000001">
<button onclick="さーち()">検索</button>
<div class="リザルト"id="目印"></div>
</div>

<script>
function さーち()
{const 捜す=document.getElementById("番号").value.trim();
const 郵便=document.getElementById("目印");
if(捜す==="")
{郵便.textContent="郵便番号を入力してください.";
return;}
const あぷり=`https://zipcloud.ibsnet.co.jp/api/search?zipcode=${捜す}`;
fetch(あぷり)
.then(response=>response.json())
.then(data =>{if(data.results)
{const あどれす=data.results[0];
郵便.textContent=`${あどれす.address1}
${あどれす.address2}
${あどれす.address3}`;}
else
{郵便.textContent="該当する住所が見つかりませんでした.";}})
.catch(error=>{console.error("エラー:",error);
郵便.textContent="検索中にエラーが発生しました.";});}
</script>

</html>