パソコン表示では左寄せの画像を、スマホ表示では中央寄せにしたい時に考えた7パターン

はじめに

パソコン用のサイトをコーディングする際、画像を左寄せ(あるいは右寄せ)させたい時は、float:leftfloat:rightを使う事が多いと思います。

これをレスポンシブ対応させたい時、画像のサイズによってはテキストが微妙に右に残って見た目が悪いので、スマホ表示ではfloat:noneとして画像の回り込みをさせています。

そうすると左に寄った画像だけが残り、右にスペースができてバランスが悪いので、スマホ表示の時は画像を中央寄せにする方法はないか、と色々考えた結果、いくつか方法が思い浮かびました。

仕上がりイメージ

今回のコーディングはレスポンシブで表現しているので、パソコンでご覧の方はブラウザの機能(デベロッパーツール等)を使用するか、ウインドウの横幅を狭くして確認してみて下さい。

画像

祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。

目次

今回4パターンご紹介していますが、個人的には「4」が好きです。

float:leftとtext-align:centerを使う方法 1

まずはfloat:lefttext-align:centerを使った方法です。

私はいまだにたまにやってしまうのですが、imgに中央寄せtext-align:center;を設定してみるものの、中央寄せがされていないため焦ります。

中央寄せを反映させたい場合、親要素にtext-align:center;を設定する必要があります。今回のコーディングの概要は以下のとおりです。

  • PC表示ではfloat:leftで画像を左に回り込ませる
  • レスポンシブ表示ではfloat:noneで画像の回り込みを解除する
  • div class="box"を中央寄せにする(画像含め全体が中央に揃う)
  • テキストも中央に揃うので、p { text-align:left; }でテキストのみ左寄せにする

HTML

<div class="box">
 <img src="img/top/test.jpg" alt="">
 <p>祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。</p>
</div>

CSS(PC表示用)

.box img {
 float:left;
 margin-right: 20px;
}

CSS(レスポンシブ用)

.box {
 text-align:center;
}
.box img {
 float:none;
 margin-right: 0;
}
.box p {
 text-align:left;
}

できあがったもの

画像

祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。

この方法のデメリットは、divでbox内全体を中央寄せにしているため、pをわざわざ左寄せで指定する必要がある点です。

上記の例だと内容がシンプルなので問題無いですが、もっと複雑な場合で将来的にこのdiv内にコンテンツを追加したい場合に問題が発生します。

追加するタグに合わせてCSSに左寄せで指定しないと、デフォルトで中央寄せにされてしまい、更新性が悪いです。

float:leftとtext-align:centerを使う方法 2

上記は全体をdivで囲みましたが、今回は画像のみdivで囲んだ方法です。
今回のコーディングの概要は以下のとおりです。

  • divで画像のみ囲む
  • PC表示ではdivに中央寄せを設定する
  • レスポンシブ表示ではfloat:noneで回り込みを解除する

HTML

<div class="box">
 <img src="img/top/test.jpg" alt="">
</div>
<p>祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。</p>

CSS(PC表示用)

.box {
 float: left;
 text-align: center;
 margin-right: 20px;
}

CSS(レスポンシブ用)

.box {
 float:none;
 margin-right: 0;
}

できあがったもの

画像

祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。

ptext-align:leftで設定しなくて良い分、最初の方法より更新しやすい作りになっていると思います。

さらにシンプルにしたい場合は次の方法があります。

float:leftとdiesplay:blockを使う方法 1

htmlでdivを使わない方法になります。

left: 50%;で画像を右へ50%移動させる方法になりますが、このままだと画像の横幅ぶん右に寄るので、transform: translateX(-50%);で画像自身の幅の半分だけ左に戻します。

  • PC表示ではfloat:leftで画像を回り込ませる
  • レスポンシブ表示ではdisplay:blockを設定する
  • left: 50%;で、画像を右へ移動させる
  • transform: translateX(-50%);で、画像の位置を調整する

HTML

<img src="img/top/test.jpg" alt="">
<p>祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。</p>

CSS(PC表示用)

img {
 float:left;
 margin-right: 20px;
}

CSS(レスポンシブ用)

img {
 float:none;
 position: relative;
 left: 50%;
 transform: translateX(-50%);
}

できあがったもの

画像

祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。

divを使わない分、若干ですがhtmlの記述が減ります。

