JavaScriptに関するお知らせ

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

【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;
  }
}

さいごに

これだけ書いておいてなんだけどやっぱPCも1カラムでいいと思う。

新しく作った会社のサイトはそうした。以上。じゃあな



PREV
2020-05-08
【JS】Vueと比較してReactが使いやすく感じる個人的理由(2020)

NEXT
2020-05-12
【CSS】tailwind.cssの色の指定方法を抑えよう