コピペでできる！CSSとhtmlのみで作る「続きを読む」の開閉ボタン

2018.01.22
2018.03.17

長い文章などの高さを制限して、クリックで表示したいときによく使われている「続きを読む」「もっと見る」ボタンのサンプルです。
要素を隠して、ボタンをクリックすると全文が表示されるアレです。
UIが適切かはともかく、ページの高さを節約したいときや、別ページに移管させたくない時などに使えますね。
仕組は、チェックボックスを使用し、チェックされたら兄弟要素を表示状態にするというものになります。

今回は、グラデーションで先の文章が隠されているバージョンとボタンを押したらピロっと下にテキストが出てくるバージョンをご用意しました。

アイコンはfontawesomeを使用しています。

browser: 65 11 20 11

この記事の目次

「続きを読む」の開閉ボタン[2種]

「続きを読む」の開閉ボタン[2種]

「続きを読む」以下をグラデーションで隠すボタン

ニャン易度

ネコの定義

イエネコの起源は、ネズミを捕獲させる目的で飼われ始めたヨーロッパヤマネコの家畜化であり、ヨーロッパヤマネコの亜種とされることもある。ヨーロッパヤマネコの学名をより記載の早いイエネコと同じFelis catusとする説もあったが、2003年にICZNの強権によりF.catusはイエネコのみを指す学名として、野生種の学名はF.silvestrisを引き続き使用することが認められた。

一方、広義の「ネコ」は、ネコ類（ネコ科動物）の一部、あるいはその全ての包括的分類を指し、家畜種のイエネコに加えて広義のヤマネコ類を含む。特に学術用語としては、英語の「cat」と同様、トラやライオンなどといった大型種を含む全てのネコ科動物を指すことがある。

学名（ラテン語名）「Felis silvestris catus（仮名転写：フェーリス・シルウェストリス・カトゥス）」の語義は「ネコ属、野生の、ネコ」である。これは、ヨーロッパヤマネコFelis silvestris（野生のネコの意）の中の「ネコという一群」との命名意図がある。

以下、本項では特記なき限りネコ=イエネコとして解説する。

<div class="cp_box">
	<input id="cp01" type="checkbox">
	<label for="cp01"></label>
	<div class="cp_container">
		<p>テキスト</p>
	</div>
</div>

.cp_box *, .cp_box *:before, .cp_box *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_box {
	position: relative;
}
.cp_box label {
	position: absolute;
	z-index: 1;
	bottom: 0;
	width: 100%;
	height: 140px; /* グラデーションの高さ */
	cursor: pointer;
	text-align: center;
	/* 以下グラデーションは背景を自身のサイトに合わせて設定してください */
	background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 90%);
}
.cp_box input:checked + label {
	background: inherit; /* 開いた時にグラデーションを消す */
}
.cp_box label:after {
	line-height: 2.5rem;
	position: absolute;
	z-index: 2;
	bottom: 20px;
	left: 50%;
	width: 16rem;
	font-family: FontAwesome;
	content: '\f13a'' 続きをよむ';
	transform: translate(-50%, 0);
	letter-spacing: 0.05em;
	color: #ffffff;
	border-radius: 20px;
	background-color: rgba(27, 37, 56, 1);
}
.cp_box input {
	display: none;
}
.cp_box .cp_container {
	overflow: hidden;
	height: 250px; /* 開く前に見えている部分の高さ */
	transition: all 0.5s;
}
.cp_box input:checked + label {
	/* display: none ; 閉じるボタンを消す場合解放 */
}
.cp_box input:checked + label:after {
	font-family: FontAwesome;
	content: '\f139'' 閉じる';
}
.cp_box input:checked ~ .cp_container {
	height: auto;
	padding-bottom: 80px; /* 閉じるボタンのbottomからの位置 */
	transition: all 0.5s;
}

「続きを読む」ボタンを押したらピロっと下にテキストが出てくる

ニャン易度

ネコの定義

以下、本項では特記なき限りネコ=イエネコとして解説する。

<div class="cp_box">
	表示しておくテキスト
	<input id="cp00" type="checkbox">
	<label for="cp00">続きを読む</label>
	<div class="cp_container">
		続きを読むを押すと表示されるテキスト
	</div>
</div>

.cp_box *, .cp_box *:before, .cp_box *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_box {
	width: auto;
	margin: 2em auto;
}
.cp_box label {
	font-weight: bold;
	position: relative;
	display: block;
	width: 80%;
	margin: auto;
	padding: 0.3em 1em;
	cursor: pointer;
	transition: all 0.3s;
	text-align: center;
	color: #da3c41;
	border: 2px solid #da3c41;
	border-radius: 3px;
}
.cp_box label:hover {
	transition: all 0.3s;
	color: #ffffff;
	background: #da3c41;
}
.cp_box label::after {
	font-family: 'FontAwesome';
	content: ' \f067';
	color: #da3c41;
}
.cp_box label:hover::after {
	color: #ffffff;
}
.cp_box input:checked ~ label::after {
	font-family: 'FontAwesome';
	content: ' \f068';
	color: #da3c41;
}
.cp_box input:checked ~ label:hover::after {
	color: #ffffff;
}
.cp_box input {
	display: none;
}
.cp_box .cp_container {
	position: relative;
	z-index: 10;
	overflow: hidden;
	height: 0;
	margin-top: -1px;
	transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
	background: rgba(255, 255, 255, 0.5);
}
.cp_box input:checked ~ div {
	transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
}
/* 続きを読むを押すと表示されるテキストの高さ */
.cp_box input:checked ~ div.cp_container {
	height: 300px;
}