2020-05-09

【CSS】世にも簡単なレスポンシブの1カラム2カラムの書き方

こんにちは！最近レスポンシブ対応がめんどくてPCでもSPでも1カラムにする Mizutani(@sirycity) です。

完

結論

冗談が過ぎました。PCだと2、SPだと1カラムにするケースはかなりあるんじゃないでしょうか？このブログもそうね。

なので早速結論から。こう書きましょう。まずはHTMLから。なるべくシンプルに書く。

<div class='container'>
  <div class='column'>
    こっちはPCだと左側に来るカラム
  </div>
  <div class='column'>
    こっちはPCだと右側に来るカラム
  </div>
</div>

次にCSS。

.container {
  display: flex;
  flex-wrap: wrap;
}
.column {
  width: 100%;
}

@media (min-width: 1024px) {
  .column {
    width: 50%;
  }
}

以上です。お疲れ様でした。

これだと1024px以上だと2カラムになります。

よく分かる解説

flexとflex-wrapがポイントです。

flex

flexはカラムが左から右に並んでいきます。これはPCでもSPでも一緒の挙動。

ただ、flexはカラムのサイズがいくつだろうとひたすら左から右に1列に並んでいきます。

カラムが5000兆個あっても改行されず、ぺしゃんこになって1列に並びます。

flex-wrap

flex-wrapはスペースいっぱいになったら折り返せやっていうプロパティです。以上。

flex-wrapとwidth:100%

flex-wrapの子要素にwidth:100%を指定するとどうなるでしょう？

widthは100%なので、常に横幅を埋め尽くします。つまり、常にスペースがなく改行必須の状態になるんですね！

改行されれば次の要素は前の要素の下に行きます。ということは、

flex-wrapの子要素が全てwidth:100%だと強制的に1カラムになるってわけだ。

子要素が3つあったら3カラムになりたいよね？でも全部横幅いっぱいにして改行させちゃう！ってことです。以上。

...これだけだと記事が寂しいので、いくつか応用パターンもどうぞ！

応用パターン一覧

1カラム3カラムのパターン

twitterとか1カラム3カラムだね。

<div class='container'>
  <div class='column'>
    PCだと左側に来るカラム
  </div>
  <div class='column'>
    PCだと中央に来るカラム
  </div>
  <div class='column'>
    PCだと右側に来るカラム
  </div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}
.column {
  width: 100%;
}

@media (min-width: 1024px) {
  .column {
    width: calc(100% / 3);
  }
}

2カラム3カラム

スマホで2カラムは見にくいのもそうなんだけど、左利きに優しくないよね。

<div class='container'>
  <div class='column'>
    PCだと左側、SPだと左側
  </div>
  <div class='column'>
    PCだと中央、SPだと右側
  </div>
  <div class='column'>
    PCだと右側、SPだと左側
  </div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}
.column {
  width: 50%;
}

@media (min-width: 1024px) {
  .column {
    width: calc(100% / 3);
  }
}

メディアクエリとか絶対使いたくない人向け

これでも1カラム2カラムになるよ。CSSにちょっと追加。

これだとギリギリ1024pxに満たないような時にちょっとレイアウトがいまいち。

<div class='container'>
  <div class='column'>
    PCだと左側
  </div>
  <div class='column'>
    PCだと右側
  </div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.column {
  width: 100%;
  max-width: calc(1024px / 2);
}

2カラムの間に隙間を入れたい

PC版で2カラムの時、間に16.18pxの隙間が欲しいなんてことありますよね(？)これをどうぞ。

これはまあ色々なやり方があります。

<div class='container'>
  <div class='column'>
    こっちはPCだと左側に来るカラム
  </div>
  <div class='column'>
    こっちはPCだと右側に来るカラム
  </div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.column {
  width: 100%;
}

@media (min-width: 1024px) {
  .column {
    width: calc(50% - 16.18px / 2);
  }
}

3カラムの間に隙間を入れたい

3カラムの間にやはり16.18pxの隙間が欲しい時はこう。

ちょっとHTMLめんどくさくなってきたので1行で書く。

<div class='container'>
  <div class='column'>左</div>
  <div class='column'>中</div>
  <div class='column'>右</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.column {
  width: 100%;
}

@media (min-width: 1024px) {
  .column {
    width: calc(100% / 3 - 16.18px / 3 * 2);
  }
}

ちなみにややこしいcalcの部分は

calc(100% / カラム数 - 隙間の大きさ / カラム数 * (カラム数 - 1))

ですわ。

左右で大きさを変えたい

じゃあ左が70%、右が**30%**の2カラムな。

<div class='container'>
  <div class='column--l'>左</div>
  <div class='column--r'>右</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}
.column--l,
.column--r {
  width: 100%;
}

@media (min-width: 1024px) {
  .column--l {
    width: 70%;
  }
  .column--r {
    width: 30%;
  }
}

右だけ大きさを固定にしたい

↑みたいに70% 30%にすると、画面サイズ小さくしていった時に両方とも縮んでいって不自然。

なので右側は161.8pxで固定にして左側だけ伸縮性のあるタイプにします。

このブログは実はこのパターンよ。

<div class='container'>
  <div class='column--l'>左</div>
  <div class='column--r'>右</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}
.column--l,
.column--r {
  width: 100%;
}

@media (min-width: 1024px) {
  .column--l {
    width: calc(100% - 161.8px);
  }
  .column--r {
    width: 161.8px;
  }
}