ホーム サンプルコード一覧 1. Image Grid

1. Image Grid

実現される機能

任意の要素を、様々な条件をつけて並べることができます

ダウンロード

※ダウンロードファイル内に、ソースコードとともに以下のデモが同梱されています。

デモ

基本デモ

基本的な機能の一覧です。

組み込みデモ1 - 商品画像を並べた例

このデモは、商品画像を並べたような状態をイメージした例です。
アイテムは中央寄せに並びます。

組み込みデモ2 - アイコン付ボタンを並べた例

このデモでは、ページ上部のMENUをクリックすると、ナビゲーションが開閉します。
Image Gridが使われているのは、このメニュー内です。
このデモでは、4つごとに1つのラインにしているため、改ブロックされています。
アイテムは中央寄せに並びます。

組み込みデモ3 - テキストボタンを並べた例

このデモは、media queryを併用したデモです。
このデモで使っているImage Gridは、左寄せで使用しています。
ただ、画面の幅により、一番外側のdivの幅を変化させているため、最後のアイテムが左に寄ります。
ブラウザウィンドウを変化させて動作を確認してみてください。
アイテムは中央寄せに並びます。

使用手順

1. CSSの読み込み

Image GridのCSSを読み込むか、内容をそのままコピーして使います。

2. HTMLの用意

Image Gridが用意したHTMLは以下です。

<div class="su-m-grid">
  <div class="su-m-grid__line"><!--
    --><div class="su-m-grid__item">内容</div><!--
    --><div class="su-m-grid__item">内容</div><!--
    --><div class="su-m-grid__item">内容</div><!--
    --><div class="su-m-grid__item">内容</div><!--
  --></div>
</div>

div.su-m-gridが全体を囲み、その中に任意の数のdiv.su-m-grid__lineが入ります。
div.su-m-grid__lineの中には、任意の数のdiv.su-m-grid__itemが入ります。
内容と書かれた部分に、中に入れたい要素を入れて使います。

なお、改行位置に入っているコメントアウトを外すと、改行とスペースのぶん、余白が空いてしまうので注意してください。

HTMLやCSSで使用しているクラス名は、そのまま使っても良いですし、適宜変更して使用しても構いません。

カスタマイズ方法

基本デモのそれぞれについて解説していきます。

1. su-m-grid 通常表示

単純に画像を配置したデモです。アイテム間には一定のマージン(5px)がとられ、中央寄せになります。

2. su-m-grid 通常表示(アイテム数多)

アイテムが並ぶと、行が自動的に別れます。

3. su-m-grid–align-left 左寄せ

su-m-grid--align-leftクラスを追加で指定すると、左寄せになります。

4. su-m-grid–align-right 右寄せ

su-m-grid--align-rightクラスを追加で指定すると、右寄せになります。

5. su-m-grid–nowrap 改ブロック禁止

su-m-grid--nowrapクラスを追加で指定すると、改ブロックしなくなります。

6. su-m-grid グループ化

このデモでは、2つのdiv.su-m-grid__lineを使用しています。具体的には、以下の様なコードになっています。

<div class="su-m-grid">
  <div class="su-m-grid__line"><!--
    --><div class="su-m-grid__item"><img src="imgs/1.png" width="30" height="30" alt=""></div><!--
    --><div class="su-m-grid__item"><img src="imgs/1.png" width="30" height="30" alt=""></div><!--
    --><div class="su-m-grid__item"><img src="imgs/1.png" width="30" height="30" alt=""></div><!--
    --><div class="su-m-grid__item"><img src="imgs/1.png" width="30" height="30" alt=""></div><!--
    --><div class="su-m-grid__item"><img src="imgs/1.png" width="30" height="30" alt=""></div><!--
    --><div class="su-m-grid__item"><img src="imgs/1.png" width="30" height="30" alt=""></div><!--
    --><div class="su-m-grid__item"><img src="imgs/1.png" width="30" height="30" alt=""></div><!--
    --><div class="su-m-grid__item"><img src="imgs/1.png" width="30" height="30" alt=""></div><!--
  --></div>
  <div class="su-m-grid__line"><!--
    --><div class="su-m-grid__item"><img src="imgs/1.png" width="30" height="30" alt=""></div><!--
    --><div class="su-m-grid__item"><img src="imgs/1.png" width="30" height="30" alt=""></div><!--
    --><div class="su-m-grid__item"><img src="imgs/1.png" width="30" height="30" alt=""></div><!--
    --><div class="su-m-grid__item"><img src="imgs/1.png" width="30" height="30" alt=""></div><!--
    --><div class="su-m-grid__item"><img src="imgs/1.png" width="30" height="30" alt=""></div><!--
    --><div class="su-m-grid__item"><img src="imgs/1.png" width="30" height="30" alt=""></div><!--
    --><div class="su-m-grid__item"><img src="imgs/1.png" width="30" height="30" alt=""></div><!--
    --><div class="su-m-grid__item"><img src="imgs/1.png" width="30" height="30" alt=""></div><!--
  --></div>
</div>

div.su-m-grid__lineで囲んだアイテム群は、その塊でひとつのブロックとなります。
改ブロック位置がそれぞれまとまっているのを、デモページにて、ブラウザウィンドウを操作し、確認して下さい。

7. su-m-grid 幅固定

幅を固定した例です。 以下のように、div.su-m-grid__linewidthを指定しています。

8. su-m-grid 最低幅指定

最小幅を指定した例です。 以下のように、div.su-m-Image Grid__linemin-widthを指定しています。

9. su-m-grid 最大幅指定

最大幅を固定した例です。 以下のように、div.su-m-grid__linemax-widthを指定しています。

余白を調整したい場合

Image GridのCSSにてコメントされている各値を調整してご使用ください。