第2回HTML解説（初級、中級編）
admin第1回で、HTMLの基本構造や基本的なタグについて解説しました。今回は、HTMLのより進んだ要素や、Webページのレイアウトや機能を拡張するためのテクニックについて見ていきます。フォームやテーブル、画像の埋め込みなど、実際のWebページ作成に役立つ知識を深めましょう。
1. フォーム（Form）
Webページ上でユーザーからデータを取得するために使用されるのがフォームです。フォームは、問い合わせページやアンケート、ログインページなどで使われます。<form>タグで囲み、様々な入力フィールドを配置します。
基本的なフォームの例
<form action="/submit" method="POST">
<label for="name">名前:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">メール:</label>
<input type="email" id="email" name="email"><br><br>
<label for="message">メッセージ:</label><br>
<textarea id="message" name="message"></textarea><br><br>
<input type="submit" value="送信">
</form>
各要素の説明
<form>: フォーム全体を囲むタグで、action属性には送信先のURL、method属性にはデータ送信方式（通常はGETまたはPOST）を指定します。<label>: 入力フィールドにラベルを付けるためのタグ。for属性で対応する入力フィールドのIDを指定します。<input>: 様々なタイプの入力フィールドを作成するためのタグ。type属性で入力の種類（テキスト、メール、パスワードなど）を指定します。<textarea>: 複数行のテキスト入力フィールドを作成します。<input type="submit">: 送信ボタンを作成します。
入力フィールドの種類
<input>タグのtype属性にはいくつかの種類があります。以下に主な種類を紹介します。
type="text": テキスト入力フィールド。type="email": メールアドレスの入力フィールド（正しい形式で入力されているかチェックされる）。type="password": パスワード入力フィールド（入力された文字は非表示）。type="radio": ラジオボタン（1つの選択肢を選ぶ）。type="checkbox": チェックボックス（複数の選択肢を選べる）。type="submit": 送信ボタン。
2. テーブル（Table）
データを整理して表示する際に便利なのが、テーブル（表）です。<table>タグを使って、行と列でデータを整然と配置します。
基本的なテーブルの例
<table>
<tr>
<th>名前</th>
<th>年齢</th>
<th>職業</th>
</tr>
<tr>
<td>山田 太郎</td>
<td>30</td>
<td>エンジニア</td>
</tr>
<tr>
<td>佐藤 花子</td>
<td>25</td>
<td>デザイナー</td>
</tr>
</table>
各要素の説明
<table>: テーブル全体を囲むタグ。<tr>: テーブルの行を表すタグ。<th>: ヘッダーセル（見出し）を表すタグ。通常は太字で表示されます。<td>: データセルを表すタグ。テーブルの各セルにデータを入力します.
テーブルの属性
border: テーブルに枠線を追加するには、border属性を指定します。
<table border="1">
<!-- テーブルの中身 -->
</table>
3. 画像の埋め込み
HTMLでは、画像を簡単にWebページに埋め込むことができます。前回紹介した<img>タグをもう一度確認し、いくつかの便利な属性を紹介します。
画像の埋め込み例
<img src="image.jpg" alt="サンプル画像" width="400" height="300">
src: 画像のパスを指定します。URLやファイルパスを使って、画像の場所を指定します。alt: 画像が表示されない場合に表示される代替テキストを指定します。アクセシビリティ向上のためにも重要です。widthとheight: 画像の幅と高さをピクセル単位で指定します。
4. リンクのターゲット設定
前回、リンクの基本的な使い方を紹介しましたが、今回はリンクの表示先（ターゲット）を細かく設定する方法を紹介します。
- 新しいタブでリンクを開く:
target="_blank"を使うと、リンク先が新しいタブで開きます。
<a href="https://www.example.com" target="_blank">新しいタブで開くリンク</a>
- 同じフレーム内でリンクを開く:
target="_self"を使うと、リンクが同じウィンドウやフレーム内で開きます（デフォルトの動作）。
5. 埋め込みコンテンツ（YouTubeなど）
外部のコンテンツをページに埋め込むには、<iframe>タグを使います。例えば、YouTubeの動画を埋め込むことができます。
YouTube動画の埋め込み例
<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID" frameborder="0" allowfullscreen></iframe>
src: 埋め込むコンテンツのURL（この場合はYouTubeの動画URL）。widthとheight: 埋め込むコンテンツの表示サイズを指定します。frameborder: フレームの枠線を表示しないように設定します。allowfullscreen: 動画を全画面表示できるようにします。
6. コメントや非表示要素の使い方
Webページ上に表示させない情報をコードに含めたい場合、コメントや非表示要素を使うことができます。
コメントの書き方
HTMLコメントは、ブラウザには表示されず、開発者向けのメモとして使えます。
<!-- これはコメントです。ブラウザには表示されません。 -->
非表示の要素
display: noneを使うことで、特定の要素をページに表示しないようにすることができます。
<p style="display: none;">この段落は表示されません。</p>
まとめ
今回は、フォームやテーブル、画像の埋め込み、そしてリンクのターゲット設定など、HTMLでWebページをより機能的にするためのテクニックを紹介しました。これらの要素を組み合わせることで、よりインタラクティブで魅力的なWebページを作成することができます。
次回は、HTMLをさらに発展させるために、CSSを使ってデザインやレイアウトをカスタマイズする方法について解説します。HTMLとCSSの組み合わせを使って、よりプロフェッショナルなWebページを作っていきましょう。
