僕の考えたさいつよの2カラムデザイン【サイドバーCollapse可能】

Webの新しいGmailのデザインを参考にしてみました。

https://japan.googleblog.com/2018/04/gmail.html

.bodyをflexにし、navのwidthを固定値にmainのwidthを100%にすることで、navを閉じる(navのwidthを変える)と自動でmainの幅が調節される！

See the Pen 僕の考えたさいつよの2カラムデザイン by John Doe (@04) on CodePen.

まとめ

Google I/Oでもにかが PWA Starter Kit について語るらしいからみんな見てあげてね。

https://events.google.com/io/schedule/?section=may-9&sid=cf302209-4151-4c6b-8590-7243d2c6c3c3

追記1

mainのwidth: 100%はなくても大丈夫なようです。

See the Pen 僕の考えたさいつよの2カラムデザイン by John Doe (@04) on CodePen.