HTMLクイックリファレンス：基本要素とタグ一覧

By /

はい、承知いたしました。HTMLクイックリファレンスとして、基本要素とタグの一覧、詳細な説明、使用例などを盛り込んだ記事を作成します。約5000字で記述します。

HTMLクイックリファレンス：基本要素とタグ一覧

HTML（HyperText Markup Language）は、ウェブページの構造を記述するための標準的なマークアップ言語です。ウェブサイトのコンテンツを構成し、テキスト、画像、リンクなどの要素を定義するために使用されます。このクイックリファレンスでは、HTMLの基本要素と主要なタグを網羅的に解説し、ウェブ開発における効率的なコーディングを支援します。

1. HTMLの基本構造

HTML文書は、特定の構造に従って記述されます。基本的なHTML文書の構造は以下の通りです。

“`html






ページのタイトル

見出し

段落テキスト


“`

  • <!DOCTYPE html>: HTML5文書であることを宣言します。これにより、ブラウザは文書をHTML5として解釈します。
  • <html>: HTML文書のルート要素です。lang属性で言語を指定します（例: lang="ja"は日本語）。
  • <head>: 文書のメタデータ（タイトル、文字コード、スタイルシートなど）を記述します。
    • <meta charset="UTF-8">: 文字エンコーディングをUTF-8に設定します。これにより、日本語を含む多様な文字を正しく表示できます。
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: レスポンシブデザインのために、viewportの設定を行います。
    • <title>: ブラウザのタブや検索結果に表示されるページのタイトルを設定します。
    • <link rel="stylesheet" href="style.css">: 外部スタイルシート（CSSファイル）をリンクします。
  • <body>: 実際にブラウザに表示されるコンテンツを記述します。
    • <h1>: 見出し（レベル1）を定義します。<h1>から<h6>まで、重要度に応じて見出しレベルを選択できます。
    • <p>: 段落を定義します。テキストのまとまりを構造化するために使用します。

2. 主要なHTMLタグ一覧

以下に、HTMLでよく使用されるタグをカテゴリ別に分類し、詳細な説明と使用例を示します。

2.1. 基本要素

  • <html>:

    • 説明: HTML文書のルート要素。
    • 属性: lang（言語指定）、manifest（アプリケーションキャッシュマニフェストファイルの指定）
    • 使用例:

    html
    <html lang="ja">
    </html>

  • <head>:

    • 説明: HTML文書のメタデータ（タイトル、文字コード、スタイルシートなど）を記述する要素。
    • 属性: なし
    • 使用例:

    html
    <head>
    <meta charset="UTF-8">
    <title>ページのタイトル</title>
    </head>

  • <title>:

    • 説明: ブラウザのタブや検索結果に表示されるページのタイトルを設定する要素。
    • 属性: なし
    • 使用例:

    html
    <title>HTMLクイックリファレンス</title>

  • <body>:

    • 説明: 実際にブラウザに表示されるコンテンツを記述する要素。
    • 属性: onload（ページ読み込み完了時のイベント）、onunload（ページ離脱時のイベント）
    • 使用例:

    html
    <body>
    <h1>見出し</h1>
    <p>段落テキスト</p>
    </body>

