HTML要素リファレンスガイド

1）基本テキスト要素

コードを表示
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>サンプルページ</title>
</head>
<body>

<h1>見出しレベル1</h1>
<h2>見出しレベル2</h2>
<h3>見出しレベル3</h3>
<h4>見出しレベル4</h4>
<h5>見出しレベル5</h5>
<h6>見出しレベル6</h6>

<hr>

<p>段落要素。文章を意味のあるブロックに分割します。</p>
<p>別の段落。自動的に前後に余白が入ります。</p>

<br>

<p>
    春の小川は<br>
    さらさら流れる<br>
    岸辺の桜が<br>
    散りゆく季節
</p>

<hr>

<p><strong>強調（太字）</strong></p>
<p><em>強調（斜体）</em></p>
<p><ins>下線付きテキスト</ins></p>
<p><mark>ハイライト表示</mark></p>

<hr>

<p style="text-align: center;">
    <strong>中央揃えのテキスト</strong>
</p>

</body>
</html>

2）メディア要素

コードを表示
<!-- 画像、音声、動画の埋め込み -->

<!-- 画像要素 -->
<img src="assets/photo.jpg" alt="風景写真" width="400" height="300">

<!-- 外部画像 -->
<img src="https://example.com/images/sample.jpg" 
     alt="サンプル画像" 
     style="width: 50%; height: auto;">

<!-- 音声要素 -->
<audio src="media/bgm.mp3" controls preload="metadata">
    <p>お使いのブラウザは音声再生に対応していません。</p>
</audio>

<!-- 動画要素 -->
<video src="media/pv.mp4" controls width="640" height="360" poster="thumb.jpg">
    <p>お使いのブラウザは動画再生に対応していません。</p>
</video>

<!-- 複数形式対応 -->
<video controls width="640">
    <source src="media/video.webm" type="video/webm">
    <source src="media/video.mp4" type="video/mp4">
    <p>サポートされている動画形式がありません。</p>
</video>

パス指定方法：

  • 絶対パス：/images/icon.png または完全なURL
  • 相対パス：./images/icon.png（同一階層）、../images/icon.png（親階層）

サイズ指定：

  • ピクセル（px）：固定サイズ
  • パーセント（%）：親要素に対する相対サイズ

3）ハイパーリンク

コードを表示
<!-- アンカー要素の属性 -->
<!-- href: リンク先URL -->
<!-- target: 開き方 (_self=現在のウィンドウ, _blank=新規ウィンドウ) -->

<p><a href="https://developer.mozilla.org" target="_blank">MDN Web Docs（新規ウィンドウ）</a></p>

<p><a href="about.html">同一サイト内のページ（現在のウィンドウ）</a></p>

<p><a href="#section2">ページ内アンカー</a></p>

<p><a href="mailto:info@example.com">メールリンク</a></p>

4）リスト構造

コードを表示
<!-- 順序付きリスト -->
<ol type="1">
    <li>企画立案</li>
    <li>設計・開発</li>
    <li>テスト</li>
    <li>リリース</li>
</ol>

<!-- 順序付きリスト（大文字アルファベット） -->
<ol type="A">
    <li>プランA</li>
    <li>プランB</li>
</ol>

<!-- 順序なしリスト -->
<ul style="list-style-type: disc;">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

<!-- 順序なしリスト（丸いマーカー） -->
<ul style="list-style-type: circle;">
    <li>フロントエンド</li>
    <li>バックエンド</li>
</ul>

<!-- 入れ子リスト -->
<ul>
    <li>Web技術
        <ul>
            <li>HTML5</li>
            <li>CSS3</li>
        </ul>
    </li>
</ul>

5）テーブルとレイアウト

テーブル構造

コードを表示
<!-- 基本的なテーブル構造 -->
<table border="1" cellpadding="10" cellspacing="0" style="width: 100%;">
    <thead>
        <tr>
            <th>ID</th>
            <th>製品名</th>
            <th>価格</th>
            <th>在庫</th>
        </tr>
    </thead>
    <tbody>
        <tr style="text-align: center;">
            <td>001</td>
            <td>ノートパソコン</td>
            <td>¥120,000</td>
            <td>15</td>
        </tr>
        <tr style="text-align: center;">
            <td>002</td>
            <td>ワイヤレスマウス</td>
            <td>¥3,500</td>
            <td>42</td>
        </tr>
    </tbody>
</table>

<hr>

