やってみよう「続きを読む」を押してみてください
表示・レイアウトメジャー（よく見る）
続きを読む
Read More / Show More
長い文章を3行ほどで切って「…続きを読む」を置き、押すと全文が開く。
別名もっと見る展開表示テキストの折りたたみ全文表示
どこで使われている？
- よく見かける場所
- Amazonの商品説明、食べログのお店紹介、YouTubeの概要欄
- 使うとよい場面
- 長い説明文の最初だけ見せて、興味のある人だけ全文を読めるようにしたいとき
- 避けたい場面
- ほとんどの人が読む大事な説明
似ているものとの違い
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「続きを読む（Read More / Show More）」を実装してください。 動き：長い文章は最初の3行だけ表示し、下側をうっすら消えるようにして「続きを読む」ボタンを置く。押すと高さをなめらかに広げて全文を表示し、ボタンを「閉じる」に変える。 使う部品：CSS の line-clamp + ボタンで自作
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | CSS の line-clamp + ボタンで自作 |
|---|---|
| iPhoneアプリなら | Text の lineLimit を切り替え |
| Androidアプリなら | Text の maxLines を切り替え |
| Flutterなら | Text の maxLines を切り替え |
| React Nativeなら | Text の numberOfLines を切り替え |