StreamlitにおけるUIレイアウトの極意：ボタンを含む要素を横並びにする技術詳解
Streamlitは、データサイエンスや機械学習のプロトタイプを爆速で構築できる強力なフレームワークですが、標準のレイアウトは基本的に縦積み（垂直方向へのスタック）です。そのため、複数のボタンや入力フォームを横並びに配置しようとすると、多くのエンジニアが最初の壁に突き当たります。本記事では、Streamlitでボタンを含むUI要素を横並びにするためのテクニックを、基本から応用まで徹底的に解説します。
レイアウトの基本：st.columnsの理解
Streamlitで横並びを実現するための唯一かつ最強のツールが `st.columns` です。この関数は、画面を垂直方向に分割し、それぞれのコンテナを返す仕組みです。
基本的な使い方は、分割したい数（整数）を引数に渡すことです。例えば、3つの要素を横並びにする場合は `col1, col2, col3 = st.columns(3)` と記述します。戻り値として返される変数は、それぞれが独立した「コンテナ」として機能します。このコンテナに対して `with` 構文を用いることで、その内部にボタンやテキストボックスを配置できます。
重要な点は、`st.columns` で指定するのは「カラムの数」だけではなく、オプションで「幅の比率」も指定できることです。例えば `st.columns([1, 3])` とすれば、左側が全体の1/4、右側が3/4の幅で分割されます。ボタンのサイズを小さくし、隣に長いテキストボックスを置きたい場合などに非常に有効です。
サンプルコード：ボタンと入力ウィジェットの横並び実装
以下に、実務で頻出する「ボタン横並び」と「入力フォームとの組み合わせ」のサンプルコードを示します。
import streamlit as st
# 1. シンプルなボタンの横並び
st.subheader("1. ボタンの横並び")
col1, col2, col3 = st.columns(3)
with col1:
if st.button("保存", key="btn1"):
st.write("保存しました")
with col2:
if st.button("削除", key="btn2"):
st.write("削除しました")
with col3:
if st.button("キャンセル", key="btn3"):
st.write("キャンセルしました")
# 2. 入力フォームとボタンの横並び（比率指定）
st.subheader("2. 入力フォームとの横並び")
# 左側を広め(3)、右側を狭め(1)に設定
c1, c2 = st.columns([3, 1])
with c1:
user_input = st.text_input("検索ワードを入力してください")
with c2:
# 垂直方向の配置調整（空のスペースで高さを合わせる）
st.write("") # スペース調整用
st.write("") # ラベルの高さ分を考慮
if st.button("検索実行"):
st.success(f"'{user_input}'で検索します")
実務上の注意点：垂直方向の配置とレスポンシブ対応
実務において `st.columns` を使用する際、最も頭を悩ませるのが「垂直方向のセンタリング」です。特に `st.text_input` や `st.selectbox` などのラベル付きウィジェットと、単なる `st.button` を並べた場合、ラベルの高さ分だけボタンの位置が下にずれてしまい、見た目が悪くなることが多々あります。
この問題の解決策として、以下の3つのアプローチを推奨します。
1. 空の `st.write(“”)` を挿入して高さを調整する（簡易的だが非推奨）
2. `st.container` を活用し、CSS（st.markdown）で `vertical-align` を制御する
3. ラベルを非表示にする（`label_visibility=”collapsed”`）ことで、高さを揃える
特に「ラベルの非表示」は、UIの統一感を出すために非常に有効です。ボタン単体であれば、ラベルがなくても機能が自明であることが多いため、`label_visibility` を活用して縦のラインを揃えるのがプロフェッショナルなUI設計の第一歩です。
また、Streamlitのレイアウトはブラウザの幅に応じて動的に変化（レスポンシブ）します。カラム幅を比率で指定した場合、モバイル端末など極端に幅が狭い環境では、カラム内の要素が意図せず折り返される可能性があります。この挙動を制御したい場合は、`st.columns` をネストさせることで、柔軟なグリッドシステムを構築することが可能です。
CSSによるさらなるカスタマイズ
標準の機能だけでは難しい「ボタンの幅を完全に揃える」「ボタン同士の隙間を調整する」といった要件がある場合は、`st.markdown` を用いてCSSを注入します。
# ボタンの幅を固定するCSSの例
st.markdown("""
""", unsafe_allow_html=True)
ただし、この方法はStreamlitのバージョンアップによってクラス名が変更されるリスクがあるため、あくまで「最後の手段」として使用してください。基本的には `st.columns` の比率調整で対応するのが、メンテナンス性の観点から最も健全です。
まとめ：保守性の高いレイアウト構築のために
Streamlitでボタンを含めたUIを横並びにする際のベストプラクティスは以下の通りです。
– 基本は `st.columns` を使用し、配置する要素に応じて比率（リスト形式）を指定する。
– 縦方向のズレが発生する場合は、ラベルの表示設定（`label_visibility`）を見直す。
– 複雑なレイアウトになる場合は、カラムをネストして論理的な構造を作る。
– CSSの注入は最終手段とし、可能な限りStreamlit標準のレイアウト関数で完結させる。
Streamlitは「素早く作る」ことに特化したツールです。過剰なCSSカスタマイズは将来的なコードの保守性を低下させます。まずは標準の `st.columns` を使いこなし、ユーザーにとって直感的で操作しやすいUIを構築することを意識してください。これらの技術を習得することで、データ分析アプリケーションの品質は格段に向上し、エンドユーザーからのフィードバックもよりポジティブなものになるはずです。
コメント