CSSで画像の横に文字を置けない！そんな時に試してほしい５つの方法

サイト作成では「画像の横に文字を配置する」というシーンに、多々遭遇します。

とても簡単なことのように思えますが、最初のうちはコレがなかなか上手くいきません。

たとえ画像の横に文字を並べることに成功したとしても、今度は画像とテキストのレイアウトが崩れてしまったり…。

今回は、そんなHTML・CSSで画像の横に文字を置く時に失敗しやすい問題と、その解決方法をまとめてみました。

ちなみに、画像の横に文字を置く方法は一つだけではありません。

例えば一般的な方法として、以下の５つが有名です。

1. display: inline-block　←オーソドックスな方法
2. display: flex　←初心者でも簡単
3. 疑似要素　←文頭や文末にアイコンを付けたい
4. float　←紙媒体のようなレイアウトに
5. table　←CSSが使えない人向け

初心者の方は、とりあえず「１」display: inline-blockか「２」display: flexで画像の横に文字を置く方法がオススメです。

あとの「２」～「５」は状況や用途に応じて、使い分けてみてください。

CSSで画像の横に文字を並べたい時に起きる問題

実は、画像・文字はブロック要素（pやdivなど）で囲まなければ、そのまま横に並びます。

これは、画像・文字そのものがインライン要素だからです。

結果は以下のように、一応、画像の隣からそのまま文字が続いていることがわかります。

しかし、画像と文字の大きさが不釣り合いの場合、このように大きな空間ができてしまったりします。

また、画像・文字をブロック要素で囲めば、当然、改行されてしまいます。

そもそも画像の横に文字を配置できない原因の多くは、このように画像・文字ともに（あるいは片方が）ブロック要素に囲まれているためです。

とは言え、コードを管理しやすくするためにも、なるべくテキストや画像は異なるブロック要素でマークアップしておきたいもの。

では、ブロック要素同士をきれいに横並びにするにはどうしたら良いのでしょうか？

１．display: inline-blockで画像の横に文字を配置

ブロック要素とブロック要素を隣り合わせに配置するには、displayプロパティの値をblockからinline-blockへ変更します。

inline-blockとは、ブロック要素のようにサイズ・余白の調整ができ、かつインライン要素のように改行されずに横に並ぶ性質をもった表示形式です。

よく「ブロック要素とインライン要素の中間」などと表現されます。

例えば、以下のようなHTMLを想定した場合、各ブロック要素にdisplay :inline-blockを適用します。

すると、figureやpといったブロック要素であっても、横に並びます。

しかし、画像とテキスト全体の大きさが不釣り合いの場合、以下のようにレイアウトが崩れてしまいます。

きれいに「上端揃え」または「中央揃え」にする場合は、さらにvertical-alignを指定する必要があります。

vertical-alignは垂直方向の位置を調整するCSSプロパティです。

上端に揃えたい場合は値にtopを、中央の場合はmiddleを、下端の場合はbottomを入力してください。

また、画像と文字の間が狭い場合は上のコードのようにmarginで調整してあげましょう。

これでようやくレイアウトが整いました。

ただし、横並びにした時に画面に収まりきらない場合は、自動的に改行されてしまうので注意が必要です。

この場合、横幅を固定した親要素で両ブロックを挟む等の横並びを維持する方法もあります。

しかし、主要ブラウザでレスポンシブが推奨される昨今は、@media screen等で様々な画面に対応したほうが無難かもしれません。

こうすることで、広い画面で閲覧すると画像・文字を横並びになり、狭い画面だとそれぞれ中央＆縦並びで表示されます。

２．display: flexで等間隔に横並べする

displayプロパティに新しく追加されたflexは、まさにブロック要素同士の横並べに最適な表示形式です。

「要素同士の高さを揃えたい」「等間隔＆中央に並べたい」といった細かいレイアウト調整も数行のコードで実現できます。

もちろん画像の横に文字を配置したい場合にも応用できるテクニックです。

しかし、ほとんどの主要ブラウザで対応が進められているものの、IE最新版ではバグが発生するなど完全な対応ではないことに注意してください。

（参考）display: flexの対応ブラウザ一覧（Can I use…）

では、display: flexを使って画像の横に文字を配置してみましょう。

まず、事前に横並べしたい要素を親要素で囲んでおきます。

前章でやったinline-blockでは横並べする要素に直接指定していましたが、flexの場合は親要素に指定します。

たったこの一行で、子要素を横に並べることができます。

vertical-alignを操作しなくても上端揃えで表示されてますね。

display: flexで垂直方向の位置を変えたい場合は、vertical-alignではなくalign-itemsプロパティを使ってください。

上図のようにY軸の中央に配置したい場合はalign-itemsプロパティをcenterに、底辺に配置したい場合はendに指定してください。

また、display: flexはjustify-contentプロパティと組み合わせることで、柔軟なレイアウト調整が可能になります。

例えば、ある範囲の中で各ブロックを等間隔に並べたい時は、justify-contentにspace-betweenを指定します。

横に並べる場合、テキストブロックも横幅を決めておかないと、レイアウトが崩れるので注意してください。

