記事の本文中に画像を表示して、図版としてマークアップします。
サンプルでは「ちからこぶくん」の画像を表示してみます！
画像を表示する方法
① 画像を用意する
まずは、本文中に表示させたい画像を用意しましょう。
今回の記事の本文はwidth(横幅)は、800ピクセルになるように設定していますので、用意する画像はこの横幅に収まる大きさにしておきます。
ここでは、下記のように横幅を600ピクセルにした「ちからこぶくん」の画像(chikarakobu.png)を用意しました。
用意した画像はHTMLファイルと同じフォルダに保存しておきましょう。
② マークアップする
下記の表は、今回使用するタグの一覧表になります。
今回使用するタグ一覧
| <img> | 画像を表示する |
|---|---|
| <figure> | 図版をマークアップする |
③ <figure>タグをマークアップする
画像が本文に関連した図版であることを明確にするために、次のように<figure>タグでマークアップします。
※17行目、18行目に<figure>タグを追加しています。
<!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>
</figure>
</article>
<footer>
<small>Copyright © ちからこぶ All Rights Reserved.</small>
</footer>
</div>
</body>
</html>④ 画像を表示する
①で用意した画像を表示します。次のように<img>を追加します。
※18行目に<img>タグを追加しています。
<img>のsrc属性では画像のファイル名を指定します。
width属性では、画像の横幅のサイズを記述します。
height属性では、画像の縦幅のサイズを記述します。
alt属性では、画像の内容についての説明を記述します。この説明は音声ブラウザで閲覧しているユーザはもちろん、コンテンツの情報を収集しているクローラに画像の内容を伝えるために使用されます。
そのため、画面に表示されることはありませんが、基本的に必ず記述しておく必要があります。
なお、画像の前後に画像と同等の内容を記述した文章がある場合や、装飾目的の画像で何かを伝えるものがない場合、alt属性の値を省略することが認められています。
<!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="サイトのメインイメージキャラクターちからこぶくんです">
</figure>
</article>
<footer>
<small>Copyright © ちからこぶ All Rights Reserved.</small>
</footer>
</div>
</body>
</html>⑤ 実行結果
ちゃんと画像が表示されました！