Webでデスクトップアプリっぽい画面構造を構築するベスト(?)プラクティス

最近、仕事でWeb屋さんのまねごとをした(あるツールを作ったが、そのUIをWebアプリにする必要があった)。
デスクトップアプリのような画面を多数作る必要があったので、効率を求めていろいろな方法を試した中で、一番良かったと思う方法をまとめる。

デスクトップアプリっぽい画面構造とは？

以下のようなスタイルを持った画面構造。

Qiitaの投稿画面もそういう構造ですね。

FlexBoxを使う。

最近のブラウザであればほぼ対応。ベンダープレフィックスもつけなくていいくらい。

IEも11は対応。IE 10も(怪しいながら一応)FlexBox対応。

最終的に、こんな感じにした。

See the Pen DesktopAppLike by hogegex (@hogegex) on CodePen.

画面全体を覆うため、最上位要素にmatchParentクラスを指定する。
画面を縦に分割したい場合はstackVerticalクラス、横に分割したい場合はstackHorizontalクラスを指定し、ペインとなる子要素を追加する。
通常のペインは、内容によってサイズが決まる。サイズを固定もしくは制約したい場合は、対象要素に(max- / min-) width / heightを指定する。
stretchableクラスを指定すると、そのペインは、余白いっぱいに広がる。複数に指定した場合は、余白を等分に分け合う。
ペインの内容をスクロールさせたい場合は、verticalScrollableクラスを指定する。
ペインを再分割したい場合は、ペインの要素にstackVertical / stackHorizontalを指定する。

ブラウザによっては、ペイン内の一部の要素(textarea, selectなど)が妙に伸び縮みすることがあった。
これは、一部の要素にデフォルトでflex-shrinkが設定されているためだった。

以下のように明示的にキャンセルするか、リセットCSSを適用するとよさそう。

textarea, select {
    flex-shrink: 0;
}