※各ブロックのサイズを把握できるよう、便宜上テキストに背景色を指定しています。

space-betweenは両端を詰めたレイアウトですが、中央に寄せたい場合はspace-aroundに変更してみてください。

（※わかりやすいように画像・テキスト各ブロックの横幅を小さく設定しています）

space-arondを指定すると、上図のように両端に等間隔の隙間が開き、space-betweenよりも中央よりに配置されます。

このようにdisplay: flexは、各ブロックを水平線上に並べるだけでなく、美しいレイアウトを効率的かつ簡単に実現できます。

３．::beforeで文字の横にアイコンを設置

小さな画像（アイコン）を文字の横に配置するなら、CSSの疑似要素::beforeまたは::afterがオススメです。

上図のように記事内容と直接的な関係がないアイコンを表示したい時、疑似要素ならいちいちimgを入力したりfigureでマークアップしなくて済みます。

「疑似要素」と聞いてピンと来てない人も、とりあえずコピペだけで実装できるよう解説を進めますので、安心してください。

（※逆に、記事内容と関係が深い画像・図表は、疑似要素で表示させてしまうとクローラーが認識しないためオススメしません。「１．」または「２．」の方法をお試しください。）

まず、HTMLで画像を付けたいテキストを用意し、それぞれクラスを指定しておきましょう。

次に、CSSで疑似要素の内容を作成していきます。

今回は、文頭に画像を配置したいので::beforeで良いでしょう。

contentプロパティには、後から追加するコンテンツを入力します。

本来content: "調味料"といった感じにテキストを指定するのが一般的ですが、上記のコードのようにcontentで画像ファイルを呼び出すことも可能です。

しかし、上図のように画像と文字の大きさが不釣り合いです。

画像の大きさを調整したいところですが、残念ながらcontentプロパティで追加した画像はCSSでサイズ変更できません。

編集ソフトで文字の高さに合わせて画像そのものをリサイズしてしまうのも一つの手ですが、どうにかCSSのみで解決したいところ。

そこで、疑似要素をinline-block化し、背景画像としてアイコンを呼び出す方法を試してみましょう。

画像はbackgroundで指定するため、contentの値は上記のように空にしてください。

width、heightでリサイズした疑似要素内に、background-sizeで背景画像が収まるよう指定しています。

無事、疑似要素で追加した画像のリサイズに成功しました。

しかし、今度はアイコンと文章との位置関係がちょっと歯がゆい感じです。

vertical-alignで調整することもできますが、より細かく位置を変更したい場合はtransformプロパティも有効です。

translateY()で縦軸の位置を調整できます。

画像を横軸にズラしたい時はtranslateX()で指定してください。

あらかじめ使用頻度の高い画像を疑似要素として作っておけば、アイコンを付けたい段落にクラス指定するだけで良いので、使い回しも非常に楽です。

４．floatで画像の横に文字を回り込ませる

一昔前までは、画像の横に文字を並べる時にfloatを使っていた人も多かったのではないでしょうか？

現在では、先ほど解説したinline-blockやflexを使うのが主流になりつつありますが、floatも使えないわけではありません。

例えば、画像の右隣にテキストを配置したい場合は、imgセレクタのfloatをleftに指定します。

すると以下のように、画像の横＆上端からテキストが回り込むように表示されます。

「回り込む」と表現されるように、テキストの量が画像の高さを超えると、今度は画像の下に改行されます。

これは下図と比較してみるとわかる通り、inline-blockやflexとは異なるレイアウトですね。

float: leftはタブロイド紙のような配置になり、スペースを余すことなくテキストで埋めたい場合に適しています。

一方、均整の取れたレイアウトや管理・調整のしやすさで言うとdisplay:inline-blockやflexのほうが良いかもしれません。

ちなみに、画像の横に回り込ませたくない要素がある場合は、clearプロパティを設定する必要があります。

例えば、以下のコードのうち２番目の段落（p.new_paragraph）から回り込みを解除してみましょう。

clearの値をbothに指定することで、その段落以降のfloat効果を解除できます。

この回り込みの解除し忘れによって、レイアウトが崩れてしまうことがあるので気を付けてください。

５．（CSS不要）tableで画像の隣のセルに文字を入力

あまり一般的ではないテクニックですが、tableタグを使って画像の横に文字を配置することも可能です。

ライティング案件の受注などで記事ごとの編集権限しか与えられておらず、CSSによるスタイル変更が許されていない場合など、tableタグでごり押しできるかもしれません^^;

１列目に画像を、２列目にテキストを入れてみました。

borderを0に指定しておくことで、表示上、テーブルを使っていないように見せます。

とは言え、レスポンシブ対応には不向きな方法なので、使うタイミングには注意してください。

まとめ

今回は、画像の横に文字を置く方法を解説しました。

単純な操作のように思えますが、初心者には躓きやすいポイントがたくさんあるテクニックでもあります。

何種類か方法を紹介しましたが、やはり基本的にはdisplay: inline-blockないしflexを使った方法をマスターしたほうが良いと思います。

基本を理解したうえで疑似要素やfloatを使った方法にチャレンジしてみると良いでしょう。