段組みのCSS。
フレキシブルボックスで2段組みレイアウト
displayプロパティの値flex
は、フレキシブルな要素の配置が得意なレイアウトモード。本来はコンポーネント単位で使用するプロパティですけれど、ここではページレイアウトに使用してみます。
フレキシブル(柔軟な)レイアウトは、レスポンシブ(反応性)デザインとも相性が良いのです:)。
ヘッダーとナビゲーション
フレキシブルボックスレイアウトでは、displayプロパティの値をflex
と指定した要素(コンテナ)の、直接の子要素(アイテム)が、フレキシブルにレイアウトできるようになる、というものでした。※詳しくは「よこ並びのCSS。」という記事を参照のこと。
ここでは、サイトタイトルとナビゲーションを2段組みにするため、その親要素のnav要素と、ナビゲーションボタンをよこ並びにするため、その親要素のul要素に、それぞれdisplay: flex
を指定します。
@media print, (min-width: 415px) {
.nav-list {
display: flex;
}
.nav-list li {
border-left: 1px solid #eee;
}
}
@media print, (min-width: 768px) {
header nav {
display: flex;
line-height: 80px;
}
.nav-list a {
padding: 0 2em;
}
}
すると、あっという間にすべてよこ並びになりましたね!あとは、サイトタイトルとナビゲーションを左右に寄せるだけですが、これも、フレキシブルボックスレイアウトでは、親要素への指定だけでレイアウトできちゃいます。justify-contentプロパティは、アイテムの並ばせ方を調整することができるプロパティ。ここでは、アイテムを端から端へ均等に並べるためのspace-between
という値を指定します。
@media print, (min-width: 768px) {
header nav {
display: flex;
justify-content: space-between;
line-height: 80px;
}
⋮
それから、767px以下の時のナビゲーションボタンの横幅は、widthプロパティでなく、flex-basisプロパティで指定することにします。すると、414px以下の時にフレキシブルな要素でないナビゲーションボタンにこの指定は影響しないので、414px以下のメディアクエリは不要になりますね;)!
ヘッダーできあがり!
@media screen and (max-width: 767px) {
.nav-list li {
flex-basis: 20%;
}
⋮
メインコンテンツとサイドメニュー
メインコンテンツとサイドメニューをよこ並びにするために、#contents要素にdisplay: flex
を指定。それぞれの横幅は、flex-basisプロパティで指定します。ここでは、フロートの時と同じように、メインコンテンツの横幅をcalc(75% - 20px)
、サイドメニューの横幅をcalc(25% -20px)
という風に指定することにします。
それから、ヘッダーの時と同じように、アイテムを両端に寄せて並べるために、justify-contentプロパティも指定します。
@media print, (min-width: 768px) {
#contents {
display: flex;
justify-content: space-between;
}
main {
flex-basis: calc(75% - 20px);
}
aside {
flex-basis: calc(25% - 20px);
}
}
ぜんぶよこ並びになっちゃいました!フレキシブルボックスレイアウトはデフォルトの状態では、複数行に折り返さないようになってるんです。親要素にflex-wrapプロパティでwrap
と指定することで、折り返しを解禁してあげます。メインビジュアルが横幅いっぱいの大きな画像なので、メインコンテンツとサイドメニューが改行して、レイアウトされるようになります。
@media print, (min-width: 768px) {
#contents {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
⋮
続いて、それぞれのセクションをレイアウトしてゆきます!
バナーと商品一覧と記事一覧
バナーのとこも前述と同じ要領で、フレキシブルボックスにして、justify-contentプロパティで両端に寄せて並べて、アイテムの横幅をflex-basisプロパティで指定、すればよいですねー。
main .bnr-list {
display: flex;
justify-content: space-between;
}
main .bnr-list li {
flex-basis: calc(50% - 8px);
}
商品一覧と記事一覧は、それぞれ、ul要素をフレキシブルボックスにして、アイテムの横幅を、隙間の分を差し引いたサイズに指定すればいっちょあがりです!フレキシブルボックスなら、justify-contentプロパティで、両端に揃えて均等に配置することができるので、パディングで隙間を空けてネガティブマージンで戻すなんてことしなくて良いんですね!
ただ、3つ以上よこ並びする時、今までと同じ隙間にするためには、ちょっと計算が必要です…。
商品一覧の隙間を、24pxずつ空けたい場合、アイテムの横幅はcalc(33.333333% - 24px)
じゃダメで、calc(33.333333% - 16px)
にしないといけません。隙間は全部で48px空くことになるので、これを3つのアイテムの横幅から均等に差引かなきゃいけないということなんですねー(下図参照)。
.menu-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.menu-list li {
flex-basis: calc(33.333333% - 16px);
}

お知らせ一覧
フレキシブルボックスレイアウトでもやっぱり、画像の回り込みは難しいのでパスして、お知らせ一覧をレイアウトします。
インライン・ブロックの時と同じく、日付と内容をみっちり幅で横に並べてレイアウトすることになります。
フレキシブルボックスなら、並べた要素(ここでは日付と内容)の高さを揃えることができるので、仕切りのボーダーは、dt/dd要素それぞれに指定することにします。
ただし、最後のdt/dd要素にはボーダーは引かないように、:not(:last-of-type)
という書き方でもってボーダーを指定します。
@media print, (min-width: 415px) {
.info-list {
display: flex;
flex-wrap: wrap;
}
⋮
.info-list :not(:last-of-type) {
border-bottom: 1px solid #dcdcdc;
}
}
フッターのサイトマップ
よこ並びにする要素の親要素の.sitemap-list
をフレキシブルボックスにして、justify-contentプロパティで両端に寄せて並べます。アイテムの横幅は、商品一覧の時と同じく、隙間の合計を均等に差し引いた分を指定します。アイテムは6つあるけれど、5列にするので、隙間の合計は16px * 4
で、アイテムの横幅は20% - 64px / 5
=20% - 12.8px
ってことになります。
@media print, (min-width: 768px) {
.sitemap-list {
display: flex;
justify-content: space-between;
}
.contentsinfo .group {
flex-basis: calc(20% - 12.8px);
}
.contentsinfo .group:nth-child(4) {
margin-left: -20%;
padding-top: calc(1.3rem * 1.4 + .9em);
}
}
ちょっと「店舗検索」と「お知らせ」の位置がズレちゃいましたね…。「お知らせ」のグループの左側に指定するネガティブマージンは、グループひとつ分にしなきゃいけません。
グループひとつ分の横幅は、20% - 12.8px
と思いきや、この横幅の要素が16pxの隙間を空けつつ、端から端まで均等に並んでるのだから、20% - 12.8px + 16px
ということになります。ネガティブマージンなので-(20% - 12.8px + 16px)
、つまり-20% + 12.8px - 16px
、すなわち-20% - 3.2px
を、左側のマージンに指定すれば良いってことですねー⁑|。
@media print, (min-width: 768px) {
⋮
.contentsinfo .group:nth-child(4) {
margin-left: calc(-20% - 3.2px);
padding-top: calc(1.3rem * 1.4 + .9em);
}
}

Comment & Pingback