2.2. テキスト要素

  • <h1> ～ <h6>:

    • 説明: 見出しを定義する要素。<h1>が最も重要な見出しで、<h6>が最も重要度の低い見出し。
    • 属性: align（非推奨）
    • 使用例:

    html
    <h1>メインの見出し</h1>
    <h2>サブの見出し</h2>
    <h3>さらに細かい見出し</h3>

  • <p>:

    • 説明: 段落を定義する要素。
    • 属性: align（非推奨）
    • 使用例:

    html
    <p>これは段落のテキストです。複数の文を含めることができます。</p>

  • <br>:

    • 説明: 改行を挿入する要素。
    • 属性: なし
    • 使用例:

    html
    <p>これは1行目のテキストです。<br>これは2行目のテキストです。</p>

  • <hr>:

    • 説明: 水平線（区切り線）を挿入する要素。
    • 属性: align（非推奨）、size（非推奨）、width（非推奨）
    • 使用例:

    html
    <p>最初のセクション</p>
    <hr>
    <p>次のセクション</p>

  • <a>:

    • 説明: ハイパーリンク（アンカー）を定義する要素。
    • 属性: href（リンク先URL）、target（リンクの開き方）、rel（リンクの関係性）
    • 使用例:

    html
    <a href="https://www.example.com" target="_blank" rel="noopener">リンクテキスト</a>

  • <strong>:

    • 説明: 重要なテキストを強調する要素。
    • 属性: なし
    • 使用例:

    html
    <p>これは<strong>重要な</strong>テキストです。</p>

  • <em>:

    • 説明: テキストを強調する要素（イタリック体で表示されることが多い）。
    • 属性: なし
    • 使用例:

    html
    <p>これは<em>強調</em>されたテキストです。</p>

  • <span>:

    • 説明: テキストの一部をグループ化し、スタイルを適用するための要素。
    • 属性: class、style、id
    • 使用例:

    html
    <p>これは<span style="color: red;">赤い</span>テキストです。</p>

  • <code>:

    • 説明: コードの断片を表示するための要素。
    • 属性: なし
    • 使用例:

    html
    <p><code>console.log("Hello, world!");</code></p>

  • <pre>:

    • 説明: 整形済みのテキストを表示するための要素。空白や改行がそのまま表示される。
    • 属性: なし
    • 使用例:

    html
    <pre>
    function hello() {
    console.log("Hello, world!");
    }
    </pre>

  • <small>:

    • 説明: 小さな文字で表示する要素。著作権表示などに使用される。
    • 属性: なし
    • 使用例:

    html
    <p><small>© 2023 Example Company</small></p>

  • <mark>:

    • 説明: テキストをハイライトする要素。
    • 属性: なし
    • 使用例:

    html
    <p>これは<mark>ハイライト</mark>されたテキストです。</p>

  • <del>:

    • 説明: 削除されたテキストを示す要素。
    • 属性: cite（削除理由のURL）、datetime（削除日時）
    • 使用例:

    html
    <p>古い価格: <del>$100</del> 新しい価格: $80</p>

  • <ins>:

    • 説明: 挿入されたテキストを示す要素。
    • 属性: cite（挿入理由のURL）、datetime（挿入日時）
    • 使用例:

    html
    <p>新しい価格: <ins>$80</ins></p>

  • <sub>:

    • 説明: 下付き文字を表示する要素。
    • 属性: なし
    • 使用例:

    html
    <p>H<sub>2</sub>O</p>

  • <sup>:

    • 説明: 上付き文字を表示する要素。
    • 属性: なし
    • 使用例:

    html
    <p>E = mc<sup>2</sup></p>

2.3. 画像とメディア

  • <img>:

    • 説明: 画像を埋め込む要素。
    • 属性: src（画像URL）、alt（代替テキスト）、width（画像の幅）、height（画像の高さ）
    • 使用例:

    html
    <img src="image.jpg" alt="説明文" width="500" height="300">

  • <audio>:

    • 説明: 音声ファイルを埋め込む要素。
    • 属性: src（音声ファイルURL）、controls（再生コントロールの表示）、autoplay（自動再生）、loop（繰り返し再生）、muted（ミュート）
    • 使用例:

    html
    <audio src="audio.mp3" controls autoplay loop muted></audio>

  • <video>:

    • 説明: 動画ファイルを埋め込む要素。
    • 属性: src（動画ファイルURL）、controls（再生コントロールの表示）、autoplay（自動再生）、loop（繰り返し再生）、muted（ミュート）、width（動画の幅）、height（動画の高さ）、poster（動画のサムネイル画像）
    • 使用例:

    html
    <video src="video.mp4" controls width="640" height="360" poster="thumbnail.jpg"></video>

  • <source>:

    • 説明: <audio>または<video>要素内で、複数のメディアソースを指定する要素。
    • 属性: src（メディアファイルURL）、type（メディアの種類）
    • 使用例:

    html
    <video controls width="640" height="360">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    お使いのブラウザはビデオに対応していません。
    </video>

  • <picture>:

    • 説明: 異なる画面サイズや解像度に対して最適な画像を提供する要素。
    • 属性: なし
    • 使用例:

    html
    <picture>
    <source media="(max-width: 600px)" srcset="small.jpg">
    <source media="(max-width: 1200px)" srcset="medium.jpg">
    <img src="large.jpg" alt="画像">
    </picture>

