アプリっぽい固定レイアウトを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を設定し、その中にブロックを配置していけば、どんどん入れ子にすることができます。

アプリっぽい固定レイアウトをhtml+PureCSSで

アプリっぽい固定レイアウトをPureCSSで