WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： K.K.
カテゴリー： プログラム >JavaScript

ブログの記事一覧やお知らせページでよく見かける「もっと見る」機能。
記事を最初からすべて表示してしまうとページが長くなり、ユーザーが目的の記事を探しにくくなることがあります。そんなときに便利なのが、ボタンをクリックするたびに記事を少しずつ表示する仕組みです。

この記事では、HTML・CSS・JavaScriptだけで実装できる「もっと見る」機能を紹介します。

完成イメージ

今回作成するレイアウトは、カード形式の記事一覧です。

• カードデザインで見やすいレイアウト
• レスポンシブ対応
• 「もっと見る」を押すたびに3件ずつ表示
• 記事数が増えてもHTMLを追加するだけ（CMSの自動出力にも対応）

See the Pen
もっと見るボタン by qam (@qam)
on CodePen.

HTML

記事カードを一覧表示するためのHTMLです。
各記事は.cardクラスで管理し、JavaScriptによって表示・非表示を切り替えます。

<section class="articles">

    <div class="card">
        <img src="サムネイル画像のパス" alt="">
        <div class="card-content">
            <h3>記事タイトル1</h3>
            <p>記事の説明文が入ります。記事の概要を表示します。</p>
        </div>
    </div>

</section>

<div class="button-area">
    <button id="loadMore">もっと見る</button>
</div>

CSS

続いてCSSです。
シャドウ付きのカードや、ホバー時に少し浮き上がるアニメーション、Gridによるレスポンシブレイアウトなど比較的シンプルなカードデザインで実装しています。

.articles{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;
}

.card{
    display:none;
    background:#fff;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 5px 15px rgba(0,0,0,.1);
    transition:.3s;
}
    .card:hover{
        transform:translateY(-5px);
    }
    .card img{
        width:100%;
        display:block;
    }

.card-content{
    padding:20px;
}
    .card-content h3{
        margin-bottom:10px;
        font-size:22px;
    }
    .card-content p{
        color:#666;
        line-height:1.8;
    }

.button-area{
    text-align:center;
    margin-top:50px;
}

#loadMore{
    padding:15px 50px;
    border:none;
    background:#333;
    color:#fff;
    font-size:16px;
    border-radius:50px;
    cursor:pointer;
    transition:.3s;
}
    #loadMore:hover{
        background:#555;
    }

JavaScript

最後にJavaScriptです。
今回のポイントは、「現在何件表示するか」を変数で管理することです。初期状態では3件だけ表示し、ボタンを押すたびに3件ずつ追加表示します。

const cards = document.querySelectorAll(".card");
const loadMoreBtn = document.getElementById("loadMore");

let visibleCount = 3;

// 初期表示
showCards();

function showCards(){
    cards.forEach((card,index)=>{
        if(index < visibleCount){
            card.style.display = "block";
        }
    });
    if(visibleCount >= cards.length){
        loadMoreBtn.style.display = "none";
    }
}

// ボタンクリック
loadMoreBtn.addEventListener("click",()=>{
    visibleCount += 3;
    showCards();
});

表示件数を管理する

最初に表示する件数を変数で設定します。

let visibleCount = 3;

この数字が現在表示される記事数になります。

表示処理を実行する

カードを順番にチェックし、表示件数以内の記事だけ表示します。

if(index < visibleCount){
    card.style.display = "block";
}

「もっと見る」で3件追加

ボタンがクリックされるたびに表示件数を増やします。

visibleCount += 3;

その後、表示処理を再実行することで新しい記事が追加表示されます。

最後まで表示したらボタンを非表示

すべての記事が表示されたら「もっと見る」ボタンは不要になるため、次のような処理を追加します。

if(visibleCount >= cards.length){
    loadMoreBtn.style.display = "none";
}

これにより、最後まで表示した時点でボタンが自動的に消え、ユーザーにとって分かりやすいUIになります。

カスタマイズ例

4件ずつ表示したい場合

let visibleCount = 4;

visibleCount += 4;

6件ずつ表示したい場合

let visibleCount = 6;

visibleCount += 6;

まとめ

今回は、HTML・CSS・JavaScriptだけで実装できる「もっと見る」機能を紹介しました。
ライブラリを使わずに実装できるため、ブログの記事一覧、実績紹介、商品一覧、ポートフォリオなど、さまざまな場面で活用できます。少ないコードで使い回しやすく、初心者にもおすすめの実装方法です。