[CSSのみ] 続きを読むボタンをCSSで実装する

web
対応ブラウザ 対応 対応 対応 対応 対応 対応
2017.08.14
閉じるボタンの実装について追記しました。

概要

長い文章や項目の多いフォームなどの高さを制限して、クリックで表示したいときに便利な「続きを読む」ボタン。
要素をグラデーションで隠して、ボタンをクリックすると全文を表示してくれます。
UIとして適切かはともかくとして、どうしてもページの高さを節約したいときなどに便利です。
最近では、ヤフー知恵袋の2つめ以降の回答などで見かけますね。

仕組みとしては、チェックボックスを用いて、チェックされたら兄弟要素を表示状態にするというものです。
デモはこちら

めんどいからCSSだけにしたかった

[jQuery] アニメーションしながら開く「続きを読む」をjQueryで実装するから随分と時間が立っておりますが、アニメーションさせなければjQuery使うほどでもねぇなぁ、と思ったので、今のところ一番簡単な方法をメモ替わりに書いておきます。
もっといい方法あるで!!という方はコメントやらついったーやらで教えてくださいませ。

ソース

HTML

まずはマークアップ。
.grad-wrapで必要な要素を囲んでいます。
.grad-triggerがトリガーとなるチェックボックスです。ラベルと連動させるため、任意の固有IDが必要です。
.grad-btnは実際にユーザーが操作するボタンとなるラベルです。forでチェックボックスのIDと連動させます。
.grad-itemが隠されている要素です。CSSで高さを制限して、overflowではみ出た部分を非表示にしています。

デモのように複数の要素を隠したい場合はこれをコピーし、.grad-triggerid,grad-btnforを別のIDとしてください。

<div class="grad-wrap">
    <input id="trigger1" class="grad-trigger" type="checkbox">
    <label class="grad-btn" for="trigger1">続きを読む</label>
    <div class="grad-item">ここに隠したい文章を書くよ</div>
</div>

CSS

.grad-wrap {
  position: relative;
}
.grad-btn {
  z-index: 2;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 148px;
  margin: auto;
  padding: .5em 0;
  border-radius: 2px;
  background: #009e8f;
  color: #fff;
  font-size: 1.3rem;
  text-align: center;
  cursor: pointer;
  transition: .2s ease;
  box-shadow: 0 0 3px rgba(0,0,0,.3);
  /*デモ用の一例です。.grad-btnのCSSは表示/非表示の動作には関係ないので、ご自由にどうぞ。*/
}
.grad-item {
  position: relative;
  overflow: hidden;
  height: 80px; /*隠した状態の高さ*/
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px; /*グラデーションで隠す高さ*/
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  content: "";
}
.grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger:checked + .grad-btn {
  display: none; /*チェックされていたら、grad-btnを非表示にする*
}
.grad-trigger:checked ~ .grad-item {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger:checked ~ .grad-item::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}

展開後、折りたたみ(閉じる)もしたい場合

上記は展開するとボタンが消えてしまいますが、閉じるボタンとして残しておきたい場合もあるかと思います。
その場合はこのように実装します。

デモはこちら

HTML

HTML構造は同じですが、CSSでボタンの文言を変更したいので、label内を空にしておきます。

<div class="grad-wrap">
    <input id="trigger1" class="grad-trigger" type="checkbox">
    <label class="grad-btn" for="trigger1"></label>
    <div class="grad-item">ここに隠したい文章を書くよ</div>
</div>

CSS

.grad-wrap {
  position: relative;
}
.grad-btn {
  z-index: 2;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 148px;
  margin: auto;
  padding: .5em 0;
  border-radius: 2px;
  background: #009e8f;
  color: #fff;
  font-size: 1.3rem;
  text-align: center;
  cursor: pointer;
  transition: .2s ease;
  box-shadow: 0 0 3px rgba(0,0,0,.3);
  /*デモ用の一例です。.grad-btnのCSSは表示/非表示の動作には関係ないので、ご自由にどうぞ。*/
}
.grad-btn::before {
  content: "続きを読む"
}
.grad-item {
  position: relative;
  overflow: hidden;
  height: 80px; /*隠した状態の高さ*/
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px; /*グラデーションで隠す高さ*/
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  content: "";
}
.grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger:checked ~ .grad-btn::before {
  content: "閉じる" /*チェックされていたら、文言を変更する*/
}
.grad-trigger:checked ~ .grad-item {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger:checked ~ .grad-item::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}
目次へ戻る