【html】img画像の下に文字を置く指定方法

「画像の下に文字を置くなんて簡単そうなのに…」

と悩んでませんか？

できそうでできないって、もどかしいですよね。

そんな初心者の人向けに、img画像の下に文字を置く指定方法を紹介します。

「なぜ文字が下にならないのか」

理由まで分かると、いつでも画像の下に文字を置けます。

画像と文字が横並びするケース
画像の下に文字を置く
画像の下に置いた文字を真ん中にする
画像を横並びさせる
1. display: flexを使う
2. display: inline-blockを使う
参考サイト
まとめ

画像と文字が横並びするケース

まず、img画像と文字が横並びするコードの書き方をご覧ください。

その前に画像のサイズはこちらです。

幅：400px
高さ：200px
縦横比 2：1

<img src="work.png" alt="作業風景">
作業風景

画像の横に文字が並んでいますよね。

※<img>の幅・高さは未指定なので、画像は本来の大きさで表示されます。
【参考記事】img画像のサイズの決まり方｜css指定の「なし・あり」

横並びしてしまうのは、<img>がインライン要素だから。

インライン要素は文字と同じに扱われます。

ですから、「画像 → 文字」と横に続けて表示される結果に。

小さなアイコンならまだしも、大きな画像を文字の1つと扱うのが馴染めないかもしれません。

ちなみに下のコードだと、「文字 → 画像」の順で横並びになります。

作業風景
<img src="work.png" alt="作業風景">

それでは次で、画像の下に文字を置きます。

画像の下に文字を置く

画像の下へ文字を置くには<p>で囲いましょう。

<img src="work.png" alt="作業風景">
<p>作業風景</p>

すると、文字が画像の下になりました。

理由は<p>はブロック要素なので画面幅いっぱいに広がり、その前後で改行が入るから。

と言われても、なかなかイメージしにくいはず。

ですので、こちらの図をどうぞ。

<p>が画面の横いっぱいに広がっています。

コードならこんなふうに改行が。

というわけで、画像と文字は横並びしなくなります。

ちなみに<h2>などで文字を囲っても、画像の下に文字が置かれます。

【参考記事】ブロック要素とインライン要素、3つの違い

画像の下に置いた文字を真ん中にする

今度は下に配置した文字を画像の中央にしてみますね。

もう1度、先ほどの図を確認。

画像の下に文字は降りてきました。

しかし、これだと文字が画像に対して左へ寄っていますね。

<p>にtext-align:centerとすればどうでしょうか。

真ん中は真ん中でも、文字は画面幅の中央です。

なので、こういう時は下のようにします。

<div>
  <img src="work.png" alt="作業風景">
  <p>作業風景</p>
</div>

<div>で<img>と<p>を囲みましょう。

で、この場合の親子関係はこちらになります。

親：<div>
子：<img> <p> ←兄弟

そして、<div>にtext-align: centerと指定。

<img>にはwidth: 100%と指定すれば、<div>と同じ幅に。

div {
  text-align: center;
}
img {
  width: 100%;
}
/* width: 100%は親であるdivの幅に対する割合 */

すると<div>の幅が変わっても、画像の真ん中に文字は位置し続けます。

何気にレスポンシブ対応できております…

右寄せにしたい時は、text-align: rightとしましょう。

いい感じに右寄りです。

と、ここまでは大丈夫でしょうか。

【参考記事】text-align: centerが効いていないように見える理由と対処法

画像を横並びさせる

さて次は、「文字を下に置きつつ複数の画像を横並びさせる指定」をやってみます。

長ったらしい言い方で、あれですが…

やり方は2つあり、どちらも横並びさせるプロパティ値を使います。

プロパティ・値

display: flex
display: inline-block

ちなみに3つや4つ並びもできますよ。

display: flexを使う

以下のコードでは、「画像＋文字」のセットが2つあります。

ですので、リストでくくりましょう。

というわけで<ul>と<li>の登場です。

<ul>
  <li>
    <img src="work1.png" alt="作業風景1">
    <p>作業風景1</p>
  </li>
  <li>
    <img src="work2.png" alt="作業風景2">
    <p>作業風景2</p>
  </li>
</ul>

こんなレイアウトになりました。

レイアウトとは骨組みです。

時折耳にすることばだと思うので、頭に入れておきましょう。

親子関係もどうぞ。

親：<ul>
子：<li>

親：<li>
子：<img> <p>

これで、どういう結果になるか。

見てみますね。

縦に並んでしまうのですが、これは想定通り。

<li>はブロック要素なので、<li>を一塊ひとかたまりとして縦に並ぶんですね。

と聞いても、分かりにくいかも。

一応、検証画面だとこんなふうになってます。

ちなみに…

下のコードでは文字を<p>で囲みませんでした。

<ul>
  <li>
    <img src="work1.png" alt="作業風景1">
    作業風景1
  </li>
  <li>
    <img src="work2.png" alt="作業風景2">
    作業風景2
  </li>
</ul>

※横にスクロールしてください。

すると、やっぱり画像と文字が横に並んでしまいます。

なので、<li>の中でも<p>を使いましょう。

それではここから横並びにしていきます。

どうするかというと、<li>の親要素である<ul>にdisplay: flexを指定。

ul {
  display: flex;
  text-align: center;
}

すると、画像と文字を含んだ<li>が横並びしました。

文字をセンターにしたいので、<ul>か<li>にtext-align: centerと指定。

横並びします。

ですが、これだと画面幅がせまい時にデザイン崩れが起きます。

なので、レスポンシブに対応した調整が必要。

