どうも7noteです。記事一覧などを作る時、カラムで表示する方法

ブログ一覧など複数カラムにする事がある時に使える方法を書いていきます。

共通html

index.html

<ul>
  <li>記事1</li>
  <li>記事2</li>
  <li>記事3</li>
  <li>記事4</li>
  ・・・
  <li>記事15</li>
</ul>

2,3,4カラムの作り方

style.css

/* 2,3,4カラムで共通 */
ul {
  width: 1000px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* ------2カラムの時------ */
li {
  width: calc((100% - 10px) / 2); /* calcを使い、縦横の隙間をおなじにできる */
  height: 150px;
  border: solid 1px #CACACA;
  margin: 0 0 10px;               /* widthの10pxとおなじに */
  list-style: none;
}

/* ------3カラムの時------ */
li {
  width: 32%;                     /* 縦横の隙間を気にしないなら%指定でもOK */
  height: 150px;
  border: solid 1px #CACACA;
  margin: 0 0 30px;
  list-style: none;
}
/* 最後の行を左寄せにするため */
ul::after {
  content: "";
  display: block;
  width: 32%;                     /* liと同じwidthを指定 */
  height: 0;                      /* 無くてもいいけどあった方が安心 */
}

/* ------4カラムの時------ */
li {
  width: 24.5%;                   /* 縦横の隙間を気にしないなら%指定でもOK */
  height: 150px;
  border: solid 1px #CACACA;
  margin: 0 0 30px;
  list-style: none;
}
/* 最後の行を左寄せにするため */
ul::before,
ul::after {
  content: "";
  display: block;
  width: 24.5%;                   /* liと同じwidthを指定 */
  height: 0;                      /* 無くてもいいけどあった方が安心 */
}
ul:before {
  order:1;                        /* 要素の最後尾に持ってくる */
}

5カラム以上

style.css

ul {
  width: 1000px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

li {
  width: 180px;
  height: 180px;
  border: solid 1px #CACACA;
  box-sizing: border-box;       /* border分の計算をしないで済む */
  margin: 0 25px 25px 0;
  list-style: none;
}

/* 5の倍数番目だけ右のmarginを消す */
li:nth-child(5n) {
  margin-right: 0;
}

※5カラムより多い時は、widthやmarginを調整してカラム数分の数字をnth-childに指定してください。