こんにちは、JS2IIUです。
StreamlitのUIの最も基本的な要素であるst.title, st.header, st.subheader, st.dividerについて紹介します。簡単に使えてUIを見やすくできるので、覚えておくととても効果的です。今回もよろしくお願いします。
1. はじめに
Streamlitでアプリを作り始めたとき、「なんだか画面がゴチャっとして見づらいな…」と感じたことはありませんか？
実は、見出しや区切り線を使うだけで、アプリの印象はグッとわかりやすく、使いやすくなります。
この記事では、Streamlitでよく使われるUI整形の基本パーツである
st.titlest.headerst.subheaderst.divider
について、実例とともに丁寧に解説します。
2. なぜ見出しと区切り線が重要なのか？
Streamlitは、コードを書くことで簡単にWebアプリを作れる優れたツールですが、コンテンツが増えると画面が散らかって見えることもあります。
そうしたとき、見出しや区切り線を使うことで以下のようなメリットがあります：
- ✅ 情報のまとまりが視覚的にわかりやすくなる
- ✅ ユーザーがアプリを操作しやすくなる
- ✅ 説明や入力エリアを整理してプロっぽく見せられる
3. st.title：ページ全体のタイトルを表示する
🔹 特徴
st.title は、ページ全体の大見出しとして使います。フォントサイズが一番大きく、ユーザーに「このアプリは何なのか」を伝えるのに適しています。
🔸 使い方ステップ
- Streamlit をインポート
st.title()を使ってタイトル文字列を渡す
import streamlit as st
st.title("マイプロフィール登録アプリ")
▶ 出力イメージ
太字で大きく表示され、ページのトップに配置されます。
4. st.header：大きなセクションの見出しを作る
🔹 特徴
st.header は、主要なセクションの見出しとして使います。たとえば「ユーザー情報」「分析結果」など。
🔸 使い方ステップ
st.header("ユーザー情報")▶ 出力イメージ
st.title より少し小さめですが、目立つ見出しです。セクションを区切るのに最適です。
5. st.subheader：小さな見出しで細かく分類
🔹 特徴
st.subheader は、さらに細かい内容を分類するときに使います。フォームや入力欄の前に置くと、何を入力するかが明確になります。
🔸 使い方ステップ
st.subheader("名前を入力してください")▶ 出力イメージ
st.header よりも控えめな見出しになりますが、情報の細分化に便利です。
6. st.divider：視覚的に区切る水平線を挿入
🔹 特徴
st.divider() を使うと、セクション間に水平線が入ります。視覚的な「区切り」を作りたいときに活躍します。
🔸 使い方ステップ
st.divider()▶ 出力イメージ
アプリの中に一本の水平線がスッと入り、セクションの切れ目が明確になります。
7. まとめ：見出しと区切り線で整ったUIを作ろう
今回紹介した4つの関数を使うことで、StreamlitアプリのUIをシンプルかつ分かりやすく整えることができます。
| 機能 | 説明 |
|---|---|
st.title | ページ全体の大見出し |
st.header | セクションのメイン見出し |
st.subheader | サブセクションの小見出し |
st.divider | セクションの区切り線 |
UIを見やすく整えることで、ユーザーにとって使いやすいアプリが作れるようになります。まずはこの4つの要素を使って、UIの「見た目」を意識した設計を心がけてみましょう。
8. おまけ：まとめて使ったサンプルコード
以下は、今回紹介した4つの要素を組み合わせて作成したサンプルアプリです。
import streamlit as st
st.title("プロフィール登録アプリ")
st.header("基本情報")
st.subheader("名前")
name = st.text_input("名前を入力してください")
st.subheader("年齢")
age = st.number_input("年齢を入力してください", min_value=0)
st.divider()
st.header("追加情報")
st.subheader("自己紹介")
bio = st.text_area("自己紹介を書いてください")💡 実行するとこうなる！
- 一番上に「プロフィール登録アプリ」のタイトル
- 「基本情報」「追加情報」という大きな区切り
- その中に「名前」「年齢」「自己紹介」といった小見出しと入力欄が配置され、スッキリとした構成になります。
9. 参考リンク
- 📘 Streamlit 公式ドキュメント：Text Elements
- st.title – Streamlit Docs
- st.header – Streamlit Docs
- st.subheader – Streamlit Docs
- st.divider – Streamlit Docs
✍️ おわりに
UIは「見た目」だけでなく、ユーザーとのコミュニケーション手段でもあります。Streamlitの見出しと区切り線を使って、見やすく使いやすいアプリをぜひ作ってみてください！
最後に書籍のPRです。
24年9月に出版された「ハイパーモダンPython-信頼性の高いワークフローを構築するモダンテクニック」、Claudio Jolowicz著、嶋田、鈴木訳。開発環境の構築、プロジェクトの管理、テストに関して実践的な内容でとても参考になる一冊です。ぜひ手に取ってみてください。
最後まで読んでいただきありがとうございます。
コメント