【コピペで実装】初心者必見！続きを読むボタンの実装方法

2024年12月25日

はじめに

「長い記事を最初は一部だけ表示させたい…」
「続きを読むボタンでコンテンツを表示させたい…」

そんな悩みを持つ方も多いのではないでしょうか？

この記事では、続きを読むボタンの基本から実践的な実装方法まで、初心者にもわかりやすく解説します。
コピペするだけで実装できるコードも用意していますので、ぜひ最後までご覧ください。

詳しく解説していますので、コードだけほしい方は最後の「完成コード」までスクロールしてください。

見本

今回は下記のような続きを読むボタンを作っていきます。

See the Pen Untitled by ryoma (@hwjgdjpk-the-decoder) on CodePen.

ポイントは下記になります。

一定の高さで文章が切り詰められる
グラデーションで自然な切れ目を表現
ボタンクリックでスムーズに全文表示
スマートフォンでも美しく表示

続きを読むボタンの見た目の制作

HTML

<!-- 記事の本文を囲むラッパー -->
<div class="post-content js-post-content">
  <div class="post-content__inner">
    <p class="post-content__text">
      ここに記事の本文が入ります。長い文章が入ります。長い文章が入ります。
      ここに記事の本文が入ります。長い文章が入ります。長い文章が入ります。
      ここに記事の本文が入ります。長い文章が入ります。長い文章が入ります。
            ここに記事の本文が入ります。長い文章が入ります。長い文章が入ります。
      ここに記事の本文が入ります。長い文章が入ります。長い文章が入ります。
      ここに記事の本
    </p>
  </div>
  <button class="post-content__button js-post-button">続きを読む</button>
</div>

主要なポイントは以下の通りです。

post-content: コンテンツ全体を包むラッパー
js-post-content: JavaScriptで操作するためのクラス
post-content__inner: 本文を囲む内側の要素
post-content__text: 本文のテキスト
post-content__button: 続きを読むボタン
js-post-button: JavaScriptで操作するためのクラス

CSS

/*=========================================
#続きを読むボタン
=========================================*/
.post-content {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 60px;  /* ボタン分の余白確保 */
}

/* 本文エリア */
.post-content__inner {
    position: relative;
    height: 120px;  /* 初期表示の高さ */
    overflow: hidden;
    transition: height .5s;
}

/* 開いた時の高さ設定 */
.post-content.is-open .post-content__inner {
    height: auto;
}

/* グラデーション */
.post-content:not(.is-open)::after {
    content: '';
    position: absolute;
    bottom: 60px;  /* ボタンの高さ分 */
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 50%
    );
    pointer-events: none;
}

/* ボタン */
.post-content__button {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 24px;
    background: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity .3s;
    font-size: 14px;
    z-index: 2;
}

.post-content__button:hover {
    opacity: .8;
}

/* 開いた時の要素非表示 */
.post-content.is-open::after,
.post-content.is-open .post-content__button {
    display: none;
}

主要なポイントは以下の通りです。

コンテンツ全体のスタイリング
position: relative でボタンとグラデーションの基準に
padding-bottom でボタンのスペースを確保
本文エリアの制御
height と overflow: hidden で高さを制限
transition でスムーズな開閉を実現
グラデーション部分
疑似要素 ::after を使用
linear-gradient で自然な切れ目を表現
pointer-events: none でクリックを下層に透過
ボタンのデザイン
position: absolute で下部中央に配置
transform で中央揃えを調整
z-index でグラデーションより前面に表示

続きを読むボタンの動きの制作

見た目が完成したので、次は動きをつけて続きを読むボタンが機能するようにしていきます。

ポイントをおさらいすると以下のようになります。

ボタンをクリックすると全文を表示
スムーズなアニメーション効果
クラスの付け替えで状態を管理
一度開いたら閉じる必要なし

JavaScriptの完成コード

/*=========================================
#続きを読むボタン
=========================================*/
const postContent = document.querySelector(".js-post-content");
const postButton = document.querySelector(".js-post-button");

// ボタンをクリックしたら
postButton.addEventListener('click', () => {
  // is-openクラスを付与
  postContent.classList.add('is-open');
});

主要な部分を解説します。

要素の取得

const postContent = document.querySelector(".js-post-content");
const postButton = document.querySelector(".js-post-button");

js-から始まるクラスを使って要素を取得
記事コンテンツとボタンの要素をそれぞれ取得

クリックイベントの設定

postButton.addEventListener('click', () => {
  postContent.classList.add('is-open');
});

ボタンがクリックされたときにis-openクラスを追加
CSSのtransitionプロパティと組み合わさって滑らかに開く
一度開いたら閉じる機能は不要なので、クラスの追加のみ

完成コード

以下は完成後のコードです。

HTML

<!-- 記事の本文を囲むラッパー -->
<div class="post-content js-post-content">
  <div class="post-content__inner">
    <p class="post-content__text">
      ここに記事の本文が入ります。長い文章が入ります。長い文章が入ります。
      ここに記事の本文が入ります。長い文章が入ります。長い文章が入ります。
      ここに記事の本文が入ります。長い文章が入ります。長い文章が入ります。
            ここに記事の本文が入ります。長い文章が入ります。長い文章が入ります。
      ここに記事の本文が入ります。長い文章が入ります。長い文章が入ります。
      ここに記事の本
    </p>
  </div>
  <button class="post-content__button js-post-button">続きを読む</button>
</div>

CSS

/*=========================================
#続きを読むボタン
=========================================*/
.post-content {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 60px;  /* ボタン分の余白確保 */
}

/* 本文エリア */
.post-content__inner {
    position: relative;
    height: 120px;  /* 初期表示の高さ */
    overflow: hidden;
    transition: height .5s;
}

/* 開いた時の高さ設定 */
.post-content.is-open .post-content__inner {
    height: auto;
}

/* グラデーション */
.post-content:not(.is-open)::after {
    content: '';
    position: absolute;
    bottom: 60px;  /* ボタンの高さ分 */
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 50%
    );
    pointer-events: none;
}

/* ボタン */
.post-content__button {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 24px;
    background: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity .3s;
    font-size: 14px;
    z-index: 2;
}

.post-content__button:hover {
    opacity: .8;
}

/* 開いた時の要素非表示 */
.post-content.is-open::after,
.post-content.is-open .post-content__button {
    display: none;
}

JavaScript

/*=========================================
#続きを読むボタン
=========================================*/
const postContent = document.querySelector(".js-post-content");
const postButton = document.querySelector(".js-post-button");

postButton.addEventListener('click', () => {
  postContent.classList.add('is-open');
});