カラムと整理

メインエリアを整理するための強力なツールを紹介します。

Layouts and Containers - Streamlit Docs

Control how elements are arranged on screen with Streamlit's layout and container components including columns, expanders, sidebars, tabs, and containers.

docs.streamlit.io

カラム (Columns)

st.columns() を使うと、画面を横に分割できます。 with 文を使うことで、どのカラムに配置するかを直感的に記述できます。

layout_columns.py

import streamlit as st

st.title("画面を分割する (Columns)")

st.write("画面を横に分割して、要素を並べることができます。")

# 2つのカラムに分割 (左:右 = 1:1)
col1, col2 = st.columns(2)

with col1:
    st.header("左側")
    st.write("ここは左のカラムです。")
    st.image("https://placehold.co/300x200/png", caption="左の画像")

with col2:
    st.header("右側")
    st.write("ここは右のカラムです。")
    st.button("右側のボタン")

st.write("---")

# 3つのカラムに分割 (幅の比率を指定 2:1:1)
col_a, col_b, col_c = st.columns([2, 1, 1])

col_a.success("幅2のカラム")
col_b.warning("幅1")
col_c.error("幅1")

↺ リセット ↗ 新しいタブで開く

タブ (Tabs)

情報を切り替えて表示したい場合は st.tabs() が便利です。 物理的な画面スペースを節約できます。

layout_tabs.py

import streamlit as st

st.title("タブによる切り替え")

# 3つのタブを作成
tab1, tab2, tab3 = st.tabs(["📈 グラフ", "📄 データ", "ℹ️ 詳細"])

with tab1:
    st.header("グラフエリア")
    st.line_chart([10, 20, 15, 25, 30])

with tab2:
    st.header("データエリア")
    st.write("ここに表などを表示します")
    st.table({"名前": ["A", "B"], "値": [100, 200]})

with tab3:
    st.header("詳細情報")
    st.info("タブを使うと情報をコンパクトにまとめられます。")

↺ リセット ↗ 新しいタブで開く

エキスパンダー (Expander)

「詳細はクリックして表示」のような折りたたみ機能です。 長すぎる説明文や、デバッグ情報を隠しておくのによく使われます。

layout_expander.py

import streamlit as st

st.title("折りたたみ表示 (Expander)")

st.write("クリックすると開くエリアを作れます。ヘルプや補足情報に便利です。")

with st.expander("詳しい解説を見る"):
    st.write("ここは普段は隠れています。")
    st.write("ユーザーが見たい時だけ開くことができます。")
    st.image("https://placehold.co/600x200/png", caption="隠し画像")

st.write("↑ 上のバーをクリックしてみてください。")

↺ リセット ↗ 新しいタブで開く