連続するリストを横並びに等分表示する...レスポンシブへの足がかり

2015/06/13

ステップ１

リスト構造は下のように単純なものである。これを短いCSSで均等に横並びカラムで表示することにする。

<div id="item-list">
  <ul class="cols-3">
    <li>商品01</li>
    <li>商品02</li>
    <li>商品03</li>
    <li>商品04</li>
    <li>商品05</li>
    <li>商品06</li>
  </ul>
</div>

リスト項目を１列から８列表示までできるようにするとき、何列で表示するかを class="cols-3" のようにクラス名で指定することにする。

/* 簡便に...すべての余白を0に、box-sizing を border-boxに*/
* {  
  margin:0;
  padding:0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

#item-list {
  background:#ccc;
  padding:20px 10px 0 10px;
  margin-bottom:20px;
}

#item-list ul{
  margin-left:-20px;/*１カラムのpadding分マイナスマージン*/
  overflow:hidden;
  background-color:transparent;
}

#item-list ul li {
  list-style-type:none;
  float:left; /*floatで横並びに*/
  padding-left:20px;/*カラム間のガター*/
  margin-bottom:20px;
  text-align:center;
}

ul.cols-1 li {width: 100%;}
ul.cols-2 li {width: 50%;}
ul.cols-3 li {width: 33.33333%;}
ul.cols-4 li {width: 25%;}
ul.cols-5 li {width: 20%;}
ul.cols-6 li {width: 16.66666%;}
ul.cols-7 li {width: 14.28571%;}
ul.cols-8 li {width: 12.5%;}

.inner{ /*カラムの内側*/
  margin:0;
  height:100%;
  background:white;
  overflow:hidden;
}

カラムの幅は単純にパーセントで指定する (^^ 計算きらい～

カラムの背景色やボーダーなどで装飾するためにカラムの内側いっぱいに子要素を作るが、HTMLにいちいち書くのは面倒なのでjQueryで作ることにする。（マークアップよくミスする orz)

また、行ごとにカラムの高さをそろえるために、jquery.matchHeight.js を使うことにする。

<script type = "text/javascript" src = "jquery-1.10.2.min.js"></script>
<script type = "text/javascript" src = "jquery.matchHeight.js"></script>
<script type = "text/javascript">
$(document).ready(function() {
  $("#item-list ul li").wrapInner("<div class='inner'></div>");
  $("#item-list ul li >.inner").matchHeight();
});
</script>

ステップ２～レスポンシブへの足がかり

下のCSSを加えることで、簡単に767px未満と479px未満で列数を減じてみた。

@media only screen and (max-width: 767px) {
  ul.cols-4 li,ul.cols-5 li,ul.cols-6 li,ul.cols-7 li,ul.cols-8 li{
    width: 33%;/*４列以上は３列に*/
  }
  ul.cols-3 li{
    width:50%;/*３列は２列に*/
  }
}

@media only screen and (max-width: 479px) {
  ul[class*='cols-'] > li{
    width: 100%;/*すべて１列に*/
  }
}

本当は列を減じるのにパーセントでなくクラス名を書き換えるようにしたいのだがどうしたらよいのか分からない。

参照サイト：
http://www.idia.jp/report/how-to-equally-display-the-horizontal-list/

jquery.matchHeight.js
http://brm.io/jquery-match-height/

発想は参照サイトからいただいた<(__* ただしかなり書き換えてIE8未対応の:nth-child()疑似要素も使わず、シンプルにしたつもり。列数をクラス名で指定することにしたら、モニターサイズに応じて列数を調節すればいいんじゃ？というわけで中途半端なレスポンシブCSSまで書いてみることになった（恥）。

別にリスト項目でなくても、div要素でも少しCSSを書き換えればよいと思うので、レスポンシブデザインへの足がかりにならないかと思い書いてみた。あと今一 view port というのが理解できてないので処置していない。

連続するリストを横並びに等分表示する...レスポンシブへの足がかり

ステップ１

ステップ２ ～ レスポンシブへの足がかり

ステップ２～レスポンシブへの足がかり