初心者向けCSSカスタマイズ 横並び画像を簡単にレスポンシブ化する方法

最近この「初心者向け」を見出しにつけたエントリーが増えてきましたが、正確には初心者向けと言うより全くの素人ではないものの初心者に毛が生えた程度の私がやってみたカスタマイズという意味合いの方が強いような気がしています。

今回のエントリーも例によってWordPressで使用する事を前提として書いていますが、WordPress以外のウェブサイトでも応用出来る内容になっていますので覚えておいて損は無いかと思います。

スポンサーリンク

横並びの画像をレスポンシブ対応に

実は画像を横並びにするだけなら特に難しい話でも何でもなく、画像と画像のタグの間に改行を入れないようすればいいだけだったりします。もちろん画像のサイズはカラム内に収まるサイズにしておく必要はありますが、画像が隣りとピッタリくっつくのが嫌ならcssをイジらなくても間に半角か全角のスペースを入れておくだけで出来ると言えば出来ます。

ただし、これはあくまでもカラム幅が固定の場合であって、PC・タブレット・スマホのどのデバイスから見た場合も同じようにしようと思うと話は別です。

基本的にWordPressのテーマはほとんどのものがレスポンシブ対応されていると思いますが、ウィジェットやエントリーに自分で記述した部分までは面倒を見てくれない場合があります。PCではバッチリいい感じになっていてもいざスマホでレイアウトを確認してみたら「やだ、なにこれ…」という事は稀によくあるので、そうならない為にも常にレスポンシブ対応を意識しておく必要があるかと思います。

今回の基本となるタグの設定

と言っても大層な事ではなく、基本的には並べて表示したい画像を<div>で括ってcssで指定するクラスセレクタを記述しておくだけです。とりあえずここでは"img-flex"という名前にしてみました。

今回のテストではWordPressテーマ「Twenty Seventeen」に付属していた画像を640pxのサイズで使用しています。

<h3>画像をレスポンシブで横並びに</h3>
<div class="img-flex">
  「メディアを追加」から画像を挿入
  「メディアを追加」から画像を挿入
</div>

ビジュアルエディタで見ると今はこんな感じで表示されてるかと思いますが

ビジュアルエディタでの見え方

この画面ではcssが適用されないだけで、実際にこのイメージのまま表示される事はありません。とは言ってもまだcssを設定してないので今見たら本当にこのまんまになりますが、それでは次にcssの設定にいきましょう。

まずは画像2枚の横並びから

それではまず画像が2枚の場合からいってみたいと思います。実際は2枚に限らず何枚でもいけちゃうんですけど。

.img-flex {
	display: -webkit-flex;
	display: flex;
}

え、それだけ?って感じですがこれだけでOKです。Safariを意識しなければ一行で済むんですけどね…ブツブツ。もうベンダープレフィックスとか本当に何とかして欲しいですね。

恐らくどのテーマでもstyle.cssで良いと思いますが、上の文をコピペして保存したら先ほど画像を貼り付けておいたエントリーなり固定ページをプレビューしてみましょう。

画像2枚の場合 その1

この画像のようになりましたかね?もしならなかったらキャッシュを削除してもう一度試してみて下さい。それでもダメな場合は、外観 > カスタマイズ > 追加cssで試してみるとうまくいくかもしれません。

それでもダメな場合は…おや、こんな時間に誰か来たようだ…

画像と画像の間にスペースを入れたい場合

あえてそうしたい場合はともかく、画像がくっついてるのが嫌な場合は画像のサイズを親要素の何%という指定にして、あとは両端揃えで均等に間隔を空けてくれるよう設定します。

この場合は画像が2枚なので1枚あたり50%という事になりますが、そのままだと隙間が全く無いのでスペースを作る為にそこから何%か削る事にします、ひとまず今回はこんな感じの数字でやってみましょう。

.img-flex {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

.img-flex img {
	width: 49.5%;
}

画像2枚の場合 その2

もっと隙間を広げたいという場合はwidthの%を小さくしてやればOKです。

ただし、画像が表示する幅に対して極端に小さい場合はこうなります。

画像2枚の場合 その3

画像のサイズ的にこうなってしまう場合は普通にマージンを設定した方が良さそうな感じですね。

画像を3枚以上にしてみる

次は画像を3枚に増やしてみたいと思います。cssは先ほどのままで画像だけ最初の手順でもう1枚追加して、ついでなのでその下に4枚の場合も作ってみました。

画像2枚の場合に3枚4枚を追加 その1

パッと見た感じキレイに収まってますが、画像が3枚と4枚の方は先ほど設定したwidthのサイズでは表示出来ないので数値が無視されて間が詰まってしまいました。

あと、中には各画像の段落の間がくっついたり空いてたりする場合があるかと思いますが、使用しているテーマによってはimgタグに対してcssで何らかの設定がされている場合がありますので、その場合は別途マージンを調整してやる必要があります。

とりあえず画像が何枚になってもいいように間隔を空けてやる事にします。結果がわかりやすいようにちょっとだけ大きめの数字を設定してみましょう。

.img-flex {
	display: -webkit-flex;
	display: flex;
}

.img-flex img {
	margin: 10px;
}

画像2枚の場合に3枚4枚を追加 その2

さすがにちょっと空けすぎたかなと思いますが、ここで確認したいのはこの設定だと上下左右にマージンを取ってしまうので左端の画像の左側と右端の画像の右側(こっちはわかりにくいですが)にもスペースを取ってしまうという点です。

この辺は特に気にならないという方は先ほど10pxと指定した箇所を適当な値に直すだけでOKですが、私としてはちょっと気になると言うか、出来ればカラム幅のギリギリまで利用して画像を大きく表示したいので、ここでは基本的に画像の右側のみマージンを取るようにして最後の画像だけはそれをしないという設定にしてみたいと思います。

.img-flex {
	display: -webkit-flex;
	display: flex;
}

.img-flex img {
	margin-right: 10px;
}

.img-flex img:last-child {
	margin-right: 0;
}

画像2枚の場合に3枚4枚を追加 その3

自己満足っぽいですが、なかなかいい感じになったのではないでしょうか。

マージンの単位はpxでも%でも好みに合わせて色々と試行錯誤してみて下さい。pxで設定すると数値によってはスマホで見た場合にPCと比べてやたら広く見えるので、%で調整した方がいいかな?とも思いますが、私もなかなかコレといった結論が出なくて日々悶々としているところではあります。

画像以外にも応用出来る方法です

他にはメニューを作ったりと画像以外にも色々と応用が効く方法ですが、今回はあくまでも初歩的な部分だけの紹介になりますので、もっと知りたいという方はcssのリファレンスサイト等で必要に応じて調べてみていただければと思います。

尚、今回紹介した方法は指定した要素の中に画像が何枚あろうとサイズを自動的に縮小して横一列にムリヤリ並べるというものなので、折り返して表示したい場合は以下のように記述する必要があります。

.img-flex {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

こちらの場合は画像サイズもきっちり考えて設定する必要がありますので、細かい設定が面倒な場合は私が今回したように折り返し無しの要素を何段か重ねる方が楽かなという気はしています。

それにしても昔はfloatで回り込ませて最後の要素でclearするくらいしか方法が無かったのに、今はこんなに簡単になっちゃったのねぇ…と思わずにはいられません。どこかで設定をミスって後ろのレイアウトが大崩れしたりそんな苦労は何だったんだろうと思うとちょっとしたカルチャーショックでした。

それでもこうした便利な機能が使いやすくなるのは大歓迎なので、もっと巧く活用出来るようこれからも精進していきたいと思います。

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

スポンサーリンク
トップへ戻る