Dash のCSS基礎

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

Alex Scriven

Data Scientist

CSSとは

 

  • 「Cascading Style Sheets」の略
  • Webページ要素の見た目と配置を制御

$$

  • 次を制御可能:
    • テキスト（フォントサイズ、色、スタイル）
    • HTML要素の大きさ・形
    • オブジェクトの配置
Dash と Plotly で作るダッシュボード

Web上のCSS

ほとんどのサイトにはCSSファイルがあります

  • ページ読み込み時に読み込まれる
  • 本コースでは代わりに style プロパティを使用

Google のホームページのスクリーンショット。開発者ツールでスタイルシートへのリンクタグ（<link type="text/css" rel=Stylesheet href=" …）が確認できる。

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

HTML要素でのCSS指定

 

CSS はHTML要素にも直接指定できます

  • タグの style プロパティを使用
  • キーと値のペアで記述
    • 文は "property:value; property:value;"

 

第1章のレッスンで作成した、サイズと背景色が異なる複数のdivのHTMLスクリーンショット。style プロパティの使用例を示す。

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

CSSスタイリングの例

 

<h1>Welcome to the website!</h1>
<h2 style="font-size:50px;color:red">
      Enjoy your stay!
</h2>

 

黒いタイトル「Welcome to the website!」と、その下に赤く大きな文字で「Enjoy your stay!」と表示された画像

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

ライブCSSの編集

公開中のサイトでCSSを一部編集できます

  • 要素を右クリック > 「検証」 > CSS値を編集
  • 注意：ローカルのみ（再読み込みで消える）

Google のホームページでロゴを右クリックし、ドロップダウンから「検証」を選択。下部に開いた開発者ツールで画像の width を 100px に設定し、画像が即座に小さくなる様子のGIF

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

DashでのCSS

 

  • Dash コンポーネントの style 引数

    • CSS を辞書で受け取る

  • 以前の Dash コンポーネントのコード:

app.layout = [
  html.H1('Welcome to the website!'), 
  html.H2('Text',
  style={'font-size':'50px',
          'color':'red'})
]
Dash と Plotly で作るダッシュボード

色のCSS

 

CSS では次を設定できます:

  • オブジェクトの背景色（background-color）
  • 文字色（color）

 

どちらも文字列（例: 'red'）やRGBコード（例: 'rgb(0,0,255)' は青）を受け付けます

2列の表。左は色見本、右は対応するRGBコード。紫、緑、濃いピンク、濃い青のセルと、その隣に各RGBコード。

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

サイズのCSS

 

CSS は width と height でサイズを設定できます

app.layout = [
  # 会社ロゴを追加してサイズ変更
  html.Img(src=logo_link,
  style={'width':'250px', 'height':'250px'})
]
Dash と Plotly で作るダッシュボード

サイズを百分率で指定

 

app.layout = [
  # 会社ロゴを追加してサイズ変更
  html.Img(src=logo_link,
  style={'width':'50%', 'height':'50%'})
]
  • 親要素の50%
Dash と Plotly で作るダッシュボード

練習してみましょう！

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

Preparing Video For Download...