【CSS】世にも簡単なレスポンシブの1カラム2カラムの書き方
こんにちは!最近レスポンシブ対応がめんどくてPCでもSPでも1カラムにするMizutani(@sirycity)です。
ですが今回はレスポンシブで2カラムとか1カラムとかにする方法についての記事です。
結論
冗談が過ぎました。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カラムでいいと思う。
新しく作った会社のサイトはそうしました。(追記: 今は違います)以上。
LINK
TAGS
LATESTS
POPULAR
- CSS2021/04/29【CSS】右寄せの方法は結局flexが一番良さそう
- React2020/07/13【JS】Reactのstyleの使い方、書き方いろいろ
- Payment2021/10/16GooglePayでVisaタッチを使う時に知っておきたい過酷な現実【追記あり】
- Others2021/07/11Slackに予約投稿機能ができて嬉しいけどそれでもまだ少し不満な理由【追記あり】
- CSS2020/04/30【CSS】tailwind.cssでよく使うデザインパターン
- CSS2019/03/30【CSS】100vhは「一画面」ではないという罠
- CSS2020/06/09【CSS】max-font-sizeやmin-font-sizeを使いたくなったら
- Vue2019/06/29【JS】Vueの:classの書き方3通り
- JavaScript2020/09/02【JS】yarnの長所とyarnからnpmに戻ってきた理由
- React2020/06/04【JS】ReactのclassNameの色々な書き方紹介