HTML フィールドセットのキャプション

はじめに

HTML の<legend>タグは、HTML の<fieldset>タグ内の子要素のキャプションまたはタイトルを提供する重要な方法です。<legend>タグは、フィールドセットのコンテントを識別し、ページに適切なタイトルを付けるために使用されます。この実験では、<legend>タグとそれに関連するさまざまな CSS プロパティの使い方を学びます。

注：index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080タブを更新して、ウェブページをプレビューできます。

タグを追加する

まず、コードエディタを開き、index.html という新しいファイルを作成します。html と入力してからタブキーを押すことで、ファイルに基本構造を追加します。

HTML ドキュメントに <fieldset> タグを追加します。

<fieldset>
  <legend></legend>
</fieldset>

タグ内に

タグを追加する

見出しを作成するために、<fieldset> タグ内に <legend> タグを追加します。

<fieldset>
  <legend>Contact Information</legend>
</fieldset>

タグで CSS プロパティを使用する

<legend> タグにいくつかの CSS プロパティを追加して、見た目を改善しましょう。

<style>
  legend {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    text-align: center;
  }
</style>

ファイルを保存し、好きなウェブブラウザで index.html ファイルを開きます。

まとめ

要約すると、HTML の<legend>タグは、HTML の<fieldset>タグ内の子要素にキャプションまたはタイトルを提供するのに役立ちます。私たちは、見た目を改善するためにさまざまな CSS プロパティを使用しました。これで、HTML ファイル内で<legend>タグを使って見出しやタイトルを作成できるようになっていただければ幸いです。