HTMLでの電話番号の自動マスク化方法

input要素とJavaScriptを使用したマスク化: HTMLのinput要素にtel型を指定し、JavaScriptを使って入力値をマスク化する方法です。以下はコード例です。

<input type="tel" id="phone" oninput="maskPhoneNumber(this)">
<script>
 function maskPhoneNumber(input) {
   // 入力値からハイフンやスペースを除去
   var phoneNumber = input.value.replace(/[-\s]/g, '');
   // マスク化された電話番号を表示
   input.value = mask(phoneNumber);
 }
 function mask(phoneNumber) {
   // 電話番号をマスク化する処理
   // 例: "09012345678" -> "090-1234-5678"
   return phoneNumber.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');
 }
</script>

上記のコードでは、input要素のoninput属性にmaskPhoneNumber関数を指定しています。入力値が変更されるたびに、maskPhoneNumber関数が呼び出され、入力値をマスク化して表示します。

CSSを使用した表示上のマスク化: HTMLとCSSを組み合わせて、表示上のマスク化を行う方法です。以下はコード例です。
```
<style>
 .masked-phone::after {
   content: attr(data-phone);
   /* マスク化された電話番号を表示 */
   /* 例: "09012345678" -> "090-1234-5678" */
   /* 具体的なマスキング処理はCSSで行わないため、JavaScriptで事前にマスク化が必要です */
 }
</style>
<span class="masked-phone" data-phone="090-1234-5678"></span>
```
上記のコードでは、span要素にmasked-phoneクラスを指定し、data-phone属性にマスク化された電話番号を設定します。CSSの::after擬似要素を使用して、data-phone属性の値を表示します。

上記の方法を利用することで、HTMLで電話番号を自動的にマスク化することができます。必要に応じて具体的な要件に合わせてコードを調整してください。