縦に長い要素を隠して、高さの均一化をしたいときに便利な「続きを読む」「もっと見る」ボタン。
JSを使わずに、CSSのみで簡単に実装可能です。
目次
「続きを読む」ボタンのコードサンプル
HTML
<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 {
/*.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を非表示にする*/
チェックボックスを使って表示・非表示を切り替えています。
同一ページ内で複数の「続きを読む」ボタンを実装したい場合は、.grad-trigger
のid
と,grad-btn
のfor
を別のIDにすることで実装できます。
折りたたみ(閉じる)もしたい場合のサンプルコード
HTML
<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 {
/*.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を非表示にする*/
}
参考サイト:https://metrograph.jp/css_gradation_paragraph/
JSが苦手なウェブデザイナーに特におすすめ
この方法がもっとも簡単に「続きを読む」ボタンを実装できるのではないでしょうか。
CSSのみで実装できるため、JSが苦手なウェブデザイナーの方に特におすすめです。
コメントを残す