Webデザインにおいてもはや必須となっているレスポンシブ対応。
しかし、メディアクエリを駆使していちいちブレイクポイントを作ってCSSを指定するのは煩雑で、つい億劫になってしまうこともありませんか？
そこで今回は、メディアクエリに頼らず、より柔軟でスマートなレスポンシブデザインを実現する方法をご紹介します。
アイテムを横並びに配置するのに、よく使われがちなflexbox。
要素が横並びになったときにdisplay: flex;にして、スマホではdisplay: block;にして縦並びにするのが割と定番の方法かと思います。
ですが私はスマホでdisplay: block;せずにflex-direction: column;で縦並びにする方法をここで提唱しておきます。
なんなら、PCで横並びにならないエリアさえもflex-direction: column;でレイアウトしちゃいます。
なぜなら、できるだけflexboxを活用することで、要素のサイズや余白の設定などを容易にできるからです。
実際にPC画面で要素が3つ横に並び、スマホでは縦に並ぶよくありがちなレイアウトを、従来のCSS記法と新しいCSS記法で比較してみましょう。
.parent{
display: flex;
}
.child{
/* めんどくさポイント */
width: calc((100% / 3 ) - 16px);
justify-content: space-between;
}
@media (max-width: 767px){
.parent{
display: block;
}
/* めんどくさポイント */
.parent:not(:last-child){
padding-bottom: 16px;
}
.child{
width: 100%;
}
}
子要素のwidthをちゃっかり3等分にするために、calc(100% / 3 )とします。
さらに、子要素間に余白を空けるため、calc(100% / 3 )から余白分幅を引きます。
後々、情報が追加されて、要素が4つになってしまった場合、calc(100% / 4 )にしなければなりません。これはめんどくさいですね。
また、display: block;で縦並びにした場合、子要素間の行の余白がなくなってしまうので、.parent:not(:last-child)というめんどくさいセレクタ指定をして、子要素間の余白を設けなければなりません。
/* 新しい記法 */
.parent{
display: flex;
/* gapは要素間のすき間を自由に定義できます。 */
gap: 16px;
}
.child{
/* flex:1とすることで、子要素の幅は均等に分配されます。 */
flex: 1;
}
@media (max-width: 767px){
.parent{
flex-direction: column;
}
.child{
width: 100%;
}
}
このようにgapやflexプロパティを使うことで、先ほどのめんどくさいcss記述がなくなり、シンプルになりました。
また、最近はノーコードでのサイト制作がトレンドになっています。
ノーコードでWebデザインやプロトタイプが作れるツール代表格である『Figma』はまさにflexboxを大いに活用してレイアウトするツールです。
参考：
今後のノーコードとflexboxは切っても切り離せない関係になってくるでしょう。
今のうちに、flexboxに慣れていた方が良いかもしれません。