CSSで続きを読むボタンを実装する方法を解説!

今回はCSSで続きを読むボタンを実装する方法をサンプルコード付きで解説します。CSSで続きを読むボタンを実装できると長すぎるテキストや要素を折りたたんで隠せるようになり、スタイルを維持できるのでこの機会にぜひ使いこなせるようになりましょう。

コンテンツ [表示]

  1. 1CSSで続きを読むボタンを実装したい
  2. 2CSSで続きを読むボタンを実装する方法
  3. 2.1HTML
  4. 2.2CSS
  5. 2.3ボタンを消さない実装

CSSで続きを読むボタンを実装したい

今回は下記のような「続きを読む」ボタンを押すと隠れていた要素が現れるという実装の作り方を解説します。

このボタンがあることで長いテキストや要素を折りたたむことで隠すことができるので、コンテンツの中身長さや文字数に関わらずデザインを維持できるようになります。

それでは実際にサンプルコードを用いて順番に解説していきます。

CSSで続きを読むボタンを実装する方法

今回実装する方法ではチェックボックスを用います。

チェックボックスがチェックになったときに兄弟要素を表示させます。

HTML

HTML

  <div class="container">
    <input id="trigger" type="checkbox">
    <label for="trigger"></label>
    <div class="text-wrapper">
      ここにはテキストが入ります。ここにはテキストが入ります。ここにはテキストが入ります。ここにはテキストが入ります。ここにはテキストが入ります。ここにはテキストが入ります。ここにはテキストが入ります。ここにはテキストが入ります。ここにはテキストが入ります。ここにはテキストが入ります。ここにはテキストが入ります。ここにはテキストが入ります。ここにはテキストが入ります。ここにはテキストが入ります。ここにはテキストが入ります。ここにはテキストが入ります。ここにはテキストが入ります。
    </div>
  </div>

今回用いたHTMLの中身はこのようになっています。

具体的に解説します。

まずinputタグがトリガーとなるチェックボックスの役割を果たしています。

次にlabelタグがボタンの役割をしています。

ここで重要なポイントが、labelタグのfor属性をinputタグのIDを同じ文字にします。

そうすることによって、今回の実装を実現できています。

また、text-wrapperクラスは実際にテキストが入り、折りたたまれる部分です。overflowプロパティにhiddenを指定することで、はみ出す部分を隠し折りたたむことができています。

あわせて読みたい
overflow
CSSのoverflowプロパティは要素の内容がボックスの範囲から溢れる場合に、その見せ方を制御するプロパティです。overflowプロパティの構文や使い方をサンプルコード付きで解説します。

CSS

まずUI(ユーザーインターフェース)から解説します。

「続きを読む」ボタンのテキストは他にも「もっと見る」・「続きを見る」・「MORE」など続きがあることを連想させる表現が望ましいです。

また、折りたたまれている要素をグラデーションで一部見せることでクリックで全文表示できることをユーザーに連想させることができます。

 

次にシステムの部分を解説します。

今回のシステムを実装するには上記のHTMLのタグの兄弟階層は崩すことができません。

なのでボタンを実装するためにはafterの疑似要素を使う必要があります。

あわせて読みたい
::after
CSSの::after(:after)は疑似要素の1つで、指定したセレクタの要素の最後の子要素として擬似的な要素を生成します。::afterの構文や使い方についてサンプルコード付きで解説します。

また、今回はクラスの指定方法をして~を用いました。これは「一般兄弟セレクタ」もしくは「チルダ」といいます。

あまり普段使わないセレクタですので、詳しい使い方は以下の記事を合わせてご覧ください。

あわせて読みたい
CSSのセレクタのチルダの意味と使い方を解説!のイメージ
CSSのセレクタのチルダの意味と使い方を解説!
今回はCSSのセレクタのチルダの意味と使い方を解説します。CSSでは間接セレクタのチルドを使用する事によって簡潔にコードをまとめる事ができます。サンプルコード付きで解説いたしますので是非参考にして下さい。

この「チルダ」があることによって、グラデーションで隠している部分を表示することができました。
 

ボタンを消さない実装

またボタンをクリックしても消さずに、再びクリックすると元に戻るという実装を簡単に作ることができます。

これはチェックボックスで、ON/OFFを簡単に切り替えることができるからです。

この実装を応用するとドロワーメニューなども簡単に作れることを感じて頂けると思います。

サンプルコードは以下の通りです。
 

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

しまむ
ライター

しまむ

千葉県在住、都内の大学に通う大学1年生です。HTML/CSS/BootStrapに関する記事を執筆しています。