2.4. リスト要素

  • <ul>:

    • 説明: 順序なしリスト（箇条書き）を定義する要素。
    • 属性: なし
    • 使用例:

    html
    <ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
    </ul>

  • <ol>:

    • 説明: 順序付きリスト（番号付きリスト）を定義する要素。
    • 属性: type（リストの形式: “1”, “a”, “A”, “i”, “I”）、start（リストの開始番号）
    • 使用例:

    html
    <ol type="1" start="1">
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
    </ol>

  • <li>:

    • 説明: リストの項目を定義する要素。
    • 属性: なし
    • 使用例:

    html
    <ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
    </ul>

  • <dl>:

    • 説明: 定義リストを定義する要素。
    • 属性: なし
    • 使用例:

    html
    <dl>
    <dt>用語1</dt>
    <dd>用語1の説明</dd>
    <dt>用語2</dt>
    <dd>用語2の説明</dd>
    </dl>

  • <dt>:

    • 説明: 定義リストの用語を定義する要素。
    • 属性: なし
    • 使用例:

    html
    <dl>
    <dt>用語1</dt>
    <dd>用語1の説明</dd>
    </dl>

  • <dd>:

    • 説明: 定義リストの用語の説明を定義する要素。
    • 属性: なし
    • 使用例:

    html
    <dl>
    <dt>用語1</dt>
    <dd>用語1の説明</dd>
    </dl>

2.5. テーブル要素

  • <table>:

    • 説明: テーブルを定義する要素。
    • 属性: border（テーブルの罫線: 非推奨）
    • 使用例:

    html
    <table>
    <thead>
    <tr>
    <th>ヘッダー1</th>
    <th>ヘッダー2</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>データ1</td>
    <td>データ2</td>
    </tr>
    <tr>
    <td>データ3</td>
    <td>データ4</td>
    </tr>
    </tbody>
    </table>

  • <thead>:

    • 説明: テーブルのヘッダーを定義する要素。
    • 属性: なし
    • 使用例:

    html
    <table>
    <thead>
    <tr>
    <th>ヘッダー1</th>
    <th>ヘッダー2</th>
    </tr>
    </thead>
    </table>

  • <tbody>:

    • 説明: テーブルの本体を定義する要素。
    • 属性: なし
    • 使用例:

    html
    <table>
    <tbody>
    <tr>
    <td>データ1</td>
    <td>データ2</td>
    </tr>
    </tbody>
    </table>

  • <tfoot>:

    • 説明: テーブルのフッターを定義する要素。
    • 属性: なし
    • 使用例:

    html
    <table>
    <tfoot>
    <tr>
    <td>合計</td>
    <td>100</td>
    </tr>
    </tfoot>
    </table>

  • <tr>:

    • 説明: テーブルの行を定義する要素。
    • 属性: なし
    • 使用例:

    html
    <table>
    <tr>
    <td>データ1</td>
    <td>データ2</td>
    </tr>
    </table>

  • <th>:

    • 説明: テーブルのヘッダーセルを定義する要素。
    • 属性: colspan（列方向の結合）、rowspan（行方向の結合）
    • 使用例:

    html
    <table>
    <tr>
    <th>ヘッダー1</th>
    <th>ヘッダー2</th>
    </tr>
    </table>

  • <td>:

    • 説明: テーブルのデータセルを定義する要素。
    • 属性: colspan（列方向の結合）、rowspan（行方向の結合）
    • 使用例:

    html
    <table>
    <tr>
    <td>データ1</td>
    <td>データ2</td>
    </tr>
    </table>

  • <colgroup>:

    • 説明: テーブルの列のグループを定義する要素。
    • 属性: span（列の数）
    • 使用例:

    html
    <table>
    <colgroup>
    <col span="2" style="background-color: #eee;">
    </colgroup>
    <tr>
    <th>ヘッダー1</th>
    <th>ヘッダー2</th>
    </tr>
    <tr>
    <td>データ1</td>
    <td>データ2</td>
    </tr>
    </table>

  • <col>:

    • 説明: <colgroup>内で、個々の列のスタイルを定義する要素。
    • 属性: span（列の数）
    • 使用例:

    html
    <table>
    <colgroup>
    <col style="background-color: #eee;">
    <col style="background-color: #fff;">
    </colgroup>
    <tr>
    <th>ヘッダー1</th>
    <th>ヘッダー2</th>
    </tr>
    <tr>
    <td>データ1</td>
    <td>データ2</td>
    </tr>
    </table>

