Electron アプリのレイアウトにはフレックスボックスなど新しいスタイルを使用する

更新: 2020-07-14 / 作成: 2020-07-14

Electron アプリのレンダリングには、最新の Chromium を使用できるため、比較的新しい CSS 機能を安心して使用することができます。 Web ブラウザで動作するわけではないので、ベンダープレフィックスなどのケアをする必要もありません。

例えば、次の例では、サイドバーと領域の広がる本文部分に別れるレイアウトを、CSS のフレックスボックス (Flexbox) で実現しています（ここでは React を使用しています）。

app.tsx

import * as React from 'react';

const styles: {[key: string]: React.CSSProperties} = {
  container: {
    display: 'flex',
    minHeight: '100vh',
  },
  sidebar: {
    background: 'lightgray',
    width: '150px',
  },
  body: {
    background: '#ddd',
    flex: 1,
  }
};

export class App extends React.Component {
  public render(): React.ReactNode {
    return (
      <div style={styles.container}>
        <div style={styles.sidebar}>Sidebar</div>
        <div style={styles.body}>Body</div>
      </div>
    );
  }
}

フレックスボックスはとても柔軟で、画面上端で左右に広がるメニューなど、いろいろな用途に使用することができます。

CSS Electron

Electron コラム
へ戻る

関連記事