Dash⑪（複数コンポーネントの配置／外部css）

外部cssを使ったスタイル設定

今回は外部cssを使って、複数コンポーネントを配置します。

まずは、下記のようにcssを定義します。

Divコンポーネントのスタイルを設定するcss（①②）と、横並びにするcss（③）を定義しています。

[ソースコード]

assets/style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* ①みどり色の長方形 */
.green_square {
    width:40%;
    height:200px;
    background-color:green;
    margin:2%;
}

/* ②スカイブルーの長方形 */
.skyblue_square {
    width:27%;
    height:200px;
    background-color:skyblue;
    margin:2%;
}

/* ③要素を横並びにする */
.columns {
    float:left;
}

上記のcssファイルは、assetsフォルダの配下に格納しておきます。

次に、外部cssを参照するDashアプリケーションを作成します。

各コンポーネントのclassName属性に対応するcssのクラス名を渡し、各コンポーネントのスタイルを設定します。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import dash
import dash_html_components as html

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

app.layout = html.Div(
    [
        html.H1('５つの長方形を並べたアプリケーション'),
        # 1行目、2つの長方形
        html.Div(
            [html.Div(className='green_square columns'),
             html.Div(className='green_square columns')]
        ),
        # 1行目、2つの長方形
        html.Div(
            [html.Div(className='skyblue_square columns'), 
             html.Div(className='skyblue_square columns'), 
             html.Div(className='skyblue_square columns')]
        )
    ]
)

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

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

[ブラウザで表示]

外部cssを使って、複数のDivコンポーネントを配置することができました。