さすがに、bootstrap4だけでは、限界があるわ。
cssを勉強しても使わないのですぐに忘れるので、記事に残しておく。
聖杯レイアウトのコーディング
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>しまぶーのIT大学(聖杯レイアウト)</title>
</head>
<body>
<header>header</header>
<div>
<nav>left</nav>
<main>center</main>
<aside>right</aside>
</div>
<footer>footer</footer>
</body>
</html>
bodyのマージンを0
body {
margin:0;
}
nav main aside を横並びに変更する
div {
display:flex;
}
centerタグに空いている幅を割り当てる。
center{
flex:1;
}
nav タグに固定の幅を設定する。
nav {
width:150px;
}
aside タグに固定の幅を設定する。
aside {
width:200px;
}
header と footer に高さを設定する
header {
height:150px;
}
footer {
height:200px;
}
bodyに高さを作成して、
nav main asideタグに余った高さを割り当てる。
body {
margin:0;
min-height:100vh;
display:flex;
flex-direction: column;
}
div{
display:flex;
flex:1;
}
bodyの幅を固定にして中央寄せ
/* margin:0; */
min-height:100vh;
display:flex;
flex-direction: column;
width:800px;
margin:0 auto;
レスポンシブ対応を追加する
@media screen and (max-width:900px){
}
bodyの固定幅を取り消す。
@media screen and (max-width:900px){
body{
width:100%;
}
}
nav main asideを縦方向に変更する。
@media screen and (max-width:900px){
div{
flex-direction: column;
}
}
nav asideの固定幅を取り消す。
@media screen and (max-width:900px){
nav aside{
width:100%;
}
}
mainタグを nav asideの前に置く
@media screen and (max-width:900px){
main{
order: -1;
}
}
レスポンシブ対応とか考えるとbootstrapの方がいいかな。
画面を区切ったりとか簡単だし。
↧