超初心者でも分かるように、CSSを使って、htmlファイルの続きを見る（読み込む）ボタンの実装方法を解説します！「続きを見る」ボタンを実装して、ウェブサイトをスッキリさせて、検索順位を向上させましょう！
以下の記述をCSSファイルに記載してください。
.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を非表示にする*/
}
以下の記述を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>