Dash⑨（複数コンポーネントの配置／引数 style）

複数コンポーネントの配置

Dashで、複数のコンポーネントを配置するには、下記の３種類の方法があります。

  • Divコンポーネントの引数 styleを使う。
  • 外部cssを使う。
  • Divコンポーネントにコンポーネントを渡す。

Divコンポーネントの引数 styleを使った配置

今回は引数 styleを使った複数コンポーネントの配置を試していきます。

まずは、Divコンポーネントを確認しやすくするために、cssを用いて形や色を設定します。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import dash
import dash_html_components as html

app = dash.Dash(__name__)           # Dashインスタンスを生成

app.layout = html.Div(
    # スタイルを設定
    style = {
        'width':'400px',            # 横幅
        'height':'250px',           # 高さ
        'backgroundColor':'yellow', # 背景色
        'margin':'50px auto 50px'   # マージン領域を上下50pxにして、中央寄せ
    }
)

if __name__ == '__main__':
    app.run_server(debug=True)      # アプリケーションを起動

上記ソースを実行すると、コンソールにURLが表示されるのでブラウザで表示します。

[ブラウザで表示]

黄色の長方形（Divコンポーネント）がブラウザの中央に表示されました。

次回は、今回のように色付けしたDivコンポーネントを複数配置します。