【Streamlit】レイアウトを整える：st.columnsとst.expander

Streamlit
この記事は約7分で読めます。

こんにちは、JS2IIUです。
Streamlitの魅力の一つが見た目の整ったUIを簡単に構築することができることだと思います。今回は、レイアウトを整えるために使えるst.columnsとst.expanderについて説明していきます。今回もよろしくお願いします。

はじめに

StreamlitでWebアプリを作っていると、機能は作れたけれど「もう少し見た目を整えたいな」と感じることはありませんか？

例えば、入力フォームを横並びに配置したい、あるいは詳細な設定項目は折りたたんで表示したいなど。
こういったニーズに応えてくれるのが、Streamlitのレイアウト機能であるst.columnsとst.expanderです。

本記事では、それぞれの使い方をわかりやすく紹介し、最後には両方を組み合わせた実践例もご紹介します。

Streamlitとは？（かんたんに）

Streamlitは、Pythonだけで手軽にWebアプリが作れるライブラリです。

  • インストールも簡単（pip install streamlit）
  • グラフやフォーム、データ表示などがPythonコードで作れます
  • Webの知識がなくても、見た目のよいアプリがすぐに作れます

今回はその中でも、「見た目を整える」ことに特化したレイアウト機能に注目します。

st.columnsで横並びのレイアウトを作る

🔹 基本の使い方

まずは、2つの要素を横に並べてみましょう。

Python
import streamlit as st

col1, col2 = st.columns(2)

with col1:
    st.write("これは左側のカラムです")

with col2:
    st.write("これは右側のカラムです")

🔍 解説：

  • st.columns(2) は「2列のカラムを作る」という意味です。
  • col1 と col2 は、それぞれ左と右の領域になります。
  • with col1: のように with ブロックを使うことで、そのカラムの中にコンテンツを配置できます。

🔹 入力フォームを2列で配置する例

次に、実際にフォームを作ってみましょう。名前と誕生日の入力欄を左右に並べてみます。

Python
col1, col2 = st.columns(2)

with col1:
    name = st.text_input("名前")

with col2:
    birthday = st.date_input("誕生日")

このように、フォーム入力も左右にすっきり並べることができます。

🔹 カラムの幅を調整する（カスタム比率）

カラムの数だけでなく、幅の割合を指定することも可能です。

Python
col1, col2 = st.columns([1, 2])

このコードでは、左のカラムが1、右のカラムが2の割合になります。つまり、右側の方が広くなります。

st.expanderで折りたたみ可能なセクションを作る

次に紹介するのは、折りたたみ式のセクションを作るst.expanderです。

🔹 基本の使い方

Python
with st.expander("詳細オプション"):
    st.slider("明るさ", 0, 100, 50)

🔍 解説：

  • st.expander("タイトル") で折りたたみ可能な領域を作ります。
  • 中に書いたウィジェットは、クリックで開閉できるようになります。
  • 初期状態で開いておきたい場合は、expanded=Trueを指定します。
Python
with st.expander("詳細設定", expanded=True):
    st.text_input("APIキー")

🔹 実例：フォームに詳細設定を追加する

Python
st.text_input("ユーザー名")

with st.expander("詳細設定"):
    st.selectbox("通知頻度", ["毎日", "毎週", "毎月"])
    st.checkbox("メール通知を有効にする")

このように、詳細設定は普段は隠しておくことで、画面がスッキリします。

st.columnsとst.expanderを組み合わせる

最後に、これら2つを組み合わせた例をご紹介します。

🔸 実践例：左に入力欄、右に折りたたみ式のオプション

Python
col1, col2 = st.columns([2, 1])  # 左2、右1の比率

with col1:
    st.text_input("記事タイトル")
    st.text_area("本文")

with col2:
    with st.expander("詳細設定"):
        st.selectbox("カテゴリ", ["Python", "Streamlit", "データ分析"])
        st.slider("公開範囲", 0, 100, 50)

✅ ポイント：

  • columns([2, 1])で、左を広く・右を狭くしています。
  • メインの入力は左に、オプションは右にまとめて、しかも折りたたみ式にすることで、UIが整理されます。

まとめ

機能使い方のポイント
st.columns要素を横並びに配置したいときに便利
st.expander詳細な設定や補足情報を見せたいときに使うと便利

この2つの機能を使いこなすことで、Streamlitアプリの見た目を一気に洗練させることができます。
初めてでも簡単に使えるので、ぜひ試してみてください！

参考リンク

関連記事リンク

当ブログでの、Streamlitのレイアウトに関する過去記事をまとめました。今回紹介したst.columnsやst.expander以外にもさまざまなレイアウト要素が揃っています。組み合わせて自由にUIを構成してみてください。

最後に書籍のPRです。
24年9月に出版された「ハイパーモダンPython-信頼性の高いワークフローを構築するモダンテクニック」、Claudio Jolowicz著、嶋田、鈴木訳。開発環境の構築、プロジェクトの管理、テストに関して実践的な内容でとても参考になる一冊です。Poetryについても詳しく説明されています。ぜひ手に取ってみてください。

最後まで読んでいただきありがとうございます。

コメント

タイトルとURLをコピーしました