というわけで、次へ。

レスポンシブ対応させる

レスポンシブ対応させるには、次の2つを書き加えましょう。

<li>にwidth: 50%
<img>にwidth: 100%

<li>のwidth: 50%は、親である<ul>の幅の中で50％を占めます。

3つ並びの場合は33%に。

また、<img>のwidth:100%は、親である<li>の幅と同じ大きさを表す指定です。

と、説明したもののやっぱり見た方が分かりやすいかと…

ということで、こちらをどうぞ。

指定した結果は、以下です。

レスポンシブ対応できました。

が、画像同士にすき間がなく見てて窮屈…

少し距離をとりたいですね。

なので、余白を作るため2つの<li>を45%とし、<ul>の幅の中で占める割合を90%に。

そして、flexと合わせて使うjustify-content: space-aroundを<ul>に指定。

こうすれば、適度な余白をとりつつレスポンシブできます。

justify-content	横並びした要素の配置の仕方を指定するプロパティ。
space-around	横並びした要素どうしの間隔を一定に開ける値。

まあまあいい感じかと。

最終的なコードはこちら。

<ul>
  <li>
    <img src="work1.png" alt="作業風景1">
    <p>作業風景1</p>
  </li>
  <li>
    <img src="work2.png" alt="作業風景2">
    <p>作業風景2</p>
  </li>
</ul>

ul {
  display: flex;
  justify-content: space-around;
  text-align: center;
}
li {
  width: 45%;
}
img {
  width: 100%;
}

一気に進んできたので、分からなくなったら見返しましょう。

※flexについては『Webクリエイターボックス』さんのFlexboxチートシートがとても^×2分かりやすいですよ。

【補足】

上のコードで<li>のwidthは、flex-basisに置き換えても同じ結果になります。

ul {
  display: flex;
  justify-content: space-around;
  text-align: center;
}
li {
  flex-basis: 45%;
}
img {
  width: 100%;
}

flex-basisはflexを使う時、子要素の幅を指定するのに用いるプロパティです。

ここでは見慣れているwidthの方を使いました。

display: inline-blockを使う

htmlコードは先ほどと同じ。

<ul>
  <li>
    <img src="work1.png" alt="作業風景1">
    <p>作業風景1</p>
  </li>
  <li>
    <img src="work2.png" alt="作業風景2">
    <p>作業風景2</p>
  </li>
</ul>

違うのはcssだけです。

display: inline-blockを使うのですが、指定するのは<ul>ではなく<li>に。

これがポイントですね。

ul {
  text-align: center;
}
li {
  display: inline-block;
}

文字は画像の中央にしたいので、先ほどと同じく<ul>か<li>にtext-align: centerを指定。

<li>が並びましたね。

そして、こちらのやり方でもレスポンシブ対応させる必要があります。

レスポンシブ対応させる

ここもdisplay: flexの時と同じ。

<li>と<img>に幅の指定をすると、横並びしたままレスポンシブできます。

<li>にwidth: 45%
<img>にwidth: 100%

画像どうしの間を空けるため、<li>をwidth: 45%に。

続いて<li>に左右の余白としてmargin(2.5%)を指定し、合計で50%になるようにします。

(width)45% + (左余白)2.5% + (右余白)2.5% = 50%

余白の一手間があるのが、さっきのflexと違うところですね。

ちょっとしたポイント

inline-blockでレスポンシブする時は、<li>の合計を50%にするよう述べました。

しかしその際、htmlコードの書き方に1つ注意が必要です。

<ul>
  <li><img src="work1.png" alt="作業風景1"><p>作業風景1</p></li><li><img src="work2.png" alt="作業風景2"><p>作業風景2</p></li>
</ul>

※横にスクロールしてください。

上のコードでは、1つ目の<li>と2つ目の<li>には改行を入れず記述しました。

改行をすると、それが1文字とカウントされてしまいます。

結果、横並びできません。

50%(1つ目のli) + 1文字 + 50%(2つ目のli) → 100%を超えてしまう。

そんなわけでinline-blockを使う場合、下のどちらかの工夫が必要です。

<li>のあとに改行を入れないように記述する。
marginを左右2％と指定し、合計で50%(45+2+2=49%)にしない。

一応、頭の片隅に残しておきましょう。

最終的なコード。

<ul>
  <li><img src="work1.png" alt="作業風景1"><p>作業風景1</p></li><li><img src="work2.png" alt="作業風景2"><p>作業風景2</p></li>
</ul>

ul {
  text-align: center;
}
li {
  display: inline-block;
  width: 45%;
  margin-left: 2.5%;
  margin-right: 2.5%;
}
/* 45+2.5+2.5=50% */
img {
  width: 100%;
}

というわけで、左右の余白をとりつつ横並びが実現。

かつ、レスポンシブにも対応できるデザインとなりました。

参考サイト

この記事はCSS3をもとに書きました。

CSS3とはcssのルールブックみたいなもので、その最新版です。

どちらも翻訳あります。

ややむずかしめなので、お時間ある方だけどうぞ〜

まとめ

さいごに、今回の流れをまとめました。

画像の下に文字を置く。
画像の下に置いた文字を真ん中にする。
画像を並べさせる。
レスポンシブに対応させる。

以上、参考にしてみてください。

こちらはFlexboxチートシート作者の『Webクリエイターボックス』さんの本です。

コードを書く時、手元にあると助かる1冊となっています。

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座

html/cssの本はKindle Unlimitedだと無料で読めるものもあるので、ぜひどうぞ！

Kindle Unlimited

30日間の無料体験あり