transformを使った画像の移動は、レイアウトが崩れてしまう時がありそうなので、diesplay:blockを使う場合は、個人的には次の方法を使うようにしています。

float:leftとdiesplay:blockを使う方法 2

上記同様にdisplay:blockを使った方法です。

htmlとベースのCSSはソースは上の物と同じです。レスポンシブ時に要素を中央寄せにする方法が異なり、display: block;に設定した上で、左右のmarginをautoに設定することで、画像を中央に配置させます。

  • PC表示ではfloat:leftで画像を回り込ませる
  • レスポンシブ表示ではimgdisplay:blockを設定する
  • margin-leftmargin-rightともにautoに設定する
  • float:noneで画像の回り込みを解除する

HTML

<img src="img/top/test.jpg" alt="">
<p>祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。</p>

CSS(PC表示用)

img {
 float:left;
 margin-right: 20px;
}

CSS(レスポンシブ用)

img {
 float:none;
 display: block;
 margin-left:auto;
 margin-right: auto;
}

できあがったもの

画像

祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。

flexboxを使う方法 1

1~4まではfloatを使った方法ですが、今回の方法はflexboxを使用します。

  • PC表示ではjustify-content: center;で画像とテキストを横並びにする
  • レスポンシブ表示ではflex-wrap: wrap;を設定し、テキストを折り返す事で横並びを解除する

HTML

<div class="box">
 <img src="img/top/test.jpg" alt="">
 <p>祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。</p>
</div>

CSS(PC表示用)

.box {
 display: flex;
 align-items: flex-start;
 justify-content: center;
}

CSS(レスポンシブ用)

.box {
 flex-wrap: wrap;
}

できあがったもの

画像

祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。

flex-wrap: wrap;を使用するため、画像サイズやテキストの長さが短い(横幅が小さい)と、レスポンシブ時でも折り返されずに横並びに表示されます。

個人的に気になるのは、PC表示時テキストは左寄せなのにjustify-content: center;で中央寄せにしている点で、それを解消したい場合は次の方法を使います。

flexboxを使う方法 2

上記と似た方法ですが、レスポンシブ時にflex-direction: column;を使う事で画像とテキストを縦並びにし、またimgを中央寄せにする事でPC表示時のflexboxjustify-content: flex-start;として設定する方法です。

  • PC表示ではjustify-content: flex-start;で画像とテキストを横並びにする
  • レスポンシブ表示ではflex-direction: column;で画像とテキストを縦並びにする
  • img { display:block; margin-left:auto; margin-right:auto; }を設定して、画像を中央寄せにする

HTML

<div class="box">
 <img src="img/top/test.jpg" alt="">
 <p>祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。</p>
</div>

CSS(PC表示用)

.box {
 display: flex;
 align-items: flex-start;
 justify-content: flex-start;
}

CSS(レスポンシブ用)

.box {
 flex-direction: column;
}
img {
 display: block;
 margin-left: auto;
 margin-right: auto;
}

できあがったもの

画像

祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。

個人的印象としてflex-direction: column;は、思わぬ所で左寄せになったり中央寄せになったりする感覚があるため、色々と方法を説明しましたが、なんだかんだで個人的には下記の方法による画像配置をよく使っています。

flexboxを使う方法 3

PC表示ではflexboxを使って横並びにしつつ、レスポンシブ表示ではdisplay:block;で横並びを解除する方法です。

  • PC表示ではjustify-content: flex-start;で画像とテキストを横並びにする
  • レスポンシブ表示ではdisplay: block;で画像とテキストの横並びを解除する
  • img { display:block; margin-left:auto; margin-right:auto; }を設定して、画像を中央寄せにする

HTML

<div class="box">
 <img src="img/top/test.jpg" alt="">
 <p>祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。</p>
</div>

CSS(PC表示用)

.box {
 display: flex;
 align-items: flex-start;
 justify-content: flex-start;
}

CSS(レスポンシブ用)

.box {
 display: block;
}
img {
 display: block;
 margin-left: auto;
 margin-right: auto;
}

できあがったもの

画像

祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。

flexboxを使うパターンでは、画像とテキストの間に余白ができないので、余白を作ろうとすれば、PC用のCSSにimg { display:block; margin-right:20px; }のような記述が必要になります。

また、flexboxを使用するため、ベンダープレフィックスが必要になります(上記ソースでは省略しています)。