ホーム(記事一覧)へ

htmlやCSSで画像の横に文字を置く方法【6種紹介!】

  「文字ばかりだと堅苦しいし読みづらいから画像を横に並べたい!」
「文字の横の空白が寂しいから画像を並べたい!」

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

こんなときに使えるhtmlやCSSで画像の横に文字を置く方法を6つ紹介します。

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で画像の横に文字を置く方法でした。

関連記事