HTMLで画像の下に説明文を付けるときは、figureタグとfigcaptionタグを使うことがあります。しかし、「figcaptionの文字だけ中央にしたい」「画像とキャプションをセットで中央寄せしたい」などどこにCSSを書けばよいのか迷いやすいです。figcaptionを中央寄せにする一番簡単な方法は、figcaptionにtext-align: center; を指定することです。
この記事では、コピペで今すぐ使える3つのシチュエーション別コードを用意しました。あなたの目的に合わせてCSSを貼り付けるだけで解決します。
忍者CODEマガジンは、未経験からでもプロのエンジニアを目指せるプログラミングスクール「忍者CODE」が運営しているプログラミング情報サイトです。
- プログラミングの効果的な学習方法
- プログラミング用語の解説
- エンジニアのキャリアに関する情報
など、プログラミングを始めたばかりの初学者に役立つ記事を幅広く公開しています。
HTMLで画像の下にキャプションを表示する基本コード
HTMLで画像の下にキャプションを表示したい場合は、画像をfigureタグで囲み、その中にimgタグとfigcaptionタグを書きます。
<figure class="photo">
<img src="sample.jpg" alt="カフェでノートパソコンを開いている様子">
<figcaption>カフェでWeb制作を学習している様子</figcaption>
</figure>このコードでは、画像の下にfigcaptionのテキストが表示されます。figcaptionは、親となるfigureの内容を説明するキャプションです。
figcaptionタグは、基本的にfigureタグの中で使います。画像説明だけを単独で置きたい場合は、pタグなど別の要素も検討しましょう。
関連記事：「HTMLのfigureタグとは？imgタグとの違いやCSSの注意点を解説」
画像の下にキャプションを置くときの考え方
画像の下に短い説明文を置くと、読者が「この画像が何を表しているのか」を理解しやすくなります。
<figure class="article-image">
<img src="html-layout.png" alt="HTMLの基本レイアウトを示す図">
<figcaption>HTMLページの基本レイアウト</figcaption>
</figure>画像とキャプションをセットで扱いたい場合は、figureとfigcaptionを組み合わせるのが自然です。
figcaptionとalt属性の違い
figcaptionとalt属性は、どちらも画像に関係しますが役割が違います。
- figcaption：画面上に表示される画像の説明文
- alt属性：画像が見られない場合やスクリーンリーダー向けの代替テキスト
<figure>
<img src="chart.png" alt="HTML学習時間が増えるほど理解度が上がるグラフ">
<figcaption>HTML学習時間と理解度の関係</figcaption>
</figure>figcaptionを書いたからといって、imgタグのalt属性が不要になるわけではありません。画像の内容や役割に応じて、両方を適切に設定しましょう。
figcaptionを中央寄せにする一番簡単な方法
figcaptionの文字だけを中央寄せにしたい場合は、CSSでtext-align: center;を指定します。
キャプションを中央寄せにする方法
最もシンプルな書き方は、figcaptionに対してtext-alignを指定する方法です。
figcaption {
text-align: center;
}classを付けて、特定の画像キャプションだけ中央寄せにすることもできます。
<figure class="photo-center">
<img src="sample.jpg" alt="HTMLコードを書いている画面">
<figcaption>HTMLコードを書いている画面</figcaption>
</figure>.photo-center figcaption {
text-align: center;
}キャプションの文字だけ中央にしたい場合は、figcaptionにtext-align: center; を指定するだけでOKです。
text-alignで中央になるのは「文字」だけ
text-alignは、ブロック要素内のインライン方向の内容をそろえるCSSです。そのため、figcaption内の文字を中央にするには向いています。一方で、画像そのものやfigure全体を中央にしたい場合は、text-alignだけでは足りないことがあります。
.photo-center figcaption {
text-align: center;
}この指定で中央寄せになるのは、figcaption内のテキストです。画像が左に寄っている場合は、次の章で紹介するようにfigureやimg側も調整しましょう。「キャプションは中央なのに画像が左に寄る」という場合は、figcaptionではなく画像やfigure側のCSSを確認してください。
画像とfigcaptionをまとめて中央寄せにする方法
画像とキャプションをセットで中央に置きたい場合は、figure側のレイアウトを調整します。よく使う方法は、figureに幅を持たせてmargin: 0 auto;を指定する方法です。
figureに幅を指定してmargin: 0 auto; を使う
figure全体を中央寄せしたい場合は、figureに幅を指定し、左右のmarginをautoにします。
<figure class="center-figure">
<img src="sample.jpg" alt="HTML学習中の画面">
<figcaption>HTMLを学習している画面</figcaption>
</figure>.center-figure {
width: 320px;
margin: 0 auto;
}
.center-figure img {
width: 100%;
height: auto;
display: block;
}
.center-figure figcaption {
margin-top: 8px;
text-align: center;
}この指定では、figure全体が中央に配置され、画像はfigureの幅に合わせて表示されます。figcaptionは画像の下で中央寄せになります。画像とキャプションを1セットとして中央寄せしたい場合は、figcaptionだけでなくfigure全体を中央にすることが大切です。
スマホ対応ではmax-widthを使う
画像幅を固定しすぎると、スマホ画面で画像がはみ出すことがあります。実務では、固定幅だけでなくmax-widthを組み合わせると安全です。
.center-figure {
max-width: 480px;
margin: 0 auto;
}
.center-figure img {
width: 100%;
height: auto;
display: block;
}この書き方なら、親要素の幅に合わせて画像が縮みやすくなります。画像にwidthだけを指定してheightを固定すると、縦横比が崩れることがあります。基本はheight: auto; をセットで使いましょう。
figureのデフォルト余白にも注意する
ブラウザによっては、figureに標準のmarginが付いていることがあります。思ったより左右に余白がある場合は、まずfigureのmarginを確認しましょう。
figure {
margin: 0;
}ただし、すべてのfigureに影響するため、記事内だけに限定したい場合はclassを付けて指定します。
.center-figure {
margin: 0 auto;
}flexboxで画像とキャプションを中央に寄せる方法
figure内の画像とfigcaptionを縦に並べつつ、まとめて中央寄せしたい場合はflexboxも便利です。
flex-direction: column; で縦並びにする
figureにdisplay: flex;を指定し、flex-direction: column;で画像とキャプションを縦に並べます。さらにalign-items: center;で、画像とキャプションを横方向の中央にそろえます。
<figure class="flex-figure">
<img src="sample.jpg" alt="CSSで中央寄せされた画像">
<figcaption>CSSで中央寄せされた画像</figcaption>
</figure>.flex-figure {
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
}
.flex-figure img {
max-width: 100%;
height: auto;
}
.flex-figure figcaption {
margin-top: 8px;
text-align: center;
}flexboxを使うと、画像とキャプションをひとまとまりとして中央にそろえやすくなります。
複数の画像カードを並べる場合にも使える
画像カードを複数並べ、それぞれの画像とキャプションを中央寄せしたい場合は、親要素とfigureの両方でflexboxを使うと整理しやすくなります。
<div class="gallery">
<figure class="gallery-item">
<img src="html.jpg" alt="HTMLのコード例">
<figcaption>HTMLのコード例</figcaption>
</figure>
<figure class="gallery-item">
<img src="css.jpg" alt="CSSのコード例">
<figcaption>CSSのコード例</figcaption>
</figure>
</div>.gallery {
display: flex;
gap: 24px;
justify-content: center;
flex-wrap: wrap;
}
.gallery-item {
display: flex;
flex-direction: column;
align-items: center;
max-width: 240px;
margin: 0;
}
.gallery-item img {
width: 100%;
height: auto;
}
.gallery-item figcaption {
margin-top: 8px;
text-align: center;
}この例では、.galleryで画像カード全体を中央に並べ、.gallery-itemで各画像とキャプションを縦方向に整理しています。
flexboxでは、justify-contentとalign-itemsの向きがflex-directionによって変わります。縦並びにした場合は、align-itemsで横方向の位置を調整することが多いです。
text-alignとflexboxの使い分け
figcaption中央寄せでは、text-alignとflexboxを使い分けると迷いにくくなります。
| やりたいこと | おすすめのCSS |
|---|---|
| キャプションの文字だけ中央にする | text-align: center; |
| 画像とキャプションのセットを中央にする | margin: 0 auto; |
| 画像とキャプションを縦に並べて中央にする | display: flex; と align-items: center; |
| 複数の画像カードを中央に並べる | 親要素にflexboxを指定する |
figcaptionの位置を変える方法
figcaptionは、figureタグの中で最初または最後に書けます。そのため、キャプションを画像の下に置くか上に置くかは、HTMLの順番で調整できます。
キャプションを画像の上に配置したい場合は？
画像の上にキャプションを表示したい場合は、figcaptionをimgタグより前に書きます。
<figure class="caption-top">
<figcaption>HTMLページの完成イメージ</figcaption>
<img src="layout.png" alt="HTMLページの完成イメージ">
</figure>.caption-top {
max-width: 480px;
margin: 0 auto;
}
.caption-top figcaption {
margin-bottom: 8px;
text-align: center;
}
.caption-top img {
width: 100%;
height: auto;
display: block;
}figcaptionを画像の上に置きたい場合は、figcaptionをfigure内の最初に書き、余白はmargin-bottomで調整します。
CSSだけで順番を入れ替える方法
HTMLの順番は画像、キャプションのままにして、CSSで見た目だけ上に移動させることもできます。
.caption-top-flex {
display: flex;
flex-direction: column;
align-items: center;
}
.caption-top-flex figcaption {
order: -1;
margin-bottom: 8px;
text-align: center;
}ただし、初心者のうちはHTMLの順番を実際の表示順に合わせた方が理解しやすいです。特別な理由がなければ、画像の上に表示したいキャプションはfigcaptionを先に書く方法から試しましょう。CSSのorderで表示順を変えると、見た目とHTMLの順番がずれるため、管理が難しくなる場合があります。
figcaption中央寄せでよくある失敗
figcaptionの中央寄せはシンプルですが、画像やfigureの中央寄せと混同すると原因が分かりにくくなります。ここでは、よくある失敗を整理します。
figcaptionだけ中央で画像が左寄せのまま
figcaptionにtext-alignを指定しても、画像自体は中央になりません。
figcaption {
text-align: center;
}画像も中央にしたい場合は、figureやimg側にCSSを追加します。
.photo {
max-width: 480px;
margin: 0 auto;
}
.photo img {
width: 100%;
height: auto;
display: block;
}figureの余白で中央がずれて見える
figureにはデフォルトのmarginが付くことがあります。そのため、画像幅は合っているのに、全体が少しずれて見えることがあります。
figure {
margin: 0;
}実務では、まずmarginをリセットし、必要な余白をclassで指定することが多いです。
キャプションが長すぎて読みづらい
figcaptionは画像の補足説明です。長文を書きすぎると、本文との役割があいまいになります。
figcaptionは短く要点を書き、詳しい説明は本文側で補足すると読みやすくなります。
公式ドキュメントも確認する
figcaptionやCSSの仕様を正確に確認したい場合は、公式ドキュメントも参考になります。
オススメ：HTML、CSSの問題集に無料で挑戦しよう！
HTML、CSSを勉強していると、調べれば分かることもありますが、実際に自分でアウトプットするのは難しいと感じたことはありませんか？
アウトプットするためのおすすめの方法は、「問題解くこと」です。
忍者CODEのHTML、CSS 学習の無料問題集では、HTML、CSSに関する問題を100問以上用意しており、LINE登録するだけで解答を無料で確認できます！
まとめ
この記事では、HTMLのfigcaptionを中央寄せにする方法を解説しました。
figcaptionの文字だけを中央寄せにするなら、figcaptionにtext-align: center; を指定するのが一番簡単です。画像とキャプションをまとめて中央にしたい場合は、figureに幅を指定してmargin: 0 auto;を使います。さらに、画像とキャプションを縦に並べてきれいに中央へそろえたい場合は、figureにdisplay: flex;、flex-direction: column;、align-items: center;を指定すると扱いやすくなります。
また、キャプションを画像の上に配置したい場合は、figcaptionをfigure内の最初に書く方法が分かりやすいです。中央寄せがうまくいかないときは、「文字だけを中央にしたいのか」「画像とキャプション全体を中央にしたいのか」を分けて考えましょう。
