1. テキスト系
| 用途 | 関数 | 備考 |
|---|---|---|
| タイトル | st.title() |
|
| 見出し |
st.header(), st.subheader()
|
|
| 通常テキスト |
st.write(), st.text()
|
|
| Markdown | st.markdown() |
めちゃくちゃ有能(追記) |
| 補足・注釈 | st.caption() |
|
| コード表示 | st.code() |
|
| 数式 | st.latex() |
サンプル
import streamlit as st
st.title("st.titleで書いた見出し")
st.header("st.headerで書いた見出し")
st.subheader("st.subheaderで書いた見出し")
st.write("st.writeで書いた通常テキスト")
st.markdown("st.markdownで書いた部分。**太字** や *斜体* も書ける。")
code = '''
# コード表示
st.code("st.codeで書いたコード")
'''
st.code(code, language="python")
st.latex(r"""
\frac{a+b}{2} \ge \sqrt{ab}
\dots\text{LaTeX同様の書き方でテキストも書ける}
""")
st.caption("st.captionで書いた補足")
2. データ表示（テーブル・JSONなど）
| 用途 | 関数 | 備考 |
|---|---|---|
| シンプルな表 | st.table() |
|
| ソート・フィルタ可能な表 | st.dataframe() |
可視化ツール向け |
| JSON構造の表示 | st.json() |
サンプル
st.subheader("データ表示（テーブル・JSON）")
data = [
{"phase": "認知", "action": "SNSのシェアを見て気になる", "goal": "どんなサービスか概要を知る"},
{"phase": "訪問", "action": "公式サイトのトップページにアクセス", "goal": "情報をざっくり把握する"},
{"phase": "比較", "action": "料金・機能・口コミを比較", "goal": "自分に合うか判断する"},
]
# シンプルな表として表示。ソートなどの機能を持たない。
st.table(data)
# データフレームとして扱う。列ラベルをクリックするとフィルタやソート・列の非表示などが可能。
df = pd.DataFrame(data)
st.dataframe(df, use_container_width="stretch")
# Json形式で表示。データ内容などを生で表示する時に便利。
st.subheader("JSON表示")
st.json(data)
pandasをインポートして、データフレームとして扱うと
表で何か一覧する時に便利に扱える。
補足：st.markdownについて
これさえあればほとんど作れる。というより凝った表示を作るにはst.markdownが必要。
1. Markdownの基本機能に対応
#見出し表示。st.header()/subheader()相当
st.markdown("# 見出し1")
st.markdown("## 見出し2")
st.markdown("### 見出し3")
#太字・斜体・取り消し線
st.markdown("**太字** *斜体* ~~取り消し線~~")
#箇条書き(数字の箇条書きは子要素を作れない)
st.markdown("- 選択肢1\n- 選択肢2\n - 選択肢2-1")
st.markdown("1. 選択肢1\n1. 選択肢2\n 1. 選択肢2-1")
#引用ブロック
st.markdown("> 引用ブロックです")
#線(2段組みなどにすると、対応した組の線の長さになる)
st.markdown("---")
2. HTMLを直接扱う/CSSで飾りつけて表示
利用するには、unsafe_allow_html=Trueをオプションで指定する
st.markdown(..., unsafe_allow_html=True)
HTML+cssで、bootstrapで提供しているようなリッチなUIが作れる。
以下は生成AIを用いて生成したコードです
import streamlit as st
st.markdown("""
<style>
/* ▼ 検索バー全体の横並びコンテナ ------------------------------ */
.search-container {
display: flex; /* 横並びにする */
align-items: center; /* 垂直方向の中央揃え */
gap: 0; /* 子要素の隙間をなくす（input & button を密着させる） */
width: 100%; /* 親幅いっぱいに広げる */
max-width: 500px; /* 最大幅は500pxに制限（広すぎるの防止） */
margin: 10px 0; /* 上下に余白 */
}
/* ▼ 検索ボックスのテキスト入力部分 ------------------------------ */
.search-input {
flex: 1; /* 横幅を可能な限り広げる（ボタンより優先） */
padding: 10px 14px; /* 内側の余白（高さ・横のバランス） */
border: 1px solid #ced4da; /* グレー系の枠線（Bootstrapと同等） */
border-radius: 6px 0 0 6px; /* 左側だけ角丸（右側はボタンと接続のため角丸なし） */
font-size: 16px; /* 文字サイズ */
outline: none; /* ブラウザ標準の青枠を消す */
}
/* ▼ 入力中（フォーカス時）の見た目強調 ------------------------------ */
.search-input:focus {
border-color: #86b7fe; /* ブルー系の枠線（Bootstrapのfocus色） */
box-shadow: 0 0 0 0.2rem rgba(13,110,253,.25); /* 外側に青い光（Bootstrap同等） */
}
/* ▼ 右側の検索ボタン（Bootstrapの btn-primary に寄せる） ----------- */
.search-button {
padding: 10px 18px; /* 上下左右のボタン内部余白 */
background-color: #0d6efd; /* Bootstrap primary 色（濃い青） */
border: 1px solid #0d6efd; /* 枠線も同じ色 */
border-radius: 0 6px 6px 0; /* 右側だけ角丸（左側はinputと接するため角丸なし） */
color: white; /* 白文字 */
font-size: 16px; /* 文字サイズ */
cursor: pointer; /* ホバー時にポインター表示 */
}
/* ▼ ホバー時の色変更 --------------------------------------------- */
.search-button:hover {
background-color: #0b5ed7; /* Bootstrapのhover色（少し暗い青） */
}
</style>
<!-- ▼ 検索UI（input + button） ------------------------------------------- -->
<div class="search-container">
<input id="searchInput" class="search-input" type="text" placeholder="キーワードを入力…">
<button class="search-button">検索</button>
</div>
""", unsafe_allow_html=True)
以下のような、検索ボックスが作成できる。
カーソルを合わしたとき（フォーカス時）の色変更などをstreamlitでやる場合はこのように作成する。
