htmlやCSSで画像の横に文字を並べる方法６種【複数行OK】

私はホームページを作って9年になります。お客さんから画像とテキスト文字を横並びにしたいというリクエストをよく受けます。

こんなときに使えるhtmlやCSSで画像と文字テキストを横並びにする方法を6つ紹介します。複数行でもOKです。レスポンシブ対応できます。

6つも紹介するのは目的によって適切な方法は変わるからです。あなたの目的に最適な方法を使ってください。

横並びするときはパソコン版のことばかり考えがちですが、スマホで文章が読みやすいかしっかり確認しましょう。

この記事では実装例を合わせて掲載しています。

以下の例はブラウザの横幅を狭くすることでスマホ版での表示を確認することができます。確認してみてください。

画像と画像を横並びにする方法はこちら↓

【htmlだけ】table（表）を使う

実装例

htmlソース

<table>
    <tr>
        <td><img src="1.jpg" width="300"></td>
        <td>&nbsp;</td>
        <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
    </tr>
</table>

メリット

• CSS使わなくてもhtmlだけでできる

デメリット

• IEで画像が表からはみ出る（ことがある）
• 文字の量によっては画像が小さくなる（CSSを駆使すれば調整できる）

解説

tableで画像とテキストを横並びにするためCSSによる調整が不要です。

WordPressのサイトを納品したお客さんからでテキストと画像を横並べにしたいと要望があったときにはこの方法を紹介しています。

　

ただし、画像のサイズが隣の文字の量によって小さくなってしまいます。しかもブラウザによってサイズがまちまちです。

画像のサイズを整えたいときはオススメしません。

　

imgに「max-width:100%」を指定することで記事からはみ出さないようにしているのですが、IEではtdの中のimgにmax-widthが効きません。

どうしても効かせるときはwidthを指定しましょう。

【細かい調整可】display:flexを使う

実装例

html・CSSソース

<style>
.flex{
    display: flex;
    justify-content: space-between;
}
.flex>p{
    width: 49%;
}
</style>
<div class="flex">
    <p><img src="https://csshtml.work/wp-content/uploads/3.jpg"></p>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

メリット

• CSSで制御しイメージ通りのデザインにしやすい
• メディアクエリも使ってレスポンシブ対応もする

デメリット

• CSSをしっかり理解する必要あり
• 他のに比べると少しコードが多い

解説

CSSでしっかり横並べにするならオススメの方法です。

↓display:flexについて詳しくはこちら

それぞれwidthを指定しイメージ通りのデザインにしやすいです。

IEではやはりmax-widthが効かずはみ出ることがあるのでimgにもwidthを指定しましょう。

　

横並べのデメリットは横幅が狭いスマホの時文章が読みづらくなることです。そんなときは横並べを解除して縦並びにしましょう。

メディアクエリを使えば特定のブラウザ幅の時だけdisplay:flexを効かせ横並べにすることができます。

【回り込み】floatを使う

実装例

html・CSSソース

<style>
.float{
    float: left;
    margin-right: 20px;
}
</style>
<div><img src="2.jpg" width="300" class="float">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>

メリット

• 画像の下にまで文字を置ける

デメリット

• 文章が読みづらい
• clear:bothを指定しないと崩れる（ことがある）

解説

imgにfloatを指定すると文章が回り込みます。

ただしおススメしません。

途中で文章の幅が変わるため非常に読みづらいです。

また、横幅が狭いスマホになったとき、写真のサイズによっては1文字だけが縦に並んでいる、ということもおきます。

floatを使わずdisplay:flexの方法できっちり分けて並べることをオススメします。

【1行なら】vertical-align: middleを使う

テキストテキストテキストテキスト

<style>
.ichigyou img{
    vertical-align: middle;
    display: inline-block;
}
.ichigyou span{
    display: inline-block;
}
</style>
<p class="ichigyou">
    <img src="https://csshtml.work/wp-content/uploads/3.jpg" width="200">
    <span>テキストテキストテキストテキスト</span>
</p>

メリット

• シンプル

デメリット

• 改行されると横並びじゃなくなる

解説

画像も文字もインライン要素であるため黙っていても横並びします。

しかし、下ぞろえになってしまいます。真ん中揃えにしたいですよね？

「vertical-align: middle」をimgに指定することで真ん中寄せになります。

ただしこれを指定しても2行目は画像の下になってしまいます。

「display: inline-block」を指定することで文字ごと折り返すようにしています。

【アイコンに】backgroundを使う

<style>
.back{
    background: url(https://csshtml.work/wp-content/uploads/3.jpg) no-repeat 10px center / 50px auto;
    padding: 10px 10px 10px 70px;
    border: 1px solid #333;
}
</style>
<div class="back">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>

メリット

• imgを使わないでCSSだけで指定可能
• 細かい位置の調整が可能

デメリット

• 中央寄せは難しい（先頭寄せに向いている）

解説

これはアイコンなどの小さめの画像を先頭に置きたいときにおススメする方法です。

backgroundを使って背景として画像を置きます。

paddingを指定して画像と文字が被らないようにします。

↓backgroundの詳しい使い方はこちら

【アイコンごと中央寄せ】::beforeを使う

<style>
.before{
    padding: 10px;
    border: 1px solid #333;
    text-align: center;
}
.before::before{
    content: "";
    display: inline-block;
    background: url(https://csshtml.work/wp-content/uploads/3.jpg) no-repeat 0 0 / 50px auto;
    width: 50px;
    height: 34px;
    margin-right: 10px;
    vertical-align: middle;
}
</style>
<div class="before">テキストテキストテキストテキストテキストテキスト</div>

メリット

• imgを使わないでCSSだけで指定可能
• 文字の先頭に配置可能であるため中央寄せにできる

デメリット

• 大きい画像は不向き

解説

「vertical-align: middleを使う方法」と「backgroundを使う方法」を合体させた方法です。

「::before」を使います。これを疑似imgにします。

具体的にはbackground、display: inline-block、width、heightを指定します。

これによりCSSだけで画像をimgのように表示させることができます。

あとは「vertical-align: middle」を指定して上下中央寄せにします。

ただし、2行にするとバランスが悪くなるデメリットは健在です。

ですが、高さが文字と同じくらいのアイコンのような画像であればバランスの悪さも気にならなくなります。

【まとめ】htmlやCSSで画像の横に文字を置く方法

table（表）を使う

htmlだけで実装するなら

display:flexを使う

イメージ通りのデザインをするなら

floatを使う

文字を下まで回り込ませるなら

backgroundを使う

アイコンが枠に対して左寄せなら

vertical-align:middleを使う

テキストが1行なら

::beforeを使う

アイコンが文字の左に付くようにするなら

　

以上、htmlやCSSで画像の横に文字を置く方法でした。