こんにちは、JS2IIUです。
今回は、st.markdown と HTML/CSS を使ったカスタムスタイルの方法について紹介していきます。少しの工夫でお好みの見た目を実現できる方法です。今回もよろしくお願いします。
はじめに
Streamlit は、Python で手軽に Web アプリを作成できる便利なフレームワークです。グラフや入力フォームなどを簡単に配置できる反面、「デザインをもっと自由にカスタマイズしたい」と感じたことはありませんか？
本記事では、Streamlit に CSS（スタイルシート） を取り入れて、文字の色やサイズ、レイアウトなどをより細かく調整する方法を解説します。
特に st.markdown(..., unsafe_allow_html=True) を使って HTML/CSS を組み込む方法を、サンプルコードとともに丁寧に紹介します。
なぜ CSS を使うのか？
Streamlit の標準UIはシンプルでとても便利ですが、たとえば次のような要望を叶えるには CSS の力が必要です：
- 文字の色やサイズを変えたい
- 特定のボックスだけ背景色をつけたい
- コンテンツ同士の間隔を広げたい
- おしゃれな見出しや枠をつけたい
こうした細かいスタイリングは、HTMLとCSSの組み合わせで実現できます。
Streamlit で HTML/CSS を使う基本
ステップ1： st.markdown() を使う
Streamlit は st.markdown に HTML を渡すことで、見た目をある程度カスタマイズできます。ただし、そのままだと HTML タグは無視されてしまうため、オプション unsafe_allow_html=True を指定する必要があります。
サンプルコード（見出しを青色にする）
注）本記事のサンプルコードは全て画像になっています。コピペできなくて申し訳ないのですが、unsafe_allow_html=Trueがあることでコードブロックがブログ上に正しく表示できないため、やむをえず画像を貼っております。ご了承ください。
出力結果
これは青い見出しです（色付きで大きめの見出しになります）
よく使う CSS カスタマイズの例
1. テキストの色・サイズ・太さを変える
2. ボックスに枠線や背景色をつける
3. 複数行の HTML をわかりやすく書く（ヒアドキュメント形式）
複数の要素に共通の CSS を適用する
<style> タグを使えば、複数の HTML 要素に共通のスタイルを当てられるので便利です。
ステップ1： CSS クラスを定義
ステップ2： クラスを使用した HTML を表示
このようにすることで、同じデザインの要素を複数並べられます。
カスタム CSS を使ったレイアウトの工夫
Streamlit の columns を使って横並びにした要素にも、CSS を使えばもっと魅力的にデザインできます。
例：2列のカード風デザイン
カード風にスタイリングすることで、UI が一気にプロっぽくなります。
注意点とベストプラクティス
🔒 unsafe_allow_html=True は注意して使おう
このオプションを使うと、HTML がそのまま表示されるため、悪意あるコード（XSSなど）を防ぐために注意が必要です。信頼できるコードだけを使いましょう。
⚠ CSS が効かない場合もある
Streamlit は内部で HTML を生成しているため、特定のタグやスタイルが反映されない場合もあります。なるべく div, p, h1~h6 など基本的な要素を使いましょう。
✅ 使いすぎに注意
デザインに凝りすぎると、コードが複雑になります。スタイルは シンプルかつ効果的 に使うのがおすすめです。
まとめ
本記事では、Streamlit で HTML/CSS を使ってデザインを調整する方法を紹介しました。
🔸 st.markdown(..., unsafe_allow_html=True) を使って HTML を埋め込む
🔸 CSS を使えば、色・サイズ・レイアウトの細かい調整が可能
🔸 <style> タグで共通のデザインをまとめると管理が楽
🔸 過度な装飾やセキュリティには注意！
Streamlit アプリを自分好みにカスタマイズする第一歩として、CSS をぜひ取り入れてみてください！
参考リンク
最後に書籍のPRです。
24年9月に出版された「ハイパーモダンPython-信頼性の高いワークフローを構築するモダンテクニック」、Claudio Jolowicz著、嶋田、鈴木訳。開発環境の構築、プロジェクトの管理、テストに関して実践的な内容でとても参考になる一冊です。Poetryについても詳しく説明されています。ぜひ手に取ってみてください。
最後まで読んでいただきありがとうございます。
コメント