HTML・CSSで画像の横に文字を並べる方法とは？3つのパターンをコード付きで紹介

HTMLとCSSで画像と文字を横に並べたいときがありますよね。

試してみたけれど正しく配置されない、なんて悩んでいる方もいるかと思います。

今回は、HTMLとCSSを使って画像と文字を横に並べたいという方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、HTML・CSSで画像の横に文字を並べる方法が分かるようになりますよ。

ぜひ最後まで読んでくださいね！

画像の横に文字を置く方法とは？おすすめの3つを紹介

画像の横に文字を置きたい、ということですが、実は画像と文字自体はインライン要素なので、ブロックレベル要素のタグで囲っていなければ、横に並びます。

ただ、この方法では、画像と文字の大きさの違いなどで、不必要な余白ができてしまい、他の箇所も含めたレイアウトが難しくなります。

要素のサイズや余白を指定するためにも、画像や文字はブロックレベル要素で囲っておきたいですよね。

ここでは、ブロックレベル要素同士を横に並べる方法を3つ紹介します。

それぞれ見ていきましょう。

display: inline-blockを使う

display: inline-blockは、要素をインラインブロックにする指定です。

ブロック要素と同様にサイズと余白の指定ができる上に、改行されず、インライン要素のように横に並びます。

<div class="side-img"><img src="sample01.jpg"></div>
<p class="side-txt">要素をインラインブロックに指定して、画像の横に文字を置く</p>

CSSでは、以下のように記述します。

.side-img {
  display: inline-block;
  vertical-align: middle;
}
p.side-txt {
  display: inline-block;
  width: 400px;
  margin-left: 15px;
}

インラインブロックにすることで、横並びになることが確認できるかと思います。

「vertical-align」はインライン要素の縦方向の位置を指定するプロパティです。

「middle」とすると、中央揃えになります。他には「top」や「bottom」などがありますね。

display:flexを使う

display:flexは、中の要素を横並びにすることができる指定で、フレックスボックスと呼ばれます。

<div class="flex">
<p class="side-img"><img src="sample02.jpg"></p>
<p class="side-txt">フレックスボックスを使用して、要素を横並びにする</p>
</div>

CSSは、以下のように記述します。

.flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex>p {
  width: 49%;
}

フレックスボックスを使って横並びにすることができました。

justify-contentは、並べる要素の位置関係を指定します。「space-between」の場合は、等間隔に揃いますね。

また、「align-items: center」を使って、縦方向の中央に2つの要素を配置しています。

CSSで位置を簡単に操作できるほか、縦並びを横並びにするなど、レイアウトの変更がしやすい方法です。

メディアクエリを使えば、画面サイズによって指定を変えることも容易にできるので、レスポンシブサイトにおすすめですね。

疑似要素::beforeを使う

CSSの疑似要素である「::before」を用いて、画像の横に文字を置きます。

<p class="message">疑似要素を用いて画像の横に文字を配置する</p>

CSSは、以下のように記述します。

.message::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(sample03.jpg) no-repeat;
  background-size: contain;
  margin-right: 7px;
  vertical-align: middle;
}

疑似要素の背景に画像を指定し、サイズを調整します。

contentプロパティは、疑似要素に文字や画像などのコンテンツを挿入したいときに使います。

この方法では、img要素を使わずに、CSSで画像を設置することが可能です。「vertical-align」で中央揃えにすることもできます。

画像が小さく、アイコンのように使う場合はこの方法がおすすめですね。

ただし、疑似要素に画像を指定すると、検索エンジンのクローラーが認識しなくなってしまいます。

記事の内容と関わりがある画像の場合は、他の方法を使った方が良いでしょう。

まとめ：状況に応じてCSSを使い分けよう

今回は、HTML・CSSを使って画像の横に文字を配置する方法を解説してきました。

それぞれの方法にメリットデメリットがありますので、目的に合わせて使うことをおすすめします。

今回の記事が参考になれば幸いです。