HTML&CSSで「もっと見るボタン」を作成し、表示要素数を制御する

はじめに

「一覧の途中まで表示して、続きを“もっと見る”ボタンで展開する」
Webページではよく見るUIですね。

JavaScriptを使えば簡単にできますが、実はHTMLとCSSだけでも実現可能です。
本記事では、最低限のコードで「もっと見る」ボタンを作り、要素数を制御する方法を紹介します。

ボタンの見た目を作成する

まずは「もっと見る」ボタンをCSSで整えましょう。
見た目が整っているだけで、UIとしての完成度がぐっと上がります。

index.html

<input type="checkbox" id="toggle" />
<label for="toggle" class="more-btn"></label>

style.css

/*
=================
ボタン
=================
*/
.more-btn {
  display: inline-block;
  padding: 10px 20px;
  margin-top: 10px;
  background-color: #0078d7;
  color: white;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.more-btn:hover {
  background-color: #005fa3;
}

.more-btn::after {
  content: "もっと見る";
}

/* チェックボックスは画面外へ（ラベルで操作する） */
#toggle {
  position: absolute;
  left: -9999px;
}

まずはボタンが作成できました！

デフォルトでは要素を少なく表示させる

次に、一覧を3つだけ表示し、残りは隠すようにしてみましょう。

index.html

<ul class="list">
  <li>要素1</li>
  <li>要素2</li>
  <li>要素3</li>
  <li>要素4</li>
  <li>要素5</li>
  <li>要素6</li>
</ul>
<input type="checkbox" id="toggle" />
<label for="toggle" class="more-btn"></label>

style.css

/*
=================
ボタン
=================
*/
.more-btn {
  display: inline-block;
  padding: 10px 20px;
  margin-top: 10px;
  background-color: #0078d7;
  color: white;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.more-btn:hover {
  background-color: #005fa3;
}

.more-btn::after {
  content: "もっと見る";
}

/* チェックボックスは画面外へ（ラベルで操作する） */
#toggle {
  position: absolute;
  left: -9999px;
}


/*
=================
リスト
=================
*/
.list {
  padding: 8px;
}

.list li {
  list-style: none;
  padding: 8px;
  border-bottom: 1px solid #ccc;
}

/* デフォルトは3件まで */
.list li:nth-child(n + 4) {
  display: none;
}

デフォルトでは3件のみ表示されていることが確認できました。

クリックされた時に全要素を表示させる

ここが本題です。
実は、CSSの擬似クラスとチェックボックスを組み合わせると、
JavaScriptなしで要素の表示を切り替えることができます。

style.css

/*
=================
ボタン
=================
*/
.more-btn {
  display: inline-block;
  padding: 10px 20px;
  margin-top: 10px;
  background-color: #0078d7;
  color: white;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.more-btn:hover {
  background-color: #005fa3;
}

.more-btn::after {
  content: "もっと見る";
}

/* チェックボックスは画面外へ（ラベルで操作する） */
#toggle {
  position: absolute;
  left: -9999px;
}

/*
=================
リスト
=================
*/
.list {
  padding: 8px;
}

.list li {
  list-style: none;
  padding: 8px;
  border-bottom: 1px solid #ccc;
}

/* デフォルトは3件まで */
.list li:nth-child(n + 4) {
  display: none;
}

/*
=================
クリックイベント
=================
*/
/* ul の直後にある #toggle が checked のとき、ul 内を全表示 */
.list:has(+ #toggle:checked) li {
  display: list-item;
}

/* #toggle が checked のときに「閉じる」に変更 */
#toggle:checked + .more-btn::after {
  content: "閉じる";
}

これで、クリックすると：

• すべての要素が表示される
• ボタンの文言が「閉じる」に変わる

という動作が、純粋なHTMLとCSSのみで実現できます！

正常に動作していることも確認できました。

最後に

「もっと見る」ボタンは一見地味ですが、
ユーザー体験（UX）を大きく左右するUI要素です。

JavaScriptが使えない環境や、静的サイトを作る際にも、
HTML＋CSSだけで制御できると便利です。