Dash⑫(複数コンポーネントの配置/スタイルシートをカスタマイズ)

スタイルシートをカスタマイズ

今回は、Dashの公式ドキュメントで用いられるスタイルシート引数 styleを併用して、複数のDivコンポーネントを配置します。

要素の横並びのcssはスタイルシートのクラス名引数 classNameに設定します。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import dash
import dash_html_components as html

ex_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
# ファイル名をアプリ名として起動。その際に外部CSSを指定する。
app = dash.Dash(__name__, external_stylesheets=ex_stylesheets)

# 1段目用のcss辞書
style1 = {'height':'200px', 'margin':'2%', 'backgroundColor':'green'}

# 2段目用のcss辞書
style2 = {'height':'200px', 'backgroundColor':'skyblue'}

app.layout = html.Div(
[
html.H1('5つの長方形を並べたアプリケーション'),
# 1段目の2つの長方形
html.Div(
[
html.Div(style=style1, className='five columns'),
html.Div(style=style1, className='five columns')
]
),
html.Div(
[
html.Div(style=style2, className='four columns'),
html.Div(style=style2, className='four columns'),
html.Div(style=style2, className='four columns')
]
)
]
)

if __name__ == '__main__':
# `debug=True`でhot-reloadingモードを有効にし、コード上の変更を画面に反映する。
app.run_server(debug=True)

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

[ブラウザで表示]

スタイルシート引数 styleを併用して、複数のDivコンポーネントを配置することができました。