ElectronでネイティブアプリっぽいUIを実現するために必要なHTMLとCSS | ITハット

ElectronでネイティブアプリっぽいUIを実現するために必要なHTMLとCSS ElectronではUI設計はHTML/CSSを駆使して作ります。ネイティブアプリのようなレイアウトを実現することは意外と難しいです。少し苦労しましたが、汎用性のあるレイアウトのテンプレートができたので紹介したいと思います。 デモ よくあるアプリケーションの雛形ですね。ヘッダーとフッターがあって、その中央にはメインコンテンツがあります。メインコンテンツがあふれる場合はスクロールで表示させます。flexbox を使うのですが、ElectronはChromeベースなので心配ありません。 ちなみに、ヘッダー、フッター、メインコンテンツ部すべて可変です。高さが変わってもCSSで修正する必要のない設計になっています。 ソースコード