横並びの画像をCSSで簡単にレスポンシブ表示する方法
画像を何枚か並べてちょっとしたギャラリー風にしてみたのはいいけれど、スマホから見たらレイアウトがあぁ…という経験は誰もが一度は通る道ではないでしょうか。そこで当エントリーでは画像を複数枚並べた時に巧くレスポンシブ表示出来るCSSのサンプルを紹介したいと思います。
初心者向けCSSカスタマイズ 横並び画像を簡単にレスポンシブ化する方法
Flexboxを調子に乗って使いまくってたらChromeで思いっきりはみだしていた件
2018/02/26 画像にリンクが付いている場合の対応を追記しました
画像を横並びにする事自体は難しくない
実は画像を横並びにするだけなら特に難しい話でも何でもなく、画像と画像のタグの間に改行を入れなければいいだけだったりします。
<img src="https://~" alt=""><img src="https://~" alt="">
もちろん画像は表示するカラム幅に収まる範囲のサイズにしておかないと、自動的に改行されてしまいますけどね?
並んだ画像がピッタリくっついてしまうのが嫌だったら、あまりスマートな方法とは言えませんが、間に半角か全角のスペースを挟むだけでもとりあえずそれっぽくは出来ます。
<img src="https://~" alt=""> <img src="https://~" alt="">
ただし、PC・タブレット・スマホのどのデバイスから見ても同じようにしたいと思うと話は別なんですよね…これが。
横並びの画像をレスポンシブ表示
それでは横に並べた複数枚の画像をレスポンシブ表示する為に、必要なHTMLタグとCSSのサンプルを紹介していきたいと思います…が、その前に私の黒歴史的な失敗談から。
以前やらかした失敗と修正
FirefoxではFlexbox(字面が似てるので紛らわしいですが…)の要素にwidthが指定されてなくても、カラム内に収まるよう表示してくれちゃうという良いんだか悪いんだかわからない仕様?のおかげで、てっきりうまくいってるもんだと思ったらGoogle Chromeでは見事にはみだしチャンピオン(死語)していたというものです…
また、画像間の間隔を空ける為に画像の右側にマージンを設定して、最後だけマージンを0にするという何だか面倒くさい事をやっていたので、それも無しの方向で修正しました。
ここで某赤い人の台詞を借りるなら「認めたくないものだな…(以下略)」てなところですが、当エントリーではその辺りも含めてしっかり改善したつもりですんで、ぜひともお役に立てていただけると幸いです。
HTMLタグの設定
基本的には並べて表示したい画像をdivタグで括って、クラスセレクタを設定しておくだけです。ここではimg-flexというクラス名にしておきましょうか。
しかし画像に対するwidthを指定しなければならない以上、並べる画像の枚数が変われば必然的にwidthの値も変わってくるので、画像の枚数を接尾語としてクラス名にバリエーションをつけて対応する事にします。
という事でクラス名はimg-flex-画像の枚数(2~4)としてみました。
<div class="img-flex-2">
<img src="https://~" alt="">
<img src="https://~" alt="">
</div>
<div class="img-flex-3">
<img src="https://~" alt="">
<img src="https://~" alt="">
<img src="https://~" alt="">
</div>
<div class="img-flex-4">
<img src="https://~" alt="">
<img src="https://~" alt="">
<img src="https://~" alt="">
<img src="https://~" alt="">
</div>
こんな感じでしょうか。
実際はCSSがまだなんですけどね?という事で次はCSSです。
CSSの設定
img-flex-で始まるクラス全てに適用する共通部分と、画像の枚数毎のクラスに対応する部分に分けて記述してみました。margin-bottomの部分は不要なら削除してもらって構いません。
[class^="img-flex-"] {
margin-bottom: 20px;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.img-flex-2 img { width: 49%; }
.img-flex-3 img { width: 32%; }
.img-flex-4 img { width: 24%; }
各widthの値は単純に100%を画像の枚数で割って1を引いただけのアバウトな数値なので、この辺りは好きなように調整していただければと思います。
画像を隙間なくぴっちり敷き詰めたい場合はこんな感じで。普通に%指定でもいいんですが、あえてcalcを使ってみましたよ?
[class^="img-flex-"] {
margin-bottom: 20px;
display: -webkit-flex;
display: flex;
}
.img-flex-2 img { width: calc( 100% / 2 ); }
.img-flex-3 img { width: calc( 100% / 3 ); }
.img-flex-4 img { width: calc( 100% / 4 ); }
自分で言うのも何ですが、うまくコンパクトにまとめられたんじゃないかな?と思っています。
画像にリンクが付いている場合の対応
リンク付きの画像という普通によくあるパターンにもかかわらず全く考慮してませんでした…なんという事でしょう。とりあえず無い知恵絞って対応方法を考えてみました。
HTMLタグがこんな感じの場合ですね。
<div class="img-flex-2">
<a href="https://~"><img src="https://~" alt=""></a>
<a href="https://~"><img src="https://~" alt=""></a>
</div>
こうしておけばリンクの有無を気にせずどちらもいけると思いますので、ぜひお試しを。
[class^="img-flex-"] {
margin-bottom: 20px;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.img-flex-2 > img,
.img-flex-2 a { width: 49%; }
.img-flex-3 > img,
.img-flex-3 a { width: 32%; }
.img-flex-4 > img,
.img-flex-4 a { width: 24%; }
ベンダープレフィックスについて
ベンダープレフィックスはもう面倒なので使いたくない…という方は、こちらを参照した上でOKだと思えば削除しちゃってもいいんじゃないだろうかと思います。
当エントリーで掲載しているコードにはまだベンダープレフィックスをつけてありますが、私が実際に使用しているCSSからは既に外してあるので、もし当エントリー内のサンプルにレイアウト崩れがあれば「やっぱりまだ必要なのねぇ…」という事になるでしょうか。
折り返しパターンはまた別の機会に
当エントリーでは画像を横一列に並べてレスポンシブ表示する方法だけで、折り返しがあるパターンには一切触れていません…これには理由があります。
横に並べる枚数が2枚の時は何も問題ありませんが、3枚並べる時に画像の総数が5枚または8枚、4枚並べる時に画像の総数が6枚か7枚のような場合に最後の行だけ画像が両端揃え、または均等揃えになってしまうので、その対策まで書いているとそれだけでエントリーが膨れ上がってしまうからなんですね。
また、なるべく簡単に実装出来る事に重点を置いたので応用が効かないと言いますか、例えば画像の高さがバラバラな場合にそれをキレイに揃えるといった事も出来ませんし、まだまだ改良の余地があると思っています。
というわけで更に応用を効かせた拡張編はこちらのエントリーでどうぞ。
ディスカッション
連投すみません。
前コメントにて「下記のような場合」と、ソースの例を入力したのですが反映されていないようなので、全角で例を示させていただきます。
<div class=”img-flex-2”>
<a href=”https://~><img src=”https://~” alt=””></a>
<a href=”https://~><img src=”https://~” alt=””></a>
</div>
以上でございます。
確かにHTMLタグをそのまま貼り付けると表示されないようですね。HTMLタグを普通のテキストとして記述したい場合はエンティティ変換するといいようです。
<div>
<a href=""><img src="" alt=""></a>
</div>
こんにちは。なんとかワードプレスで画像をレスポンシブ表示で複数並べたい・・・でも
むずかしいことはできない・・・とさまよい、こちらに辿り着きました。
すごく為になる分かりやすい解説ありがとうございます!
これなら私にもできそう!ということで、解説通り設定したら
リンク付きでない画像は無事に表示されました!
残念なことに、画像にリンクが付いている場合の対応をためしてみたところ、
画像がものすごーく小さくなってしまうのです。
https://mariaohsaki.com/archives/11747.html
(こちらで表示しています)
もし、原因がお分かりのようであれば、対策を教えていただけませんか?
コメントありがとうございます!
レスが遅くなり申し訳無いです。 orz
当方でも再確認してみたんですが、その「画像がものすごーく小さくなってしまう」という現象が私の環境では再現出来ないのでどうしたものかといったところです。貼っていただいたURLのページは私の確認が遅かったせいかCSSが適用されていない状態でしたし、何回か見ている内に404になってしまいました。
そんなわけで、その状態の現物を拝見出来れば何かわかるかもしれません。(もちろんわからない場合も…)可能性としてはテーマ(SANGOですね?)のCSSと何らかの形でバッティングしてたりしないだろうか、とかでしょうか。
引き続きこちらでも調べてみますが、何か追記などありましたらよろしくお願いします。
ちなみに、
.img-flex-4 img { width: 24%; height: 24%; }
のパーセンテージを上げるとリンク付きの画像も少しずつ大きくなっていくのですが
そうするとリンクなしの方が飛び出ていってしまいました。
なんとかして上手く表示させたい・・・!!
よろしければお知恵を拝借させてくださいm(__)m!!
%の数字を大きくすると確かにブラウザ(Chromeとか)によってはおっしゃる通りになるんですよね。リンクありの方はaタグの中に画像があるのでそうならないんだと思いますが、とりあえず24%というのは画像を4枚並べた事を想定しての数字ですから25%以上にすると100%を超えてしまうので当然はみ出してしまう事になります。
いくつかのテーマで試してみましたが、今のところどれもうまくいってるんですよねぇ…とりあえずもう少し検証してみます。
ありがとう。
私の場合、3枚の画像に文字列の折り返しがあるので完全なる解決にはなりませんが、文字列はch@osさんのコードの外に出てってもらって書き換えようと思います。
ch@osのコードで3枚の画像が見事にシュリンクした時は涙が出そうになりました。
本当に苦労したんです。インーネットは嘘つきとアホウで溢れかえってます。
アホのGoogleがこんなインターネットにしてしまいました。また余計な事を書いてしまいました。
ch@osさん、ありがとう。ほんとにほんとにありがとうございます。
熱いコメントありがとうございます!かなり更新頻度も下がってきた当サイトですが、とても励みになります。
私もGoogleさんには色々と思うところはありますが、数えきれないほどあるサイトの中に埋もれてしまわないよう頑張って良い記事を書いていけたらと思ってますので、ひとつ今後ともよろしくお願いいたします。
当エントリーよりもう少し色々な事が出来るよう改良した内容の記事をアップしましたので、よろしければまたお手すきの時にでも見ていただければと思います。
https://unlimitedchaos.net/uc/css-parallel-images-and-contents-responsive/
[…] https://unlimitedchaos.net/uc/css-parallel-image-responsive/ […]