python

【python】Streamlitでボタン内のフォントサイズをCSSで変更する

StreamlitはPythonでUIを超簡単に作れるのが魅力ですが、「ボタンのフォントサイズやデザインをCSSで変えたい！」と思ったことはありませんか？　特にボタンは、デフォルトだとやや大きく感じたり、リスト表示だともっと小さくしたいケースもあります。
この記事では「サイドバーのボタンフォントサイズやスタイルをCSSで細かく制御する方法」と、なぜ効くのか図解・サンプル付きで詳しく解説します。

✅ 結論：このCSSを書けばOK！

st.markdown('''
<style>
/* サイドバーのボタン全体の設定 */
div.stButton > button {
    padding: 4px 8px !important;
    border-radius: 6px !important;
    width: 100%;
}
/* サイドバーのボタン内のフォントサイズ */
div.stButton > button > div > p {
    font-size: 14px !important;
}
</style>
''', unsafe_allow_html=True)

これでサイドバーのボタンのテキストサイズも、見た目も思い通りに変わります！

💡 なぜ効くのか？（StreamlitのボタンHTML構造の裏側）

1. Streamlitのボタンは実はこうなっている！

Streamlitで

st.button("✨ 新しいチャット")

と書くと、実際には次のようなHTMLが自動生成されます：

<div class="stButton">
    <button type="button" ...>
        <div>
            <p>✨ 新しいチャット</p>
        </div>
    </button>
</div>
  • div.stButton … ボタン全体を囲む（Streamlit標準のクラス）
  • button … 実際に押すボタン本体
  • div > p … ボタンに表示されるテキスト（ここに「✨ 新しいチャット」などが入る）

2. カスタムCSSは「HTML構造」を見て当てる

ボタン全体のスタイルを変えたいとき

div.stButton > button {
    padding: 4px 8px !important;
    font-size: 13px !important;
}
  • これはボタン全体に効く指定

●テキスト（pタグ）のフォントサイズを変えたいとき

div.stButton > button > div > p {
    font-size: 14px !important;
}

これでボタン内のテキストだけにピンポイントで効きます

3. なぜ「p」まで指定しないといけないのか？

  • Streamlitのボタンは「buttonの中にdiv、その中にp」と深い入れ子構造
  • buttonだけだとボタン自体のサイズや余白しか変わらない
  • *div.stButton > button > div > p*で「テキストだけ」をピンポイントでターゲットにできる
  • 自作クラス（例：.sidebar-btn-small > button）はHTML的に全く関係ないので効かない

4. 効くCSS・効かないCSSの違い（表まとめ）

CSSセレクタ効く？作用範囲備考
.sidebar-btn-small > button❌自作div→button自作divはStreamlitのbuttonと無関係
div.stButton > button◯ボタン全体ボタンのサイズや余白を調整できる
div.stButton > button > div > p◯ボタン内のテキストテキストだけフォントサイズ指定可能

📝 まとめ：大事なポイント

  • Streamlitのボタンは自作クラスでなく「stButton」HTMLクラスで指定しよう！
  • ボタンの“テキスト”は**pタグまでピンポイント指定**しないと効かない！

-python
-,