【JavaScript】要素が一定数以上ある場合に省略表示する方法

JavaScriptを使って、要素が一定数以上ある場合に省略表示する方法を紹介します。この方法では、指定した数以上の要素を隠し、最後に「さらに表示…」というリンクを表示します。

スポンサーリンク

HTMLとCSS

まず、HTMLとCSSを準備します。ここでは、要素を表示するコンテナを設定し、CSSで省略表示のスタイルを定義します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Element Truncation</title>
    <style>
        .container {
            max-height: 100px; /* 固定の高さ */
            overflow: hidden; /* 溢れる部分を隠す */
            position: relative;
        }
        .more {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: center;
            background: rgba(255, 255, 255, 0.8); /* 背景を半透明に */
        }
    </style>
</head>
<body>
    <div class="container" id="container">
        <div>アイテム1</div>
        <div>アイテム2</div>
        <div>アイテム3</div>
        <div>アイテム4</div>
        <div>アイテム5</div>
        <div>アイテム6</div>
        <div>アイテム7</div>
        <div>アイテム8</div>
    </div>
</body>
</html>

JavaScriptで要素を制御する

次に、JavaScriptを使って要素を制御します。ここでは、表示する最大アイテム数を5つに設定し、それ以上の要素を非表示にします。また、「さらに表示…」のリンクを追加します。

<script>
    const container = document.getElementById('container');
    const items = container.children;

    if (items.length > 5) { // 表示する最大アイテム数
        for (let i = 5; i < items.length; i++) {
            items[i].style.display = 'none';
        }

        const more = document.createElement('div');
        more.classList.add('more');
        more.textContent = 'さらに表示...';
        container.appendChild(more);
    }
</script>

コードの解説

  1. コンテナの取得: document.getElementById(‘container’)を使って、要素が含まれているコンテナを取得します。
  2. アイテムの取得: container.childrenでコンテナ内の全ての子要素を取得します。
  3. 要素の非表示: if (items.length > 5)でアイテム数を確認し、5つを超える場合は6番目以降の要素を非表示にします。
  4. リンクの追加: document.createElement(‘div’)を使って「さらに表示…」のリンクを作成し、コンテナに追加します。

よくある質問（FAQ）

Q. JavaScriptで要素の数が一定以上のとき省略表示するには？
A. 表示するアイテム数を決め、それ以降はdisplay: noneで非表示にします。「もっと見る」ボタンのクリックで追加表示するアコーディオン形式が一般的なパターンです。
Q. テキストが長い場合に省略（…）で表示するには？
A. CSSのtext-overflow: ellipsis、overflow: hidden、white-space: nowrapを組み合わせます。複数行での省略にはline-clampやWebkitプロパティを使います。
Q. “もっと見る”ボタンで段階的に表示する実装のポイントは？
A. 初期表示数と追加表示数を定数で管理し、クリックのたびに表示数を増やして対象要素のdisplayを変更します。全件表示したらボタンを非表示にする処理も忘れずに追加してください。

まとめ

この方法を使うことで、Webページのデザインを損なうことなく、多くの要素を省略表示することができます。ぜひ試してみてください。