Streamlit応用編 第4回: レイアウトのカスタマイズ

こんにちは、JS2IIUです。今日は連続投稿4日目です。まだ、続いています。いつ途切れるでしょうか。今回もよろしくお願いします。

はじめに

第4回目の今回は、Streamlitを使ったレイアウトのカスタマイズ方法について解説します。カラムレイアウトや折りたたみセクションを活用して、ユーザーにとってより使いやすいインターフェースを提供する方法を学びます。また、カスタムCSSを使ってアプリケーションのスタイルを調整し、見た目を洗練させる方法も紹介します。

カラムレイアウトの利用

Streamlitでは、st.columnsを使って複数カラムのレイアウトを簡単に作成できます。これにより、要素を横に並べて表示したり、レイアウトを分割して情報を整理することが可能です。

複数カラムレイアウトの例

次の例では、2つのカラムを作成し、それぞれに異なる内容を配置します。

import streamlit as st

# 2つのカラムを作成
col1, col2 = st.columns(2)

with col1:
    st.header("カラム 1")
    st.write("こちらはカラム1の内容です。")

with col2:
    st.header("カラム 2")
    st.write("こちらはカラム2の内容です。")

このコードでは、st.columnsを使って2つのカラムを作成し、それぞれに異なる内容を表示しています。このように、カラムを使うことで画面を効果的に分割し、情報を整理することができます。

カラムの幅を調整する

カラムの幅を調整して、よりカスタマイズされたレイアウトを作成することも可能です。

import streamlit as st

# カスタム幅のカラムを作成
col1, col2, col3 = st.columns([3, 1, 1])

with col1:
    st.header("カラム 1 (幅3)")
    st.write("こちらはカラム1の内容です。")

with col2:
    st.header("カラム 2 (幅1)")
    st.write("こちらはカラム2の内容です。")

with col3:
    st.header("カラム 3 (幅1)")
    st.write("こちらはカラム3の内容です。")

この例では、st.columnsの引数にリストを渡すことで、カラムの幅をカスタマイズしています。幅3のカラム1と、幅1のカラム2およびカラム3を作成し、レイアウトのバランスを調整しています。

折りたたみセクションの作成

st.expanderを使うと、コンテンツを折りたたんで表示し、必要に応じてユーザーが展開できるセクションを作成できます。これにより、画面がすっきりし、必要な情報を必要な時にだけ表示することが可能です。

基本的な折りたたみセクションの例

次の例では、折りたたみ可能なセクションを作成します。

import streamlit as st

# 折りたたみセクション
with st.expander("詳細情報を表示"):
    st.write("こちらは詳細情報です。")
    st.write("このセクションはクリックで展開できます。")

このコードでは、st.expanderを使って折りたたみ可能なセクションを作成しています。ユーザーがセクションをクリックすると、詳細情報が表示されます。

カスタムCSSの適用

Streamlitでは、st.markdownとCSSを組み合わせることで、アプリケーションの見た目を自由にカスタマイズすることができます。これにより、ブランドイメージに合わせたスタイルや、特定のデザイン要件に応じたレイアウトを作成できます。

カスタムCSSの例

次の例では、背景色やテキストのスタイルを変更します。

import streamlit as st

# カスタムCSSの適用
st.markdown(
    """
    <style>
    .custom-header {
        font-size: 24px;
        color: #4CAF50;
        text-align: center;
    }
    .custom-container {
        background-color: #f9f9f9;
        padding: 10px;
        border-radius: 10px;
    }
    </style>
    """,
    unsafe_allow_html=True
)

# カスタムスタイルを適用したヘッダー
st.markdown('<div class="custom-header">カスタムヘッダー</div>', unsafe_allow_html=True)

# カスタムスタイルを適用したコンテナ
with st.container():
    st.markdown('<div class="custom-container">カスタムコンテナ内のコンテンツです。</div>', unsafe_allow_html=True)

このコードでは、st.markdownを使ってカスタムCSSを定義し、そのスタイルをStreamlitの要素に適用しています。これにより、デザインの自由度が大幅に向上します。

ただ、ちょっとCSSの部分が書きにくい感じがします。大掛かりなCSSを使いたい時は別ファイルにするなどの工夫ができそうです。

まとめ

第4回目では、Streamlitを使ったレイアウトのカスタマイズ方法について学びました。カラムレイアウトや折りたたみセクションを使うことで、ユーザーインターフェースを柔軟に設計できます。また、カスタムCSSを活用することで、アプリケーションの見た目を自由にカスタマイズできることがわかりました。

次回は、テーマのカスタマイズについて解説します。Streamlitテーマの設定やライトモードとダークモードの切り替え方法について詳しく説明しますので、ぜひお楽しみに！

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

補足：Streamlit応用編　記事リスト

Streamlit応用編 第1回: キャッシュ機能の活用
https://js2iiu.com/2024/08/28/streamlit-01-cache/

Streamlit応用編 第2回: インタラクティブなウィジェットの応用
https://js2iiu.com/2024/08/29/streamlit-02-widget/

Streamlit応用編 第3回: データのアップロードとダウンロード
https://js2iiu.com/2024/08/29/streamlit-03-download/

Streamlit応用編 第4回: レイアウトのカスタマイズ
https://js2iiu.com/2024/08/30/streamlit-04-layout/

Streamlit応用編 第5回: テーマのカスタマイズ
https://js2iiu.com/2024/08/31/streamlit-05-theme-custom/

Streamlit応用編 第6回: デプロイと共有
https://js2iiu.com/2024/09/01/streamlit-06-deploy/

Streamlit応用編 第7回: 認証とセキュリティ
https://js2iiu.com/2024/09/02/streamlit-07-security/

Streamlit応用編 第8回: データベースとの連携
https://js2iiu.com/2024/09/02/streamlit-08-database/

Streamlit応用編 第9回: 複雑なデータビジュアライゼーション
https://js2iiu.com/2024/09/05/streamlit-09-visualization/

Streamlit応用編 第10回: マルチページアプリの作成
https://js2iiu.com/2024/09/06/streamlit-10-multipage/

Streamlit応用編 第11回: StreamlitでAPIを作成する方法
https://js2iiu.com/2024/09/07/streamlit-11-api/