【CSS】「もっと見る」ボタンの実装方法

2023年8月16日

HTMLとCSSのみ（JavaScript不要）で、『もっと見るボタン』を実装するには？

クリックすることで、ニュース記事やブログなどの一覧を表示してくれるボタンの実装方法を紹介します。
情報量が多いために普段は隠しておいて、ユーザーが任意で表示・非表示を切り替えられるようにしたい場合に使えます。

『もっと見るボタン』の実装例とコード

以下のボタンをクリックすると複数のテキストが表示されます。
また、クリックすることでボタンの表示を変更（「もっと見る」⇔「閉じる」）することもできます。

AAAAAA
BBBBBB
CCCCCC
DDDDDD
EEEEEE

【HTML / CSS コード】はこちら

<div>
  <input type="checkbox" id="more-toggle" class="more-toggle">
  <label for="more-toggle" class="more-button"></label>
  <ul class="hidden-content">
    <li>AAAAAA</li>
    <li>BBBBBB</li>
    <li>CCCCCC</li>
    <li>DDDDDD</li>
    <li>EEEEEE</li>
  </ul>
</div>

.more-toggle,
.hidden-content {
  display: none;
}

.more-toggle:checked ~ .hidden-content {
  display: block;
}

.more-button {
  display: inline-block;
  width: 200px;
  height: 40px;
  padding: 8px;
  background-color: #0000ff;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
  border-radius: 24px;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.3s;
}

.more-button::before {
  content: 'もっと見る';
}

.more-toggle:checked ~ .more-button::before {
  content: '閉じる';
}

.more-button:hover {
  opacity: 0.7;
}

.more-button:active {
  opacity: 0.4;
}

実装のポイント

input要素のチェックボックスを使って、以下のように表示・非表示を管理します。
- チェックあり　→　表示
- チェックなし　→　非表示
label要素を使い、チェックボックスと紐づけます。（label要素のfor属性と、チェックボックスのid属性を一致させます。）
- これによって、ラベルをクリックするとチェックボックスにチェックが入るようになります。
チェックボックスおよび非表示コンテンツに、display: none;を設定して見えないようにします。
隣接兄弟セレクタ（~）と:checked疑似クラスを使用することで、ラベルをクリック（＝チェックボックスをチェック）したときに非表示コンテンツをdisplay: block;に設定して表示させます。
ラベルをボタンのようにスタイリングします。
また、ホバーやアクティブ状態のセレクタ（:hover, :active）を使用し、状態に応じたスタイリングも設定します。
ラベル（ボタン）のテキストは、::before疑似要素とcontentプロパティを使用します。
- ラベル（ボタン）をクリックしたとき（＝チェックボックスがチェックされたとき）に、contentプロパティを変更することで、ラベル（ボタン）のテキストを変更します。

CSSのみで実装する場合の制約

CSSだけで『もっと見るボタン』を実装する方法には、以下のような制約があります。

シンプルな動作（アニメーション）に限定される。
ネストされた要素（とある要素が他の要素の中に配置され、子要素や孫要素になっている状態）や複数のコンテンツに対応しにくい。
ブラウザの戻るボタンとの互換性がないため、ユーザーがページに戻ってきた場合に状態を保持できない。

JavaScriptを使った『もっと見るボタン（アコーディオンUI）』の実装方法については以下記事で紹介しています。
コードはより複雑になりますが、複雑な動作やアニメーションを実現したい場合はJavaScriptを併用するのがオススメです。

【JS】「もっと見る」ボタンの実装方法（アコーディオン）

ぜひ、試してみてください！

当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。