← 一覧へ

やってみよう画面を下にスクロールして、大きな見出しが上のバーに収まる様子を見てください

スクロールマイナー（知る人ぞ知る）

ラージタイトル

Large Title / Collapsing Header

画面上の大きな見出しが、スクロールすると小さくなって上のバーに収まる。

別名大見出し折りたたみヘッダーCollapsing Toolbar縮むタイトル

どこで使われている？

よく見かける場所
iPhoneの設定・メール・写真など標準アプリ
使うとよい場面
今どの画面にいるかを大きく見せ、スクロールしたら画面を広く使いたいとき
避けたい場面
Androidらしく作りたいアプリ、パソコン向けのサイト

似ているものとの違い

スクロールで動くヘッダーの違い（スティッキーヘッダー・ハイドオンスクロール・ラージタイトル）

AIへの指示文

これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。

HTML / CSS / JavaScript で「ラージタイトル（Large Title / Collapsing Header）」を実装してください。

動き：画面の一番上に大きな太字の見出しを表示し、スクロールして見出しが隠れたら、上部のバーの中央に小さな見出しをフェードで表示する。一番上に戻すと大きな見出しに戻る。

使う部品：スクロール量に応じて見出しを切り替えて自作
もっと詳しく：プログラムでの部品名

同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。

Webサイトならスクロール量に応じて見出しを切り替えて自作
iPhoneアプリなら.navigationBarTitleDisplayMode(.large)（標準）
AndroidアプリならLargeTopAppBar + exitUntilCollapsedScrollBehavior()
FlutterならSliverAppBar.large（iOS風なら CupertinoSliverNavigationBar）
React NativeならReact Navigation の headerLargeTitle（iPhone のみ）

似ているもの・一緒に使うもの