CSSだけで長いコンテンツの一部を隠し、
続きを見るボタンで表示・非表示を切り替える方法

サイトの制作を終え更新や管理をしていくと、事例集やお客様の声といった立ち上げ当初は少なかったコンテンツが、どんどん増えていき縦長になっていくというケースがあります。

そうなった時に、次へのページを追加して、コンテンツを各ページに分けて管理する方法もありますが、1ページにまとめながら一部のコンテンツだけを表示して、続きを見るのボタンで続きを表示するという見せ方も今では多くなっています。

今回はそんなボタンクリックでコンテンツの続きを表示したり、再度クリックしたら元に戻してコンテンツを隠すといった方法についてまとめてみたいと思います。

やり方は2パターンあり、CSSだけで行うものと、jQueryとCSSを使って行う方法の2種類ありますが、今回はCSSだけで行える方法についてまとめています。

jQueryとCSSで行う方法は下記も合わせてご確認ください。

CSSだけで実装するためのコード

では、実際に使うコードを見ていきましょう。

<div class="readmore">
  <input id="readmore" type="checkbox">
  <label for="readmore"></label>
  <div class="readmore-content">
    <p>ここにコンテンツ内容を入力します。</p>
  </div>
</div>

.readmore {
  position: relative;
  margin: 50px auto 0;
  padding: 0 0 75px;
}

.readmore label {
  position: absolute;
  display: table;
  left: 50%;
  bottom: 0;
  margin: 0 auto;
  width: 200px;
  padding: 10px 0;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  background-color: #333;
  transform: translateX(-50%);
  cursor: pointer;
  z-index: 1;
}

.readmore label::before{
  content: '続きを見る';
}

.readmore input[type="checkbox"]:checked ~ label::before {
  content: '元に戻す';
}

.readmore input[type="checkbox"]{
  display: none;
}

