横並び（HTML/CSS/JS）

前書き

HTMLコーディングに使える、横並びに関する小技を掲載しています。

目次

1. 横並びにする
2. 横並びの要素の、子要素の高さを揃える
3. 横並びの要素の、一部の幅を一定にする

横並びにする

共通のHTMLを用いて、cssの挙動を確認しています。

<ul>
  <li> <!-- 灰 -->
    <p>文章1...</p> <!-- 白 -->
    <p>文章2...</p> <!-- 白 -->
  </li>
  <!-- 中略 -->
</ul>

grid

ul {
  display: grid;
  /* 767px以下 2列 */
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 8px;
  /* 768px以上 3列 */
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 14px;
}
/* gapのrowは、%で指定した場合は、gridの高さを基準に算出される。*/

flexbox

flexbox その1

子要素を左に寄せる

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}
li {
  margin: 2% 0 0 2%;
  /* 767px以下 2列 */
    width: 49%;
    &:nth-of-type(-n+2) {
      margin-top: 0;
    }
    &:nth-of-type(2n+1) {
      margin-left: 0;
    }
  /* 768px以上 3列 */
    width: 32%;
    &:nth-of-type(-n+3) {
      margin-top: 0;
    }
    &:nth-of-type(3n+1) {
      margin-left: 0;
    }
}

flexbox その2

子要素を中央に寄せる

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}
li {
  margin: 2% 0 0 2%;
  /* 767px以下 2列 */
    width: 49%;
    &:nth-of-type(-n+2) {
      margin-top: 0;
    }
    &:nth-of-type(2n+1) {
      margin-left: 0;
    }
  /* 768px以上 3列 */
    width: 32%;
    &:nth-of-type(-n+3) {
      margin-top: 0;
    }
    &:nth-of-type(3n+1) {
      margin-left: 0;
    }
}

flexbox その3

子要素を両端に寄せる

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}
li {
  margin: 2% 0 0;
  /* 767px以下 2列 */
    width: 49%;
    &:nth-of-type(-n+2) {
      margin-top: 0;
    }
  /* 768px以上 3列 */
    width: 32%;
    &:nth-of-type(-n+3) {
      margin-top: 0;
    }
}

flexbox その他

ネガティブマージンを使って、マージンに関するコードの量を減らす
※場合によっては、ulタグの親要素にoverflow : hiddenを指定する必要がある

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  margin: -2% 0 0 -2%; /* 概数 */
}
li {
  margin: 2% 0 0 2%;
  /* 767px以下 2列 */
    width: calc(96%/2);
  /* 768px以上 3列 */
    width: calc(94%/3);
}

float

二行目以降は、何か工夫しないとずれることがある。

/* clearfix */
ul::after {
  content: "";
  display: block;
  clear: both;
}
li {
  float: left;
  /* 767px以下 2列 */
  width: 49%;
  &:nth-of-type(-n+2) {
    margin-top: 0;
  }
  &:nth-of-type(2n+1) {
    margin-left: 0;
  }
/* 768px以上 3列 */
  width: 32%;
  &:nth-of-type(-n+3) {
    margin-top: 0;
  }
  &:nth-of-type(3n+1) {
    margin-left: 0;
  }
}

inline-block

htmlソース上で、liタグの前後に改行があると、隙間が出来てずれる。
（下記では、5つ目のliタグの前で改行している）

li {
  display: inline-block;
  vertical-align: top;
  margin: 2% 0 0 2%;
  width: 49%;
  /* 767px以下 2列 */
    &:nth-of-type(-n+2) {
      margin-top: 0;
    }
    &:nth-of-type(2n+1) {
      margin-left: 0;
    }
  /* 768px以上 3列 */
    width: 32%;
    &:nth-of-type(-n+3) {
      margin-top: 0;
    }
    &:nth-of-type(3n+1) {
      margin-left: 0;
    }
}

横並びの要素の、子要素の高さを揃える

jQueryのプラグインを使用して、背景色が白の要素の高さを揃える。

matchHeight

flexbox

<!-- 高さを揃えたい要素に data-mh="〇〇" を指定する。 -->
<ul>
  <li>
    <p data-mh="text01">文章1...</p>
    <p data-mh="text02">文章2...</p>
  </li>
  <li>
    <p data-mh="text01">文章1...</p>
    <p data-mh="text02">文章2...</p>
  </li>
  <!-- 中略 -->
</ul>
<!-- jQueryを読み込んだ後 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-match-height@0.7.2/dist/jquery.matchHeight.min.js"></script>

横並びの要素の、一部の幅を一定にする

flexbox

<div class="wrap">
  <div class="constant">一定</div>
  <div class="variably">不定</div>
</div>

.wrap {
  display: flex;
  flex-wrap: nowrap;
}
.constant {
  flex-shrink: 0;
  margin: 0 10px 0 0;
}
.variably {
  flex-grow:1;
}

grid

<div class="wrap">
  <div class="constant">一定</div>
  <div class="variably">不定</div>
</div>

.wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 10px;
}

関連記事

中央寄せ（HTML/CSS）