【CSS JavaScript サンプルコード】アコーディオン 続きを読む(Read more)Toggle 折りたたみコンテンツ
更新日:2025/02/05

HTML、CSS、JSを使って「もっと読む」のUIのサンプルコードを紹介!
サンプルコード
<div class="readmore-container">
<div class="readmore-content" id="readmoreContent">
<!-- ここに長めの文章を入れる -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum erat eget commodo egestas.
Vivamus consequat, nunc ac malesuada pretium, lectus libero varius quam, et imperdiet neque arcu nec est.
Nullam suscipit erat in eros dapibus, at fringilla orci semper. Sed suscipit, lorem in laoreet interdum,
justo nisi convallis lorem, nec auctor magna lorem a massa. Duis sit amet condimentum velit.
Donec dolor nisl, tristique vel sem eu, auctor consequat urna.
Aenean non risus nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
</p>
<p>
Curabitur vestibulum justo sed scelerisque ultricies. Donec tempor eros et sapien iaculis hendrerit.
Sed lobortis, velit non pulvinar mattis, nulla leo congue elit, eget pellentesque metus urna eget lorem.
Integer ac dignissim quam. Sed quis urna magna. Curabitur auctor neque a eros porttitor ullamcorper.
</p>
<p>
Praesent commodo, orci ut facilisis dignissim, tortor mi euismod sem, sed eleifend massa justo eget felis.
Duis fermentum elementum risus id vestibulum. Morbi interdum faucibus augue, at consectetur sapien tincidunt eget.
</p>
</div>
<button class="readmore-toggle" id="readmoreToggle">続きを読む</button>
</div>
/* ------------------------------------
* 「続きを読む」周りのコンテナ
* ------------------------------------ */
.readmore-container {
width: 600px;
max-width: 100%;
margin: 0 auto;
position: relative;
background: #fff;
padding: 2rem;
}
/* ------------------------------------
* 折りたたむエリア
* transition をつけ、max-heightで高さを管理
* ------------------------------------ */
.readmore-content {
/* 折りたたみ時の高さを設定(必要に応じて調整) */
max-height: 150px;
overflow: hidden;
position: relative;
transition: max-height 0.4s ease-in-out;
}
/* 疑似要素で下部にグラデーションをかけて「テキストが薄れていく」演出 */
.readmore-content::after {
content: "";
position: absolute;
pointer-events: none;
bottom: 0;
left: 0;
width: 100%;
/* 高さはボタンと被らない程度に。大きすぎるとグラデーション領域が広くなりすぎる */
height: 60px;
/*
* 透明 → 白 のグラデーション
* 例として一番下は白(#fff)にしていますが、背景色によって調整する
*/
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 60%);
transition: opacity 0.4s ease-in-out;
}
/* .is-active が付与されたら高さを十分な値に変更し、全テキストを表示できるようにする */
.readmore-content.is-active {
max-height: 1000px; /* 必要に応じて、十分に大きい値にする */
}
/* 展開時はグラデーションを消す */
.readmore-content.is-active::after {
opacity: 0;
}
/* ------------------------------------
* 「続きを読む」ボタン
* ------------------------------------ */
.readmore-toggle {
display: inline-block;
margin-top: 8px;
padding: 8px 16px;
border: none;
background: #007acc;
color: #fff;
cursor: pointer;
font-size: 14px;
border-radius: 4px;
transition: background 0.3s ease-in-out;
}
.readmore-toggle:hover {
background: #005999;
}
document.addEventListener("DOMContentLoaded", function() {
const readmoreToggle = document.getElementById("readmoreToggle");
const readmoreContent = document.getElementById("readmoreContent");
readmoreToggle.addEventListener("click", function() {
// .is-active クラスのトグル
readmoreContent.classList.toggle("is-active");
// ボタンの表示文言を切り替え
if (readmoreContent.classList.contains("is-active")) {
readmoreToggle.textContent = "閉じる";
} else {
readmoreToggle.textContent = "続きを読む";
}
});
});
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum erat eget commodo egestas. Vivamus consequat, nunc ac malesuada pretium, lectus libero varius quam, et imperdiet neque arcu nec est. Nullam suscipit erat in eros dapibus, at fringilla orci semper. Sed suscipit, lorem in laoreet interdum, justo nisi convallis lorem, nec auctor magna lorem a massa. Duis sit amet condimentum velit. Donec dolor nisl, tristique vel sem eu, auctor consequat urna. Aenean non risus nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
Curabitur vestibulum justo sed scelerisque ultricies. Donec tempor eros et sapien iaculis hendrerit. Sed lobortis, velit non pulvinar mattis, nulla leo congue elit, eget pellentesque metus urna eget lorem. Integer ac dignissim quam. Sed quis urna magna. Curabitur auctor neque a eros porttitor ullamcorper.
Praesent commodo, orci ut facilisis dignissim, tortor mi euismod sem, sed eleifend massa justo eget felis. Duis fermentum elementum risus id vestibulum. Morbi interdum faucibus augue, at consectetur sapien tincidunt eget.
サンプルコード
<div class="content-wrapper">
<div class="read-more-content">
<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>
<p>しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕まえて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。</p>
<p>ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始めであろう。この時妙なものだと思った。</p>
<p>というのは眼がいくつもついている。後でこの事を知った時、以前から猫にいくつも眼をつけていると言う人を見たことがあるのを思い出した。</p>
</div>
<button class="read-more-button">続きを読む</button>
</div>
<style>
.content-wrapper {
max-width: 600px;
margin: 20px auto;
font-family: sans-serif;
background: #fff;
padding: 2rem;
}
.read-more-content {
position: relative;
overflow: hidden;
max-height: 100px; /* 初期の高さ */
transition: max-height 0.5s ease-in-out;
}
/* is-active クラスが付いた時の高さ */
.read-more-content.is-active {
max-height: 1000px;
}
/* グラデーションの疑似要素 */
.read-more-content::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 90%
);
pointer-events: none;
transition: opacity 0.3s ease;
}
/* is-active時はグラデーションを非表示 */
.read-more-content.is-active::before {
opacity: 0;
}
.read-more-button {
display: block;
width: 100%;
padding: 10px;
background: #f0f0f0;
border: none;
border-radius: 5px;
margin-top: 10px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.read-more-button:hover {
background: #e0e0e0;
}
</style>
document.querySelector('.read-more-button').addEventListener('click', function() {
const content = document.querySelector('.read-more-content');
content.classList.toggle('is-active');
// ボタンのテキストを切り替え
this.textContent = content.classList.contains('is-active') ? '閉じる' : '続きを読む';
});
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕まえて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。
ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始めであろう。この時妙なものだと思った。
というのは眼がいくつもついている。後でこの事を知った時、以前から猫にいくつも眼をつけていると言う人を見たことがあるのを思い出した。

-
検索
(例) debug search etc.. -
カテゴリー
-
mixhostでのWordPress利用について
更新日:2024/04/02
299 view
-
scrollHint
更新日:2024/03/13
250 view
-
XML Sitemap Generator for Google不具合のダウングレード対応、代替プラグイン
更新日:2024/06/13
236 view
-
【SnowMonkey】納品までのフローまとめ
更新日:2025/02/15
163 view
-
ワードプレスでフォントを変えたいとき、プラグインを使えば初心者でも簡単
更新日:2025/02/16
144 view
-
【Googleサーチコンソール】検索画面で表示させたくない「Googleのインデックス削除」
更新日:2024/06/07
130 view
-
【Snow Monkey】ショートコードで編集画面で任意の場所にHTMLファイルを挿入
更新日:2025/04/04
124 view
-
キーワード検索で上位表示させる方法【SEO】
更新日:2023/10/28
120 view
-
tailwindcss使い方
更新日:2024/03/13
120 view
-
Recline: GitHub Copilotで動作するClaude 3.5 Sonnet搭載の開発支援ツール
更新日:2025/01/20
110 view
-
WordPressプラグイン「All-in-One WP Migration」のトラブル
更新日:2022/03/31
84 view
-
ワードプレスセキュリティー対策まとめ【2025年】「site guard wordpress」「BackWPup バージョン5でUI変更!?」
更新日:2025/02/25
76 view
-
SSHを使用してGitHubのリポジトリをクローン、複数の接続元で公開鍵をディレクトリで区別する方法
更新日:2025/01/13
47 view
-
VSCodeで開発効率を劇的に向上させる!Roo-Clineプラグイン完全ガイド【Gemini API】
更新日:2025/02/08
43 view
-
Express、FastAPIを使用し、二重fetch構成のメリット
更新日:2025/03/28
41 view
-
「JSONスキーマ」と「Few-shot Learning」で実現する次世代生成AIソフトウェア開発の可能性
更新日:2025/02/12
40 view
-
WordPressの無料画像素材のおすすめダウンロードサイト!
更新日:2022/02/22
35 view
-
リファクタリング【VSCode Javasctipt Python】
更新日:2025/03/09
35 view
-
形態素解析とは?初心者でもわかるツールの使い方と実践例
更新日:2025/02/08
33 view
-
【Next.js AWS】音声文字起こし&要約、分析アプリケーション(S3)(Transcribe)(Amazon Bedrock)
更新日:2025/02/13
30 view