[HTML5]画像を表示する方法で記事の本文中に配置した画像にキャプションをつけて表示します。
ここではキャプションに「サイトのメインイメージキャラクターちからこぶくんです。」とキャプションを付けてみます。
画像にキャプションを付ける方法
下記の表は、今回使用するタグになります。
今回使用するタグ一覧
| <figcaption> | 画像にキャプションを付ける |
|---|
キャプションをマークアップする
キャプションであることを明確にするため、下記のサンプルコードのように<figcaption>でマークアップします。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>画像を表示するサンプルコード</title>
</head>
<body>
<div>
<header>
<h1>ちからこぶ</h1>
</header>
<article>
<h2>ちからこぶについて</h2>
<p>プログラマーやシステムエンジニアになりたい、PCについてもっと詳しくなりたい、これからコンピュータについて勉強を始めたいという方を応援するサイトです。ICTのことを中心に様々な情報を発信していきます。</p>
<p>近年急速にIT化が進んでいること、また2020年度から小学校でプログラミング教育が必修化になったことに伴い、初心者の方がICTを気軽に楽しく勉強するのを応援するためにサイトを立ち上げました。</p>
<figure>
<img src="chikarakobu.png" width="650" height="350" alt="サイトのメインイメージキャラクターちからこぶくんです">
<figcaption></figcaption>
</figure>
</article>
<footer>
<small>Copyright © ちからこぶ All Rights Reserved.</small>
</footer>
</div>
</body>
</html>画像にキャプションを付けます。
先程、マークアップした<figcaption>内に画像のキャプションを付けて表示します。
サンプルコードでのキャプションは「サイトのメインイメージキャラクターちからこぶくんです。」とキャプションを付けています。
すると、画像の下に配置されて表示されます。
キャプションを画像の上に付けたい場合は<figure>内の一番最初に、下に付けたい場合は一番最後に記述します。
キャプションを中央揃え、右揃えにしたい場合は、CSSを使って記述していきます。
CSSに関しても今後、記事を掲載していく予定なので順番に記述方法を覚えていきましょう！
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>画像を表示するサンプルコード</title>
</head>
<body>
<div>
<header>
<h1>ちからこぶ</h1>
</header>
<article>
<h2>ちからこぶについて</h2>
<p>プログラマーやシステムエンジニアになりたい、PCについてもっと詳しくなりたい、これからコンピュータについて勉強を始めたいという方を応援するサイトです。ICTのことを中心に様々な情報を発信していきます。</p>
<p>近年急速にIT化が進んでいること、また2020年度から小学校でプログラミング教育が必修化になったことに伴い、初心者の方がICTを気軽に楽しく勉強するのを応援するためにサイトを立ち上げました。</p>
<figure>
<img src="chikarakobu.png" width="650" height="350" alt="サイトのメインイメージキャラクターちからこぶくんです">
<figcaption>サイトのメインイメージキャラクターちからこぶくんです。</figcaption>
</figure>
</article>
<footer>
<small>Copyright © ちからこぶ All Rights Reserved.</small>
</footer>
</div>
</body>
</html>実行結果
ちからこぶくん
なるほど〜、画像にキャプション付ける時は、<figcaption>を使えば良いんだね！