<!-- セル結合の例 -->
<table border="1" cellspacing="0" style="width: 80%;">
    <tr>
        <th colspan="2">製品情報</th>
        <th>価格</th>
    </tr>
    <tr style="text-align: center;">
        <td rowspan="2">PC周辺機器</td>
        <td>キーボード</td>
        <td>¥8,000</td>
    </tr>
    <tr style="text-align: center;">
        <td>モニター</td>
        <td>¥35,000</td>
    </tr>
</table>

主要属性：

  • colspan：横方向のセル結合
  • rowspan：縦方向のセル結合
  • scope：ヘッダーセルの関連範囲

レイアウト用コンテナ

コードを表示
<!-- ブロックレベルコンテナ -->
<div style="background: #f0f0f0; padding: 20px; margin-bottom: 10px;">
    <p>div要素は前後に改行を伴うブロックレベル要素です。</p>
</div>

<!-- インラインコンテナ -->
<p>
    テキストの一部を<span style="color: #e74c3c; font-weight: bold;">span要素</span>でマークアップできます。
    spanはインライン要素なので改行しません。
</p>

6）フォーム基礎

コードを表示
<!-- フォームの基本構造 -->
<!-- action: 送信先URL -->
<!-- method: GET（デフォルト）またはPOST -->

<form action="/api/register" method="POST">
    <!-- 隠しフィールド -->
    <input type="hidden" name="token" value="abc123">
    
    <!-- テキスト入力 -->
    <label for="email">メールアドレス：</label>
    <input type="email" id="email" name="email" required>
    <br><br>
    
    <!-- パスワード -->
    <label for="pass">パスワード：</label>
    <input type="password" id="pass" name="password">
    <br><br>
    
    <!-- 送信ボタン -->
    <button type="submit">アカウント作成</button>
</form>

GETとPOSTの違い：

  • GET：URLにパラメータを含める、データ量に制限あり（約4KB）、ブックマーク可能
  • POST：リクエストボディにデータを含める、データ量に制限なし、機密情報に適している

7）フォームコントロール

コードを表示
<form action="/api/submit" method="POST">
    
    <!-- 単一行テキスト -->
    <p>
        <label for="nickname">ニックネーム：</label>
        <input type="text" id="nickname" name="nickname" placeholder="表示名を入力">
    </p>
    
    <!-- パスワード -->
    <p>
        <label for="secret">秘密の質問の答え：</label>
        <input type="password" id="secret" name="secret_answer">
    </p>
    
    <!-- ラジオボタン（単一選択） -->
    <p>
        会員タイプ：
        <input type="radio" name="membership" value="free" id="m1">
        <label for="m1">無料会員</label>
        <input type="radio" name="membership" value="premium" id="m2" checked>
        <label for="m2">プレミアム会員</label>
    </p>
    
    <!-- チェックボックス（複数選択） -->
    <p>
        通知設定：
        <input type="checkbox" name="notify" value="email" id="n1">
        <label for="n1">メール</label>
        <input type="checkbox" name="notify" value="sms" id="n2">
        <label for="n2">SMS</label>
        <input type="checkbox" name="notify" value="push" id="n3">
        <label for="n3">プッシュ通知</label>
    </p>
    
    <!-- ファイルアップロード -->
    <p>
        <label for="avatar">プロフィール画像：</label>
        <input type="file" id="avatar" name="profile_image" accept="image/*">
    </p>
    
    <!-- セレクトボックス（ドロップダウン） -->
    <p>
        <label for="region">居住地：</label>
        <select id="region" name="prefecture">
            <option value="">選択してください</option>
            <option value="tokyo">東京都</option>
            <option value="osaka">大阪府</option>
            <option value="fukuoka">福岡県</option>
        </select>
    </p>
    
    <!-- テキストエリア（複数行） -->
    <p>
        <label for="bio">自己紹介：</label><br>
        <textarea id="bio" name="introduction" rows="4" cols="50" 
                  placeholder="200文字以内でご記入ください"></textarea>
    </p>
    
    <!-- ボタン群 -->
    <p>
        <button type="submit">登録する</button>
        <button type="reset">入力をクリア</button>
        <button type="button" onclick="previewData()">プレビュー</button>
    </p>
    
</form>

input typeの種類：

値用途
text単一行テキスト（デフォルト）
passwordマスク表示されるパスワード
emailメールアドレス（検証付き）
tel電話番号
number数値入力
date日付選択
radio単一選択
checkbox複数選択
fileファイル選択
hidden非表示データ
submitフォーム送信
reset入力クリア
button汎用ボタン

タグ: HTML HTML5 form input Table

9月4日 16:53 投稿

ホットタグ

©2026 異端開発室