【webデザイン css】flexboxでホワイトフレーム&レスポンシブ
ミニマル・デザインとスプリット・スクリーンの要素を併せ持つWebデザインとしてホワイトフレーミング・レイアウトがあります。
ミニマリズムをコンセプトに、よりシンプルにデザインを追求した表現方法として上下左右の四方向のエッジにホワイトスペース（配色も白）を設けることでまるで白い額縁で飾っているフォトグラフィのようなwebデザインをホワイトフレーミングと呼びます。
単に白の余白でコンテンツを表現してあるサイトもあればその余白の部分にタイトルやメニューを配置したりサイドバー的な使い方をしているサイトもあります。
通常のレイアウトだとタイトルやメニューが煩く見えますがホワイトフレーミングだとミニマルな部分は損なわれず、きっちり収まってすっきり見えます。
特にコンテンツの部分がごちゃごちゃしている程ホワイトフレームとコントラストが強まり何故かシンプルに見えてしまいます。
ミニマルデザインがお好きな方はホワイトフレーミングも追求されてはどうでしょうか。
See the Pen
White framing by tatsuya☆ラボラトリ【 tatsuya-lab.com 】 (@labtatsuya)
on CodePen.
ホワイトフレームのためのHTMLの構成
まずはHTMLの構造ですが上層に<article>、中央に<main>、下層に<footer>を使い三層に構築します。
<article>の中に<header>と<nav>を入れタイトルとメニューを構成します。
<main>の中にコンテンツを入れフルスクリーンにして画面は固定させますが縦方向にスクロールさせます。
<footer>は下に固定で<article>と<footer>で上下のホワイトフレーム、<article>、<main>、<footer>それぞれで左右のホワイトフレームを作っていきます。
そしてメディアクエリを使ってデバイス・サイズ毎でレスポンシブさせていきます。
<article>で使うflexboxのorder
スマホサイズではタイトルが最初に表示され、その下にメニューが２行で表示するようにします。
article{
background-color: white;
padding: 10px 70px;
/*flex*/
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
}タブレットサイズではタイトルが最初に表示され、メニューが１行で表示されるようにします。
article{
/*flex*/
flex-wrap: wrap;
justify-content: center;
flex-direction:row;
}PCサイズですがタイトルとメニューを横一線で表示させます。
その時にタイトルは中央で表示させ、メニューは両サイドで表示させるようにしました。
<article>の中のタイトルはPCサイズではflexboxのorderを使って順番を変則的に変えていきます。
article{
flex-wrap: nowrap;
}
header{
order: 2;
padding: 0;
}
.left{
/*flex*/
order: 1;
}
.right{
/*flex*/
order: 3;
}flexboxを使うとこれが簡単に出来ます。
<header>と<nav>が格納された<article>にdisplay: flex;を設定します。
flex-direction: column;を設定することで基本縦に並ぶようにしておきます。
タブレットサイズ以上になるとflex-direction:row;を設定しメニューを横並びにします。
PCサイズ以上になるとflex-wrap: nowrap;を設定しタイトル、メニューとも横一線にします。
<main>のコンテンツはoverflow-yを使う
<main>のコンテンツですが上から数えて二番目の<div>にメインコンテンツを格納し、width: 100%; height: 100%;でフルスクリーンで表示させてオーバーフローする部分はoverflow-y: scroll;で縦方向でスクロールさせます。
main > div:nth-of-type(2){
width: 100%;
height: 100%;
overflow-y: scroll;
}スマホサイズ
タブレットサイズ
PCサイズ
