サイトアイコン アマチュア無線局JS2IIU

【Streamlit】外部CSSでのスタイルカスタマイズ

JS2IIU
Streamlit、外部CSSでのスタイルカスタマイズ

こんにちは、JS2IIUです。
StreamlitのUIにCSSを適用する際に、独立した外部CSSファイルを読み込む方法をみていきます。この方法で、CSSの管理がしやすく、統一したCSSをページに適用することが容易になります。今回もよろしくお願いします。

1. イントロダクション

Streamlitの魅力は「コードを書けばすぐに動くUI」ですが、標準のデザインでは細かい見た目の調整が困難です。CSSを使えば、フォント・色・レイアウトなどの調整が可能になり、企業やプロジェクトのブランディングにも対応しやすくなります。

✅ 補足：HTMLとCSSはStreamlit内部で自動生成される
Streamlitはコンポーネントを自動的にHTMLとして生成しているため、通常のWeb開発のように<body>や<div>を自由に編集することはできません。そのため、HTML要素に対するクラス名を指定してスタイルを上書きするテクニックが重要になります。

2. Streamlitとは？

Streamlitは、データサイエンスのプロトタイピングやデモに最適なフレームワークです。データを視覚化するグラフやインタラクティブなウィジェットを、Pythonコードのみで素早く構築することができます。

Streamlitの特徴

利用シーン

✅ 補足：StreamlitのUIレンダリングはReactベース
内部的にはStreamlitはReactを使ってUIを構築しており、これがDOMの階層構造やクラス命名に影響を与えています。CSSを適用する際には、自動生成されるクラス名（例：<div class="st-bk">）をターゲットにする必要があることもあります。

3. CSSとは？

CSS（Cascading Style Sheets）は、HTMLで記述されたWebページの見た目を設定するための言語です。カラー、フォント、レイアウトなどをカスタマイズできます。

CSSの役割とカスタマイズの利点

CSSによるスタイリングは、デザインの一貫性を保ち、ユーザーエクスペリエンスを向上させます。また、視覚的に美しいインターフェイスを作成できます。

✅ 補足：CSSの適用優先度（Specificity）とカスケード
Streamlitでは複数のスタイルが競合する場合、CSSのセレクタの優先度や記述順序により、どちらが適用されるかが決まります。確実に上書きしたい場合は、より具体的なセレクタや!importantを使うことも有効です。

例：

CSS
h1 {
    color: red !important;
}

4. 外部CSSファイルの作成

外部CSSファイルは、Webページのスタイルを整理し、再利用可能にします。以下の手順で外部CSSファイルを作成しましょう。

手順

  1. プロジェクトディレクトリにstyle.cssという名前のファイルを作成
  2. 以下のように基本的なスタイルを記述
CSS
body {
    background-color: #f0f2f6;
    font-family: 'Arial', sans-serif;
}

h1 {
    color: #333;
    text-align: center;
}

✅ 補足：CSSファイルの文字コードはUTF-8が推奨
日本語や特殊文字を含むCSSを使う場合、style.cssの保存形式を**UTF-8 (BOMなし)**にしておくと、文字化けを防げます。

5. StreamlitにCSSを適用する方法

st.markdown()とHTMLの扱いに注意

より実用的な関数の例

Python
import streamlit as st
import os

def load_css(css_file):
    with open(css_file) as f:
        css = f.read()
        st.markdown(f"<style>{css}</style>", unsafe_allow_html=True)

# アプリのルートディレクトリからCSSを読み込む
load_css(os.path.join(os.path.dirname(__file__), "style.css"))

✅ 補足：ファイルパスの扱いはOS間で差が出るため、os.pathでの記述が推奨されます。

6. レスポンシブデザインの適用方法

レスポンシブデザインは、異なるデバイス上でも快適に表示されるようにWebページをデザインする手法です。画面サイズに応じてレイアウトを調整することで、ユーザーエクスペリエンスを向上させます。

Streamlitでの適用方法

@mediaクエリをCSSに追加することで、レスポンシブデザインを実現できます。

CSS
@media (max-width: 768px) {
    body {
        background-color: #e0e7ff;
    }

    h1 {
        font-size: 1.5em;
    }
}

Streamlitは全体的にレスポンシブな作りになっていますが、独自のカスタムCSSを加えるとレイアウトが固定的になりやすいため、意識的に@mediaクエリを使いましょう。

応用例：カラムの幅を変更する

CSS
@media (max-width: 768px) {
    .stColumn {
        flex: 100% !important;
    }
}

✅ 補足：Streamlitのカラムは内部的にFlexboxで配置されています。stColumnクラスに対してflexを調整することで、スマホ画面でも1カラム表示にできます。

7. よくある問題とその解決策

  1. CSSが適用されない
    • HTMLの中にCSSスタイルが正しく挿入されているか確認
    • CSSのシンタックスエラーをチェック
  2. レイアウトが崩れる
    • ボックスモデルを理解し、marginやpaddingを調整

CSSが適用されないときのチェックリスト

チェック項目内容
パスの誤りstyle.cssの場所と読み込みコードが一致しているか
HTMLタグの形式<style>～</style> で囲んでいるか
unsafe_allow_htmlTrueになっているか
CSSの構文ミスセミコロン ; や中括弧 {} の閉じ忘れ

✅ 補足：CSSが適用されていない場合、ブラウザの開発者ツールでDOMとスタイルを確認するのが効果的です。

8. 実際のカスタムスタイル適用事例

具体的な事例として、ダークモード対応のStreamlitアプリを作成します。

ダークモードスタイル

CSS
body {
    background-color: #121212;
    color: #ffffff;
}

button {
    background-color: #bb86fc;
    border: none;
    color: #000000;
}

結果

上記のスタイルを適用することで、ユーザーの目に優しいダークモードを提供し、特に夜間など画面周囲の照度が低い場合の利用に適しています。

ダークモード対応の注意点

Streamlit本体が「ライトモード」「ダークモード」の設定を切り替える仕様のため、システムテーマと独立して固定の色にしたい場合は!importantを使う必要があります。

CSS
body {
    background-color: #121212 !important;
    color: #ffffff !important;
}

✅ 補足：StreamlitのダークモードはHTMLの<html>要素に自動でテーマクラスが付きます（例：theme-dark）。これに合わせて条件分岐させたCSSを使うこともできます。

9. 応用テクニック：特定の要素だけにスタイルを適用したいとき

Streamlitが自動生成するHTMLに特定のクラス名が付いていない場合でも、st.markdown()などでHTML構造を明示的に追加することで、CSSの適用対象を増やせます。

例：タイトルをラップしてクラス名を付ける

Python
st.markdown('<div class="custom-title">ようこそ</div>', unsafe_allow_html=True)
CSS
.custom-title {
    font-size: 2em;
    color: #0066cc;
}

10. まとめ

本記事では、以下の内容を学びました：

✅ 最終補足：Streamlitが今後バージョンアップすると、HTML構造やクラス名が変わる可能性があります。アプリの長期保守を想定するなら、定期的な検証とバージョン固定（requirements.txt）の活用をおすすめします。

11. 参考リンク

最後まで読んでいただきありがとうございました。

モバイルバージョンを終了