アプリっぽい固定レイアウトをPureCSSで
Webアプリを作る時欲しくなる、全体がウインドウサイズ内部に収まり、画面を複数のペインに分割し、その中でスクロールするようなレイアウトを、PureCSSで作るシンプルな方法です。javascriptは使いません。
ターゲットは、Chrome,Firefox,Safari,IE11,Edgeです。
このような画面を作ります。実働サンプルは こちら 。
まず、htmlは、素直にブロックを並べてこのように作ります。
baseが全体のベースでその中にhead,cont,footが縦に並び、contの中がleft,mid,rightと三つに分割されています。leftの中はさらに上下に2分割しています。
<body>
<div class=base>
<section class=head>
<div class=mdiv>
<h1>header</h1>
</div>
</section>
<section class=cont>
<section class=left>
<article class="left_up rollbase">
list1
<div class="roll">
<div>
scrolling content <br/>
中略
scrolling content <br/>
</div>
</div>
</article>
<article class="left_down rollbase">
list2
<div class="roll">
<div>
scrolling content <br/>
中略
scrolling content <br/>
</div>
</div>
</article>
</section>
<section class="mid">
<div>
mid content (auto size)<br/>
scrolling
</div>
<div class=rollbase>
<div class=roll>
<div>
scrolling content <br/>
中略
scrolling content <br/>
</div>
</div>
</div>
</section>
<section class=right>
right content<br/>
(fix width)
</section>
</section>
<section class=foot>
<div class=mdiv>
footer
</div>
</section>
</div>
</body>
スタイルは以下のようになります。
html,body {
width:100% ;
height:100% ;
margin:0 ;
overflow:hidden ;
}
div,section,article {
box-sizing: border-box ;
}
div.base {
width:100%;
height:100% ;
display:flex ;
flex-direction:column ;
}
section.head {
background-color: #eee ;
}
section.foot {
background-color: #eee ;
}
section.cont {
height:1rem ;
flex-grow:1 ;
display:flex ;
}
section.left {
width:20% ;
background-color:#fee ;
display:flex ;
flex-direction:column ;
}
section.mid {
display:flex ;
flex-direction:column ;
flex-grow:1 ;
padding:0.5rem ;
background-color:#fef ;
}
section.right {
width:10em ;
padding:0.5rem ;
border:5px solid black ;
background-color:#eef ;
}
article.left_up {
height:10rem ;
}
article.left_down {
flex-grow:1 ;
}
article.left_up .roll {
margin-top:1rem ;
}
article.left_down .roll {
margin-top:1rem ;
}
section.mid .rollbase {
flex-grow:1 ;
}
.rollbase {
position:relative ;
}
.roll {
overflow:scroll ;
-webkit-overflow-scrolling : touch ;
position:absolute ;
top:10px ;
left:5px ;
right:5px ;
bottom:5px ;
}
.roll div {
background-color:#efe ;
}
div.mdiv {
padding:0.5rem ;
border:1px dotted black;
}
ポイントは、上下/左右の分割は、flexで行い、サイズを固定するブロックにはwidthかheightを指定、それ以外はflex-growを指定して自動的に伸縮するようにします。
また、スクロールするブロックが入る場合は、内部に合わせてflexのブロックが拡大してしまわないように、外側のブロックのサイズに合わせたブロックで囲みます。これがrollbaseとrollの部分です。
ブロックをさらに分割する場合は、親にdisplay:flexとfrex-directionを設定し、その中にブロックを配置していけば、どんどん入れ子にすることができます。