Dash③（スタイル設定）

スタイル設定

Dashでは、コンポーネントの引数 styleに辞書型でcssを設定すると、スタイルを設定することができます。

キーがcssのプロパティをキャメルケースにしたもので、値がcssのプロパティ値となります。

（キャメルケースとは、２つ目以降の単語の１文字目を大文字にする命名規則です。
　例：background-color ⇒ backgroundColor）

下記のコードでは、文字色を赤色に変更し、横位置を中央に設定しています。（8行目）

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
import dash
import dash_html_components as html

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

# コンポーネントをlayout属性に設定
app.layout = html.H1('Hello Dash',
                     style={'color':'red', 'textAlign':'center'})   # スタイルを設定

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

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

[ブラウザで表示]

スタイルを設定して表示することができました。