2.6. フォーム要素

  • <form>:

    • 説明: フォームを定義する要素。
    • 属性: action（送信先URL）、method（送信方法: “get”, “post”）、enctype（データのエンコード形式）
    • 使用例:

    html
    <form action="/submit" method="post">
    <label for="name">名前:</label>
    <input type="text" id="name" name="name"><br>
    <input type="submit" value="送信">
    </form>

  • <input>:

    • 説明: フォームの入力フィールドを定義する要素。
    • 属性: type（入力の種類）、name（フィールド名）、value（初期値）、placeholder（プレースホルダーテキスト）、required（必須入力）、readonly（読み取り専用）、disabled（無効化）
    • 使用例:

    html
    <input type="text" name="name" placeholder="名前を入力してください" required>

  • <textarea>:

    • 説明: 複数行のテキスト入力フィールドを定義する要素。
    • 属性: name（フィールド名）、rows（行数）、cols（列数）、placeholder（プレースホルダーテキスト）、required（必須入力）、readonly（読み取り専用）、disabled（無効化）
    • 使用例:

    html
    <textarea name="message" rows="5" cols="30" placeholder="メッセージを入力してください"></textarea>

  • <select>:

    • 説明: ドロップダウンリストを定義する要素。
    • 属性: name（フィールド名）、multiple（複数選択を許可）、required（必須選択）、disabled（無効化）
    • 使用例:

    html
    <select name="country">
    <option value="jp">日本</option>
    <option value="us">アメリカ</option>
    <option value="uk">イギリス</option>
    </select>

  • <option>:

    • 説明: <select>要素内の選択肢を定義する要素。
    • 属性: value（選択肢の値）、selected（初期選択状態）
    • 使用例:

    html
    <select name="country">
    <option value="jp" selected>日本</option>
    <option value="us">アメリカ</option>
    <option value="uk">イギリス</option>
    </select>

  • <label>:

    • 説明: フォーム要素のラベルを定義する要素。
    • 属性: for（関連付けるフォーム要素のID）
    • 使用例:

    html
    <label for="name">名前:</label>
    <input type="text" id="name" name="name">

  • <button>:

    • 説明: ボタンを定義する要素。
    • 属性: type（ボタンの種類: “button”, “submit”, “reset”）、name（フィールド名）、value（ボタンの値）
    • 使用例:

    html
    <button type="submit">送信</button>

  • <fieldset>:

    • 説明: フォーム要素をグループ化する要素。
    • 属性: disabled（グループ内の要素を無効化）、name（フィールド名）、form（紐づけるformのID）
    • 使用例:

    html
    <fieldset>
    <legend>個人情報</legend>
    <label for="name">名前:</label>
    <input type="text" id="name" name="name"><br>
    <label for="email">メールアドレス:</label>
    <input type="email" id="email" name="email"><br>
    </fieldset>

  • <legend>:

    • 説明: <fieldset>要素のキャプションを定義する要素。
    • 属性: なし
    • 使用例:

    html
    <fieldset>
    <legend>個人情報</legend>
    <label for="name">名前:</label>
    <input type="text" id="name" name="name"><br>
    <label for="email">メールアドレス:</label>
    <input type="email" id="email" name="email"><br>
    </fieldset>

  • <datalist>:

    • 説明: <input>要素の入力候補リストを定義する要素。
    • 属性: id（一意なID）
    • 使用例:

    html
    <label for="browser">ブラウザ:</label>
    <input list="browsers" id="browser" name="browser">
    <datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
    </datalist>

  • <output>:

    • 説明: 計算結果などを表示するための要素。
    • 属性: name（フィールド名）、for（計算に使用する要素のID）
    • 使用例:

    html
    <form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="number" id="a" name="a" value="0"> +
    <input type="number" id="b" name="b" value="0"> =
    <output name="result" for="a b"></output>
    </form>

