パソコン表示では左寄せの画像を、スマホ表示では中央寄せにしたい時に考えたいくつかの方法

2021年2月1日

はじめに

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

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

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

仕上がりイメージ

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

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

制作の方法

個人的には4が好きです。

  • float:leftとtext-align:centerを使う方法 1
  • float:leftとtext-align:centerを使う方法 2
  • float:leftとdiesplay:blockを使う方法 1
  • float:leftとdiesplay:blockを使う方法 2

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

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

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

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

HTML

  • divで全体を囲む

CSS(ベース)

  • 画像を左に回り込ませる

CSS(レスポンシブ)

  • float:noneで回り込みを解除する
  • divを中央寄せにする(画像含め全体が中央に揃う)
  • テキストも中央に揃うので、テキストのみ左寄せにする

html

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

CSS(ベース)

.box {
}
.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全体を中央寄せにしているため、pをわざわざ左寄せで指定する必要がある点です。

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

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

float:leftとdivを使う方法 2

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

HTML

  • divで画像のみ囲む

CSS(ベース)

  • divに中央寄せを設定する

CSS(レスポンシブ)

  • float:noneで回り込みを解除する

html

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

CSS(ベース)

.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%);で画像自身の幅の半分だけ左に戻します。

CSS(ベース)

  • float:leftで画像を回り込ませる

CSS(レスポンシブ)

  • display:blockを設定する
  • left: 50%;で、画像を右へ移動させる
  • transform: translateX(-50%);で、画像の位置を調整する

html

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

CSS(ベース)

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

CSS(レスポンシブ)

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

できあがったもの

画像

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

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

この方法だと、floatを解除しなくても良いみたいです(個人的には解除しないとしっくり来ないですが)。

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

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

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

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

CSS(ベース)

  • float:leftで画像を回り込ませる

CSS(レスポンシブ)

  • display:blockを設定する
  • floatを解除する
  • margin-leftmargin-rightともにautoに設定する

html

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

CSS(ベース)

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

CSS(レスポンシブ)

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

できあがったもの

画像

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