--- title: "#30DaysOfStreamlit Day19 Streamlitアプリケーションのレイアウト" description: "この記事では、#30DaysOfStreamlitの内容の紹介を行います。\nこのセクションでは、Streamlitアプリケーションのレイアウトについて解説します。\n以下のコマンドを利用してレイアウトをしていきます。\n`st.set_page_config(layout=”wide”)` ：アプリのコンテンツを" image: https://knowledge.insight-lab.co.jp/hubfs/30days_logo.png --- [![INSIGHT LAB](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF_WHT-1.png?width=400&height=110&name=INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF_WHT-1.png) ![INSIGHT LAB](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF.png?width=400&height=110&name=INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF.png)](https://knowledge.insight-lab.co.jp/aidx) [![お問い合わせ](https://hubspot-no-cache-na2-prod.s3.amazonaws.com/cta/default/5935783/97d2baf6-f3cd-4932-be66-900264c5d298.png)](https://hubspot-cta-redirect-na2-prod.s3.amazonaws.com/cta/redirect/5935783/97d2baf6-f3cd-4932-be66-900264c5d298) - [AIDXナレッジ](https://knowledge.insight-lab.co.jp/aidx) ###### 3 分で読むことができます。 # [#30DaysOfStreamlit Day19 Streamlitアプリケーションのレイアウト](https://knowledge.insight-lab.co.jp/aidx/30daysofstreamlit-day19-streamlitアプリケーションのレイアウト) 執筆者 [Budo Ogimoto](https://knowledge.insight-lab.co.jp/aidx/author/budo) 更新日時 2023年12月19日 ###### Topics: [Python](https://knowledge.insight-lab.co.jp/aidx/tag/python) [streamlit](https://knowledge.insight-lab.co.jp/aidx/tag/streamlit) ![](https://knowledge.insight-lab.co.jp/hubfs/30days_logo.png) 目次 ## はじめに --- この記事では、#30DaysOfStreamlitの内容の紹介を行います。 #30DaysOfStreamlitについては[コチラの記事](https://knowledge.insight-lab.co.jp/aidx/30daysofstreamlitをやってみた)を参照してください。 ## Streamlitのレイアウトについて このセクションでは、Streamlitアプリケーションのレイアウトについて解説します。 以下のコマンドを利用してレイアウトをしていきます。 - `st.set_page_config(layout=”wide”)` ：アプリのコンテンツをワイドモードで表示します (デフォルトでは、コンテンツは固定幅のボックスにカプセル化されます)。 - `st.sidebar`：ウィジェットまたはテキスト/画像表示をサイドバーに配置します。 - `st.expander` ：テキスト/画像表示を折りたたみ可能なコンテナボックス内に配置します。 - `st.columns`：内部にコンテンツを配置できる表形式のスペース (または列) を作成します。 ## アプリケーションの構築 上記機能を利用して作成したアプリケーションのコードが以下の様になります。 アプリケーションを開始させてると以下の様になります。 ![SS00000145](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/SS00000145.jpg?width=2000&height=595&name=SS00000145.jpg) 「About this app」を押下すると以下の様になります。 ![SS00000146](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/SS00000146.jpg?width=2000&height=589&name=SS00000146.jpg) ## コードの解説 まずは必要なライブラリをインポートします。 続いて、ページのレイアウトモードをワイドに変更します。 この変更により、アプリケーション内のコンテンツの表示幅が広がります。 そして、タイトルを設定します。 次にst.expanderを利用した折り畳み機能を実装します。 `with`句を使い上記の様に利用します。 また、折り畳み内の内容については`with`句内に上記の様に記述します。 今回は、`st.write`と`st.image`を利用して折り畳み内部のコンテンツを記述しています。 ここからは、アプリケーションのサイドバー上のコンテンツを記述します。 `st.sidebar.header`でサイドバー上のヘッダーを編集、その後、サイドバーを入力フォームとして活用する為にサイドバー上に入力フォームとセレクトボックスを配置しています。 その後、アプリケーションのメイン画面のヘッダーを記述します。 メイン画面を3分割する為にst.columnsを使い、各画面のインスタンス生成します。 各画面の内容を記述する為にwith句を使い下記の様に記述します。 - [Tweet](https://twitter.com/share) ![Budo Ogimoto](https://knowledge.insight-lab.co.jp/hubfs/Budo.png) #### 執筆者 [Budo Ogimoto](https://knowledge.insight-lab.co.jp/aidx/author/budo) 柔術を操るデータサイエンティスト ###### [前の投稿](https://knowledge.insight-lab.co.jp/aidx/30daysofstreamlit-day18-st.file_uploader) [![](https://knowledge.insight-lab.co.jp/hubfs/30days_logo.png)](https://knowledge.insight-lab.co.jp/aidx/30daysofstreamlit-day18-st.file_uploader) ###### [#30DaysOfStreamlit Day18 st.file\_uploader](https://knowledge.insight-lab.co.jp/aidx/30daysofstreamlit-day18-st.file_uploader) ###### [次の投稿](https://knowledge.insight-lab.co.jp/aidx/30daysofstreamlit-day20-tech-x旧twitter-space-で-streamlit-とは何ですか) [![](https://knowledge.insight-lab.co.jp/hubfs/30days_logo.png)](https://knowledge.insight-lab.co.jp/aidx/30daysofstreamlit-day20-tech-x旧twitter-space-で-streamlit-とは何ですか) ###### [#30DaysOfStreamlit Day20 Tech X(旧Twitter) Space で Streamlit とは何ですか?](https://knowledge.insight-lab.co.jp/aidx/30daysofstreamlit-day20-tech-x旧twitter-space-で-streamlit-とは何ですか) ##### INFORMATION INFORMATION - [会社概要](https://www.insight-lab.co.jp/about/company.html) - [お問い合わせ](https://www.insight-lab.co.jp/contact.html) ##### MENU MENU - [AIDXナレッジ](https://knowledge.insight-lab.co.jp/aidx) - [NEWS AI SEARCH](https://solution.insight-lab.co.jp/ai/news-ai-search) [![INSIGHT LAB](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF_WHT-1.png?width=200&height=55&name=INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF_WHT-1.png "INSIGHT LAB")](https://www.insight-lab.co.jp/) - [プライバシーポリシー](https://www.insight-lab.co.jp/privacy.html) Copyright © 2020 INSIGHT LAB, Inc.