2.7. スクリプト要素

  • <script>:

    • 説明: JavaScriptコードを埋め込む要素。
    • 属性: src（JavaScriptファイルURL）、type（スクリプトの種類: “text/javascript”）、async（非同期実行）、defer（遅延実行）
    • 使用例:

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

  • <noscript>:

    • 説明: JavaScriptが無効な場合に表示するコンテンツを定義する要素。
    • 属性: なし
    • 使用例:

    html
    <noscript>
    <p>JavaScriptを有効にしてください。</p>
    </noscript>

2.8. セクショニング要素

  • <header>:

    • 説明: ヘッダー（サイトのヘッダー、セクションのヘッダーなど）を定義する要素。
    • 属性: なし
    • 使用例:

    html
    <header>
    <h1>サイトのタイトル</h1>
    <nav>
    <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">サービス</a></li>
    <li><a href="#">お問い合わせ</a></li>
    </ul>
    </nav>
    </header>

  • <nav>:

    • 説明: ナビゲーションリンクのグループを定義する要素。
    • 属性: なし
    • 使用例:

    html
    <nav>
    <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">サービス</a></li>
    <li><a href="#">お問い合わせ</a></li>
    </ul>
    </nav>

  • <main>:

    • 説明: ドキュメントの主要なコンテンツを定義する要素。
    • 属性: なし
    • 使用例:

    html
    <main>
    <article>
    <h1>記事のタイトル</h1>
    <p>記事のコンテンツ</p>
    </article>
    </main>

  • <article>:

    • 説明: 自己完結型のコンテンツ（記事、ブログ投稿など）を定義する要素。
    • 属性: なし
    • 使用例:

    html
    <article>
    <h1>記事のタイトル</h1>
    <p>記事のコンテンツ</p>
    </article>

  • <section>:

    • 説明: ドキュメントのセクションを定義する要素。
    • 属性: なし
    • 使用例:

    html
    <section>
    <h2>セクションのタイトル</h2>
    <p>セクションのコンテンツ</p>
    </section>

  • <aside>:

    • 説明: サイドバーなど、主要なコンテンツに関連する補足的なコンテンツを定義する要素。
    • 属性: なし
    • 使用例:

    html
    <aside>
    <h3>関連リンク</h3>
    <ul>
    <li><a href="#">リンク1</a></li>
    <li><a href="#">リンク2</a></li>
    <li><a href="#">リンク3</a></li>
    </ul>
    </aside>

  • <footer>:

    • 説明: フッター（サイトのフッター、セクションのフッターなど）を定義する要素。
    • 属性: なし
    • 使用例:

    html
    <footer>
    <p>© 2023 Example Company</p>
    </footer>

  • <address>:

    • 説明: ドキュメントまたは記事の連絡先情報を定義する要素。
    • 属性: なし
    • 使用例:

    html
    <address>
    <p>連絡先:</p>
    <a href="mailto:[email protected]">[email protected]</a>
    </address>

