Dash の高度な CSS

Dash と Plotly で作るダッシュボード

Alex Scriven

Data Scientist

オブジェクト間の間隔を決める CSS

「ボックスモデル」は各 HTML 要素を層を持つ箱として扱います:

オブジェクトの内容（height と width）
パディング（内容の外側）
ボーダー（パディングとマージンの間）
マージン（ボーダーの外側、要素間の間隔）

四重の長方形。中心から順に content、padding、border、margin と表示。

ボーダーを追加する

border CSS 引数は3要素を取ります:

'border':'A B C'
- A = 太さ（px）
- B = スタイル（例: solid, dotted）
- C = 色（例: red）

アプリにボーダーを追加

dcc.Graph(figure=ecom_bar, 
 style={'width':'500px', 
        'height':'450px',
        'border':'5px dotted red'}
         )

タイトル「Top Sales Categories」。赤い点線の枠内に、y軸に小さな購入カテゴリ、x軸に総注文数の横棒グラフ。枠外の下に上位2カテゴリのリスト。

CSS の余白指定

HTML 要素の余白を設定するには:

各プロパティ（Padding・Margin）に4値を指定
- 時計回りに上, 右, 下, 左
代替: 1値（全辺に適用）
代替: 2値（上下と左右）

例: 'padding':'10px 5px 5px 15px'

ボックスモデルの図。padding の各辺に数値。上から時計回りに 10, 5, 5, 10。

Dash でのパディング追加

パディングなし:

先ほどと同じ境界線の概念を示す画像。タイトル「Top Sales Categories」の下、赤い点線の枠内に、y軸に小さな購入カテゴリ、x軸に総注文数の横棒グラフ。枠外の下には上位2カテゴリのリスト。

'padding':'100px' を追加:

左の画像と同様だが、枠が四方に押し広げられ、押し出しを示す矢印がある。グラフとタイトルの周りに余白が増え、枠内外の要素が離れている。

Dash でのマージン追加

マージンなし:

margin: 100px auto を追加:

前スライド右側と似ているが、余白は枠の外側。タイトルと下のテキストは外へ押し出されるが、枠とグラフの間隔は同じ。

auto マージンで中央寄せ

'margin':'100px' の場合

同じ概念図だが引きで、中央のグラフが左寄せ。タイトルの下やテキストの上に位置していない。タイトル「Top Sales Categories」、赤い点線の枠内に横棒グラフ、枠外下に上位2カテゴリのリスト。

'margin':'100px auto' の場合

同じ概念図。グラフが中央揃えで、タイトルの下・テキストの上に配置。タイトル「Top Sales Categories」、赤い点線の枠内に横棒グラフ、枠外下に上位2カテゴリのリスト。

レイアウト用の CSS

要素が揃わない場合: HTML 要素は「inline」または「block」です。

Inline は同じ行に並ぶ
- 高さ・幅（ボックス）を持たない
- 例: <strong>, <a>, <img>
Block は改行され積み重なる
- 横に並べられない
- 例: <h1>, <div>
inline-block もある
- 高さ・幅・ボックスを設定可能
- 横に並べられる

inline-block 要素

<div style='width:50px;height:50px;
     background-color:blue'></div>
<div style='width:50px;height:50px;
     background-color:red
     ;display:inline-block'></div>
<div style='width:50px;height:50px;
     background-color:green;
     display:inline-block'></div>

L字型に配置された3つの小さな色付きボックス。青が赤の上、赤の右に緑。

Passons à la pratique !

Dash と Plotly で作るダッシュボード