HTML 画像にキャプションを追加
-
<figcaption>および<figure>タグの使用 - 画像の上にキャプションを追加する
-
<figure>タグと<figcaption>タグを使用して複数の画像にキャプションを追加する -
<div>タグを使用して複数の画像にキャプションを追加する - まとめ
この記事では、HTML および CSS プロパティを使用して Web ページの画像の下または上にキャプションを記述するさまざまな方法について説明します。
<figcaption> および <figure> タグの使用
HTML には、画像にキャプションを挿入するために使用される特定のタグがあります。 <figcaption> は <figure> 要素のキャプションを表し、HTML の <figure> 要素の最初または最後の子として配置できます。
<figure> と <figcaption> は、HTML5 でタグとして導入された 2つの新しい要素です。 ここで、<figure> タグは画像やグラフィックを表示するのに最適ですが、<figcaption> は見る人に何を見ているかを伝えます。
<figcaption> タグは、HTML のグローバル属性とイベント属性もサポートしています。
次の例では、<figure> 要素を使用して Web ページまたはドキュメントの画像をマークアップし、<figcaption> 要素を使用して画像のキャプションを定義しています。
<!DOCTYPE html>
<html>
<body>
<figure>
<img src="/img/DelftStack/logo.png" alt="logo">
<figcaption>DelftStack Logo</figcaption>
</figure>
</body>
</html>
ここで、HTML の <img> タグの style 属性を使用して、画像の解像度 (高さと幅) を調整できます。
ここでは、画像の解像度を元のサイズに設定します。
<figure> と <figcaption> は HTML5 の新しいタグであるため、古いバージョンのブラウザはこれら 2つのタグの処理を理解できません。 したがって、これらのタグは Web ページ上でインライン タグとしてレンダリングされます。つまり、これらのタグは、画像と横に並べて設定される図のキャプションの自動改行を取得しません。
したがって、解決策として、次の例のように、CSS プロパティを使用して <figure> と <figcaption> のスタイルを設定できます。
<!DOCTYPE html>
<html>
<head>
<style>
figure {
border: 5px #4257f5 solid;
padding: 4px;
margin: auto;
}
figcaption {
background-color:grey;
color: white;
font-style: italic;
padding: 2px;
text-align: center;
}
</style>
</head>
<body>
<figure>
<img src="/img/DelftStack/logo.png" alt="logo" style="width:100%">
<figcaption>DelftStack Logo</figcaption>
</figure>
</body>
</html>
ここで、CSS のさまざまなプロパティと値を使用して、必要に応じて <figcaption> タグと <figure> タグを編集できます。
画像の上にキャプションを追加する
反対の CSS ガイドラインがなければ、<figcaption> 要素が Figure 内の最初の要素か最後の要素かによって、キャプションが Figure の上部または下部に表示されます。
この例では、次のように画像の上部にキャプションを設定します。
<!DOCTYPE html>
<html>
<head>
<style>
figure {
border: 5px #4257f5 solid;
padding: 4px;
margin: auto;
}
figcaption {
background-color:grey;
color: white;
font-style: italic;
padding: 2px;
text-align: center;
}
</style>
</head>
<body>
<figure>
<figcaption>Fig.2 - DelftStack Logo</figcaption>
<img src="/img/DelftStack/logo.png" alt="logo" style="width:100%">
</figure>
</body>
</html>
<figure> タグと <figcaption> タグを使用して複数の画像にキャプションを追加する
<figcaption> を使用して、複数の画像にキャプションを追加できます。
<!DOCTYPE html>
<html>
<body>
<figure>
<img src="/img/DelftStack/logo.png" alt="logo">
<figcaption>DelftStack Logo</figcaption>
</figure>
<figure>
<img src="/img/DelftStack/logo.png" alt="logo">
<figcaption>Fig.2 - DelftStack Logo</figcaption>
</figure>
</body>
</html>
CSS プロパティを使用して、さまざまなスタイルや色をテキストに追加することで、画像のキャプションをフォーマットできます。
<div> タグを使用して複数の画像にキャプションを追加する
<div> タグと CSS プロパティを使用して、複数の画像に同時にキャプションを追加できます。 以下の例では、2つの画像にキャプションを追加します。オプションで、画像をクリックすると別の Web ページまたは Web サイトに移動するリンクを追加できます。
<!DOCTYPE html>
<html>
<head>
<style>
#pictures{
text-align:center;
margin:50px auto;
}
#pictures a{
margin:0px 50px;
display:inline-block;
text-decoration:none;
color:black;
}
</style>
</head>
<body>
<div id="pictures">
<a href="">
<img src="/img/DelftStack/logo.png" width="480px" height="90px">
<div class="caption">Fig 1 - DelftStack Logo</div>
</a>
<a href="">
<img src="/img/DelftStack/logo.png" width="480px" height="90px">
<div class="caption">Fig 2 - DelftStack Logo</div>
</a>
</div>
</body>
</html>
このメソッドを使用すると、追加の実装で上部に画像のキャプションを追加できます。
まとめ
前述のように、HTML と CSS プロパティを組み合わせて画像にキャプションを付けるには、さまざまな方法を使用できます。 それでも、1つまたは複数の画像とそのキャプションを表形式で追加するなど、一部の方法は現時点では適切ではありません。
HTML5 の <figure> や <figcaption> などの新しいタグにより、画像にキャプションを付ける作業が簡単になりました。
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.