2.9. メタデータ要素

  • <meta>:

    • 説明: ドキュメントに関するメタデータ（文字コード、説明、キーワードなど）を定義する要素。
    • 属性: charset（文字コード）、name（メタデータの名前）、content（メタデータの値）
    • 使用例:

    html
    <meta charset="UTF-8">
    <meta name="description" content="HTMLクイックリファレンス">
    <meta name="keywords" content="HTML, タグ, リファレンス">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  • <link>:

    • 説明: 外部リソース（スタイルシート、ファビコンなど）へのリンクを定義する要素。
    • 属性: rel（リンクの関係性）、href（リソースURL）、type（リソースの種類）
    • 使用例:

    html
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

  • <base>:

    • 説明: ドキュメント内の相対URLの基準URLを定義する要素。
    • 属性: href（基準URL）、target（リンクの開き方）
    • 使用例:

    html
    <base href="https://www.example.com/">

  • <style>:

    • 説明: CSSスタイルシートを埋め込む要素。
    • 属性: type（スタイルシートの種類: “text/css”）
    • 使用例:

    html
    <style>
    h1 {
    color: blue;
    }
    </style>

2.10. その他の要素

  • <iframe>:

    • 説明: インラインフレーム（別のHTMLドキュメントを埋め込む）を定義する要素。
    • 属性: src（埋め込むドキュメントのURL）、width（フレームの幅）、height（フレームの高さ）、sandbox（セキュリティ設定）
    • 使用例:

    html
    <iframe src="https://www.example.com" width="600" height="400"></iframe>

  • <object>:

    • 説明: 画像、音声、動画、Javaアプレットなど、様々なオブジェクトを埋め込む要素。
    • 属性: data（オブジェクトのURL）、type（オブジェクトの種類）、width（オブジェクトの幅）、height（オブジェクトの高さ）
    • 使用例:

    html
    <object data="image.svg" type="image/svg+xml" width="500" height="300"></object>

  • <embed>:

    • 説明: Flashムービーなど、外部アプリケーションを埋め込む要素（<object>の代替として使用されることが多い）。
    • 属性: src（アプリケーションのURL）、type（アプリケーションの種類）、width（アプリケーションの幅）、height（アプリケーションの高さ）
    • 使用例:

    html
    <embed src="movie.swf" type="application/x-shockwave-flash" width="640" height="480">

  • <param>:

    • 説明: <object>要素内で、オブジェクトのパラメータを定義する要素。
    • 属性: name（パラメータ名）、value（パラメータ値）
    • 使用例:

    html
    <object data="movie.swf" type="application/x-shockwave-flash" width="640" height="480">
    <param name="quality" value="high">
    </object>

  • <canvas>:

    • 説明: JavaScriptを使用してグラフィックを描画するための領域を定義する要素。
    • 属性: width（キャンバスの幅）、height（キャンバスの高さ）
    • 使用例:

    html
    <canvas id="myCanvas" width="500" height="300"></canvas>
    <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'red';
    ctx.fillRect(0, 0, 150, 100);
    </script>

  • <svg>:

    • 説明: ベクターグラフィックを埋め込む要素。
    • 属性: width（SVGの幅）、height（SVGの高さ）
    • 使用例:

    html
    <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>

  • <math>:

    • 説明: 数式を記述するための要素。MathMLというXMLベースの言語を使用する。
    • 属性: なし
    • 使用例:

    html
    <math>
    <mrow>
    <mi>x</mi>
    <mo>=</mo>
    <mfrac>
    <mrow>
    <mrow>
    <mo>-</mo>
    <mi>b</mi>
    </mrow>
    <mo>±</mo>
    <msqrt>
    <mrow>
    <msup>
    <mi>b</mi>
    <mn>2</mn>
    </msup>
    <mo>-</mo>
    <mrow>
    <mn>4</mn>
    <mi>a</mi>
    <mi>c</mi>
    </mrow>
    </mrow>
    </msqrt>
    </mrow>
    <mrow>
    <mn>2</mn>
    <mi>a</mi>
    </mrow>
    </mfrac>
    </mrow>
    </math>

3. グローバル属性

グローバル属性は、ほとんどのHTML要素で使用できる属性です。以下に代表的なグローバル属性を示します。

  • class: 要素に適用するCSSクラスを指定します。
  • id: 要素の一意なIDを指定します。
  • style: 要素にインラインスタイルを適用します。
  • title: 要素に関する補足的な情報（ツールチップとして表示されることが多い）を指定します。
  • lang: 要素の言語を指定します。
  • tabindex: 要素

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

上部へスクロール