TL; TD;
css3にはflexboxというdisplayプロパティがありそれを使うとflotを使うより楽にヘッダー、フッター、サイドバーが作れるので紹介がてらパターンを紹介する。
テンプレート1
See the Pen Flexbox1 by Kentaro (@ForlHeadeOfficer) on CodePen.
サイドバーがヘッダーフッターの横バージョン
背景色は確認のために入れてある。
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Flexboxによるデザイン</title>
<meta name="description" content="Flexboxを使ったHeader Footer SideBarデザイン">
<link rel="stylesheet" href="style.css">
</head>
<body>
<aside class="left-side-bar">
<h2>右サイドバー</h2>
</aside>
<div class="flex-column">
<header>
<h1>Flexboxを使ったレイアウト例1</h1>
</header>
<main>
<article>
<h2>記事1</h2>
<p>
何か記事
</p>
</article>
<article>
<h2>記事2</h2>
<p>
何か記事
</p>
</article>
</main>
<footer>
<h2>footer</h2>
</footer>
</div>
<aside class="right-side-bar">
<h2>左サイドバー</h2>
</aside>
</body>
</html>
heade,main,footerをdiv要素でラップして左サイドバーとラップしたdiv、右サイドバーを横並びで表示させる。
CSS
/* リセット 無いとデザインが崩れる */
*{
pading: 0;
margin: 0;
}
/* left-side-bar div right-side-bar */
body{
height: 100vh;
width: 100vw;
display: flex;
}
.left-side-bar{
width: 20%;
background: lightsalmon;
}
.right-side-bar{
width: 20%;
background: lightcoral;
}
/* header */
/* main */
/* footer */
.flex-column{
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
main{
background: gainsboro;
flex-grow: 1;
}
header{
height: 10%;
background: powderblue;
}
footer{
height: 10%;
background: aquamarine;
}
Flexboxは親要素のdisplayにflexを設定することで使う。デフォルトでrow(横方向)で方向を変える時はflex-derectionにcolumn(縦方向)を設定する。子要素の位置は自動的に計算されるがflexプロティを使うことにより自動的に伸縮させることができる。
縦方向には自動で伸びないのでmain要素にはflex-grow: 1で自動的に空白を埋めるように伸びるように設定してある。
テンプレート2
See the Pen Flexbox2 by Kentaro (@ForlHeadeOfficer) on CodePen.
ヘッダーフッターが外側のバージョン
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Flexboxによるデザイン</title>
<meta name="description" content="Flexboxを使ったHeader Footer SideBarデザイン">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Flexboxを使ったレイアウト例1</h1>
</header>
<div class="flex-row">
<aside class="left-side-bar">
<h2>右サイドバー</h2>
</aside>
<main>
<article>
<h2>記事1</h2>
<p>
何か記事
</p>
</article>
<article>
<h2>記事2</h2>
<p>
何か記事
</p>
</article>
</main>
<aside class="right-side-bar">
<h2>左サイドバー</h2>
</aside>
</div>
<footer>
<h2>footer</h2>
</footer>
</body>
</html>
最初との違いはdivで右サイドバーとmain、左サイドバーをラップしてある。
CSS
/* リセット 無いとデザインが崩れる */
*{
pading: 0;
margin: 0;
}
/* left-side-bar div right-side-bar */
body{
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
}
header{
height: 10%;
background: powderblue;
}
footer{
height: 10%;
background: aquamarine;
}
body > div{
flex-grow: 1;
}
.flex-row{
display: flex;
flex-direction: row;
}
main{
background: gainsboro;
height:100%;
flex-grow: 1;
}
.left-side-bar{
width: 20%;
background: lightsalmon;
}
.right-side-bar{
width: 20%;
background: lightcoral;
}
こっちもほぼ同じであるがラップしてあるdiv要素にflex-direction: columnが引き継がれるのでflex-direction: rowできちんと設定してある。
最後に
display: flexとflex-direction: column/rowを設定するだけで自由にデザインでき親要素のサイズ変更にも追従できるようにできる。
その他にも細かい設定は可能である。