HTMLの図のキャプションをマスターする

はじめに

HTMLの<figcaption>タグは、<figure>要素内のコンテンツにキャプションを提供するために使用されます。この実験では、<figcaption>タグを使用して画像にキャプションを追加する方法を学びます。

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/MultimediaandGraphicsGroup -.-> html/multimedia("Multimedia Elements") html/MultimediaandGraphicsGroup -.-> html/fig_cap("Figure and Caption Association") subgraph Lab Skills html/basic_elems -.-> lab-70757{{"HTMLの図のキャプション"}} html/head_elems -.-> lab-70757{{"HTMLの図のキャプション"}} html/multimedia -.-> lab-70757{{"HTMLの図のキャプション"}} html/fig_cap -.-> lab-70757{{"HTMLの図のキャプション"}} end

画像とキャプションの追加

好きなエディタでindex.htmlファイルを開き、基本的なHTML構造を書きます。<DOCTYPE>宣言、<html>、<head>、<body>タグを追加します。

<body>タグの中に、中に画像タグを持つ<figure>要素を作成します。好きな画像を使うことができます。たとえば：

<figure>
  <img src="your-image-url-here" alt="Your image description" />
</figure>

次に、画像にキャプションを提供するために、<img>タグの直後に<figcaption>タグを追加します。たとえば：

<figure>
  <img src="your-image-url-here" alt="Your image description" />
  <figcaption>Image caption goes here</figcaption>
</figure>

index.htmlファイルに変更を保存し、Webブラウザで開きます。すると、画像の下にキャプションが表示されるはずです。

キャプションのスタイリング

デフォルトでは、<figcaption>タグは親要素の幅いっぱいを占めるブロックレベル要素です。CSSを使ってキャプションの位置、フォント、色などを調整することができます。
キャプションのフォント、フォントサイズ、色を変更するには、index.htmlファイルの<head>セクションに次のCSSコードを追加します。

figcaption {
  font-family: Arial, sans-serif;
  font-size: 18px;
  color: #555;
}

CSSを使って<figcaption>タグのマージンとパディングプロパティを調整することで、キャプションの位置も変更できます。たとえば：

figcaption {
  margin-top: 10px;
  padding: 5px;
}

複数の画像とキャプションの追加

前の手順を繰り返すことで、単一のWebページに複数の画像とキャプションを追加できます。それぞれの画像に対して、<img>タグと<figcaption>タグを持つ新しい<figure>要素を作成します。
index.htmlファイルに変更を保存し、Webページを更新します。すると、すべての画像の下にキャプションが表示されるはずです。

まとめ

HTMLの<figcaption>タグは、Webページに画像のキャプションを提供するための強力なツールです。このタグを使用することで、画像を視聴者にとってよりアクセスしやすく、ユーザーフレンドリーにすることができます。キャプションを見た目も素敵にするために、CSSを使ってスタイリングすることを忘れないでください！