画像を横並びかつ画面サイズに応じて並べる方法(プラグインなし、CSS Grid利用)

サイトを作っていて画像を横並びにしたいことはありましょう。単純な横並びであれば単純な手法で解決しますが、ちょっと高度なことをやろうとすると、別の手法を採用する必要があります。そんな方法をまとめました。

写真1. 横3列と横2列の切り替え

このページの概要(目次、タップできます)

1. 完成形の提示
2. CSSのCSS Gridという考えかた
3. 実際のコードの提示
1. 3.1. CSSの記述
2. 3.2. HTMLの記述
4. FlexBoxとの使い分け
5. 参考文献

完成形の提示

難しいことを言う前に、完成形を簡単に示します。

写真2. モバイルでは横2列に配列

写真3. パソコンでは横3列に配列

白黒の写真と文字は同じファイルです(wordで編集したもの)。この6枚の画像をモバイルでは横2列(写真2)、パソコンでは横3列に並べる(写真3)方法を述べるというものです。

この画像は弊サイトのトップページのものですので、いくらでも眺められますよ！

このような完成系に持っていくのに必要な考えかたを記しましょう。

CSSのCSS Gridという考えかた

以上のような画像の横並びはCSSにFlexboxという概念を導入すると簡単に実現できます。

復習のために、基本からおさらいしましょう。WordPressは以下の要素から成り立っています。

・HTML：文字情報や画像情報など、サイトの「中身」
・CSS：レイアウトを整える機能
・PHP：ページの動き(最新記事から順に表示する、タグごとに記事を表示する)の機能

各自でCSSとPHPをいじって1つのサイトを作り上げるのは難しいので、これら3つをパッケージして操作を容易にしたのがWordPressです。ここで私はわかったような文章を書いていますが、WordPressでCSSとPHPでどのような動きをしているのかはそこまで理解してません(WordPressのサイトを構築して2年で関係性を理解し始めたという理解の遅さです)。

ここで、画像を並べるのは、レイアウトを整えることですから、CSSが関係すると推定できます(そしてその推定は正しいです)。

CSSでは多くの装飾が可能です。やりようによっては、アニメーションも実現できます。アニメーションのような高度な表現はセンスが必要ですので、センスのない私が運営している弊サイトには導入しませんが、ここで述べたいのは、CSSではそこまで高度な表現が可能ということです。

さて、現在のCSSではページ全体のレイアウトを決めることも可能です。CSSのCSS Gridという概念で要素を二次元に配列することができます。Flexboxでは一次元にしか並べることができません。2列と3列の切り替えでは、横方向と縦方向の双方の制御が必要です。それがCSS Gridです。

実際のコードの提示

実際のコードを提示する前に重要なことを思い出しましょう！そう、レイアウトを整えるCSSと実際の要素(ここでは外国の写真)を記すHTMLは別ものであるということです。そのため、レイアウトをCSSで整えて、実際の要素をHTML(投稿ページや固定ページ)に記します。

画像を横並びにしたい箇所はごく一部です。そのため、一部のみに適用したいclassをCSSであらかじめ設定しておき、HTMLでそのclassを呼び出すということをします。言っている意味がわからない？こう言いかえましょう。CSSで「横並びにするためのおまじない」を書いておき、通常はそのおまじないは封印します。そして、投稿ページや固定ページの横並びにしたい箇所に「おまじないを封印する呪文」を書くということです。

CSSの記述

CSSで以下のように記述します(WordPressでは追加CSSに記せば問題ありません)。



.grid{
    display: -ms-grid;
      display: grid;
      -ms-grid-columns: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    grid-gap: 15px;
    }

@media screen and (max-width: 767px){
      .grid{
    display: -ms-grid;
      display: grid;
        -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      grid-gap: 10px;
}
}

図1. CSSのコード

前半部分がパソコン用、後半部分がモバイル用です(図1)。画面の横サイズの大きさで適用するCSSを変えています。前半部分のパソコン用について解説しましょう(図2)。



.grid{
    display: -ms-grid;
      display: grid;
      -ms-grid-columns: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    grid-gap: 15px;
    }

図2. パソコン用のCSSの記述部分

CSS GridはIEには対応しておらず、IE11以降についてもサポートする記述が必要です。そのため、必要な記述が増えています。なので、もう少し簡素化してみましょう(図3)。



.grid{
    display: -ms-grid;
　　display: grid;
    grid-template-columns: 1fr 1fr 1fr
    grid-gap: 15px;
    }

図3. CSSのIE以外の記述

簡単でしょ？最初の2行でCSS Gridを有効にしています。3行目で横3列を1:1:1に配列しています。数字の大きさが画像のサイズの比率であり、1frの数が1行あたりの画像の数です。ここでは、1frと数字が同じなので、画像のサイズは同じです。また、1frが3つ並んでいるので、画像が3つあります。

ここでのポイントは縦の記述がなくとも自動で配列してくれるということです。そして、gapで画像と画像の間隔を規定しています。

そして、IE11をサポートする記述を含めているのが、図2です。モバイル用の環境でも同様の考えです。



@media screen and (max-width: 767px){}

図4. モバイル用の記述

モバイル用を規定するために、画面の横幅の最大幅を767pxと規定し、そこに適用するオードを別途記しています。ここでは、画像の数を2つに減らし、画像と画像の間隔をパソコン用よりも小さくしています。

HTMLの記述

実際にこのようなレイアウトにしたい箇所(固定ページなり投稿ページ)の当該の部分に以下のコードを記入します(図5)。ここでは6つの要素としていますが、2や3で余りのある要素の数でも構いません。要素は写真のほか、文字などでも問題ありません。



<div class="grid">
<div>要素1</div>
<div>要素2</div>
<div>要素3</div>
<div>要素4</div>
<div>要素5</div>
<div>要素6</div>
</div>

図5. HTMLコード

これを実際に適用した場合は以下のように表示されます。

要素1

要素2

要素3

要素4

要素5

要素6

なお、ここで要素1～要素6にリンクタグを挿入すれば、リンクも貼ることができます。

FlexBoxとの使い分け

これとよく似た方法にFlexBoxがあります。FlexBoxとの使い分けは以下の原則で問題ないと思います。

・1行ごとにレイアウトが異なる場合：FlexBox

・行や列をまたくレイアウトがある場合：CSS Grid

参考文献

以下の書籍を頼りに弊サイトにこのようなレイアウトを導入いたしました。書籍で勉強すると「検索しようとしなかったが、重要である概念」を学ぶことができますので、有意義です。

初心者からちゃんとしたプロになる HTML+CSS標準入門

おのれいこ (著), 栗谷幸助 (著), 相原典佳 (著), 塩谷正樹 (著), 中川隼人 (著)