カテゴリー: 未分類

　長いリストのうしろのほうを隠しておき、ボタンが押されたら開くようにします。

　↓ボタンが押されると展開します。

HTML

<div class="cp_box">

	<input id="cp01" type="checkbox">

	<label for="cp01"></label>

	<div class="cp_container">

		<p>0000/00/00（日）<br>いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす</p>

		/* ここに複数行を書く */

		<p>0000/00/00（日）<br>いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす</p>

	</div>

</div>

CSS

.cp_box label {

	z-index: 1;

	position: absolute;

	bottom: 0;

	width: 100%;  /* グラデーションの幅 */

	height: 6em;  /* グラデーションの高さ */

	cursor: pointer;

	text-align: center;  /* ボタン内の文字の位置 */

	background: linear-gradient(to bottom, #FFFFFF00 0%, #FFFFFFFF 100%);  /* 背景をサイトに合わせる */

}

.cp_box input:checked + label:after {

	content: '閉じる';  /* ボタンの名前（開いたとき） */

}

.cp_box label:after {

	z-index: 2;

	content: '続きをよむ';  /* ボタンの名前（閉じたとき） */

	position: absolute;

	line-height: 2.5em;  /* ボタンの高さ */

	bottom: 0;

	left: 50%;

	width: 16em;

	transform: translate(-50%, 0);

	letter-spacing: 0.05em;

	border-radius: 20px;

	color: #FFFFFF;  /* ボタンの文字色 */

	background: #5AA25A;  /* ボタンの背景色 */

}

.cp_box {

	position: relative;  /* ボタンの位置を内容にあわせる */

}

.cp_box input:checked + label {

	background: inherit;  /* 開いた時にグラデーションを消す */

}

.cp_box input {

	display: none;

}

.cp_box .cp_container {

	overflow: hidden;  /* 閉じているときに下の部分を隠す */

	height: 20em;  /* 閉じているときの高さ */

}

.cp_box input:checked ~ .cp_container {

	height: auto;  /* 開いたり閉じたりするときに高さが変更されるようにする */

	padding-bottom: 2.5em;  /* 閉じるボタンを下へ調整 */

}