.readmore-content {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.readmore input[type="checkbox"]:checked ~ .readmore-content {
  height: auto;
}

実際に下記からサンプルをご確認いただけます。

デモページ

少しCSSが長くてややこしく感じますが、そこまで難しいことではないのですが、もしかしたらまだ慣れていない間接セレクタや、checkedなども出てくるため、1つ1つ見ておきましょう。

CSSの間接セレクタを使うためコードの順に注意

今回で重要になるのが、CSSの間接セレクタを使うという点です。
CSSの間接セレクタは「~」を使って設定しますが、今回はこの「~」が大事で、これを使わなければ今回の設定はできません。

そして、input checkboxを使う事でこの間接セレクタは効果を発揮します。
checkboxのチェックが選択されているか、外れているかを基準として、そのチェックしているしていないでそれぞれ別の設定をすることができるようになります。

そのため、今回の設定としては、続きを見るのボタンをinput checkboxで、チェックを入れたら続きを表示、チェックを外したら元に戻す。という仕組みを使っています。

ただ、CSSの隣接「~」を使って設定しているため、HTML側のコードでこの順序が変わってしまうと見た目が崩れたり、正常に動作しなくなってしまいますので注意しましょう。

inputのIDとlabelのforを合わせる

デモコードでは、扱いやすいように特定のクラスなどは付けておりませんが、今回必ず付けなければいけないのが、inputのidとlabelのforで、これらは同じ値を付ける必要があります。

ここが異なる値や付けないといった仕様の場合、連動しなくなるため正常に動作しませんのでくれぐれも忘れず合わせるようにしましょう。

それぞれのコードについての説明

最初の.readmoreは大枠になる部分です。
position: relative;を付けておくのを忘れずに、他の要素はデザインの微調整のために付けているものになります。

.readmore-contentが、いわゆるコンテンツの箇所です。
高さをheight: 200px;としているところが、最初に表示しておく高さになり、overflow: hidden;にてその高さを超えた分は非表示にするという設定になります。

次のlabelとinputがボタンの設定になります。
ただ、inputのチェックボックスは実際には非表示にして、labelと連動するようにしています。

最も大切なのが「:checkd」と「~」での設定

そして、これらの設定をチェックボックスを選択しているか、していないかでそれぞれの設定を変更しています。

それが、checkedと~によって設定できます。
checkedは、checkboxやradioがチェックされた場合を示し、「~」は、その要素より後ろにある同じ階層の要素を示します。

言葉では少しわかりにくいかもしれませんが、

.readmore input[type="checkbox"]:checked ~ label::before {
  content: '元に戻す';
}

.readmore input[type="checkbox"]:checked ~ .readmore-content {
  height: auto;
}

この2つのコードが、上のコードが

1. チェックボックスにチェックが入った時
2. そのinputタグと同じ階層でinputタグ以降のlabel要素の::beforeに
3. content: ‘元に戻す’; を設定する

となります。同じように、その下の部分も

1. チェックボックスにチェックが入った時
2. そのinputタグと同じ階層でinputタグ以降の .readmore-contentに
3. height: auto; を設定する

という設定になります。
非表示にしているinputタグとlabelをidとforで連動させることで、labelをクリック=inputのチェックボックスにチェックを入れるということが設定でき、さらにそのチェックボックスにチェックがあるかないかでさらなる設定を加える事ができるようになります。

このチェックボックスをチェックしているかしていないか、それを元に、ラベルに設定したボタンの文字、そして隠していたコンテンツの高さを200pxからautoとして全体を表示するという形に設定しています。

コンテンツ枠をグラデーションで隠すのがよりベター

この続きを見るのボタンでコンテンツを隠す場合、そのまま表示してしまうと、メリハリが付かなくパッと見ただけではコンテンツが隠れていない（ボタンが別のページへのリンク）と思われてしまう事があるかもしれません。

そのため、その場合は隠れている最後のところをグラデーションで徐々に隠してボタンを表示するという見た目にすることで、よりボタンクリックによって続きが表示されるんだという事を認識させることができます。

追加で必要になるコードは下記の通りです。

.readmore-content::before {
  position: absolute;
  display: block;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 75px;
  background: linear-gradient( rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, #fff 100%);
}

.readmore input[type="checkbox"]:checked ~ .readmore-content::before {
  display: none;
}

コンテンツ枠で付けていたところに疑似要素で、上から背景グラデーションを入れています。これによって、コンテンツの最後が半透明の帯がかかった状態になり、よりボタンが目立つようになります。

height: 75px; のところや色のところをサイトに合わせて設定するだけです。

ただこれだけだと、全コンテンツを表示した場合もそのまま帯が表示されてしまうため、チェックボックスにチェックが入った時は、この疑似要素で付けた背景グラデーションを非表示にするという設定をしています。

これをすることで、よりコンテンツの一部が隠されていて、クリックで表示するというのが見た目でよりはっきり・くっきりとわかるようになります。

デモページ

デモページの上と下で、グラデーションの帯が入っている・入っていないで見た目が異なるので違いを確認してみましょう。Ctrl+Aなど全選択をすると、よりわかりやすいかと思います。

まとめ

今回、CSSのみで長いコンテンツを続きを見るボタンで表示・非表示をするための設定を解説してきました。

実際にCSSだけで書くコードというのは色々な書き方がありこれだけではありません。
別の書き方などもあったり、もっと色々な書き方がありますので、何か1つ自分の中で使う方法を覚えておくと良いと思います。

ただ今回はCSSのみでの設定方法を書いてきましたが、CSSだけでなくjQueryなどJavaScriptを使って使う方法もありますし、もっと言うとjQueryをサイトで導入しているのであれば、そちらの方がより簡単でわかりやすく設定ができます。

jQueryならチェックボックスやラベルなどを使わずにもっとコードを視覚的に見ただけでもわかりやすい設定にもなるので、そのサイト毎に合わせてどう使って行くかを考えてやっていくと良いのではないでしょうか。