長い文章などの高さを制限して、クリックで表示したいときによく使われている「続きを読む」 「もっと見る」ボタンのサンプルです。
要素をグラデーションで隠して、ボタンをクリックすると全文が表示されるアレです。
UIが適切かはともかく、ページの高さを節約したいときや、別ページに移管させたくない時などに使えますね。
仕組は、チェックボックスを使用し、チェックされたら兄弟要素を表示状態にするというものになります。
ボタンのデザインを変える
イエネコの起源は、ネズミを捕獲させる目的で飼われ始めたヨーロッパヤマネコの家畜化であり、ヨーロッパヤマネコの亜種とされることもある。ヨーロッパヤマネコの学名をより記載の早いイエネコと同じFelis catusとする説もあったが、2003年にICZNの強権によりF.catusはイエネコのみを指す学名として、野生種の学名はF.silvestrisを引き続き使用することが認められた。
一方、広義の「ネコ」は、ネコ類（ネコ科動物）の一部、あるいはその全ての包括的分類を指し、家畜種のイエネコに加えて広義のヤマネコ類を含む。特に学術用語としては、英語の「cat」と同様、トラやライオンなどといった大型種を含む全てのネコ科動物を指すことがある。
学名（ラテン語名）「Felis silvestris catus（仮名転写：フェーリス・シルウェストリス・カトゥス）」の語義は「ネコ属、野生の、ネコ」である。これは、ヨーロッパヤマネコFelis silvestris（野生のネコの意）の中の「ネコという一群」との命名意図がある。
以下、本項では特記なき限りネコ=イエネコとして解説する。
<div class="cp_box1">
<input id="cp01" type="checkbox">
<label for="cp01"></label>
<div class="cp_container">
<h1>タイトル</h1>
<p>テキスト</p>
</div>
</div>.cp_box1 {
position: relative;
}
.cp_box1 input {
display: none;
}
/*開くためのボタンとテキストを隠すグラデーションの設定*/
.cp_box1 label {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
z-index: 1;
bottom: -10px;
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_box1 input:checked + label {
background: inherit;
}
.cp_box1 input:checked + label {
/* display: none ; 閉じるボタンを消す場合コメントアウトを外す */
}
.cp_box1 .cp_container {
overflow: hidden;
height: 250px; /* 開く前に見えている部分の高さ */
transition: all 0.5s;
}
/*続きをよむボタン*/
.cp_box1 label:after,
.cp_box1 label::before {
content: '';
position: absolute;
line-height: 2.5rem;
}
.cp_box1 label:after {
z-index: 2;
bottom: 20px;
width: 13em;
content: '続きをよむ';
color: #ffffff;
background: #1b2538;
border-radius: 20px;
}
.cp_box1 label::before {
position: absolute;
bottom: 38px;
left: calc(50% - 3.5em);
z-index: 3;
width: 10px;
height: 5px;
background: #ffffff;
clip-path: polygon(50% 100%, 0 0, 100% 0)
}
/*閉じるボタン*/
.cp_box1 input:checked + label:after {
content: '閉じる';
}
.cp_box1 input:checked + label:before {
left: calc(50% - 2.5em);
transform: scale(1, -1);
}
.cp_box1 input:checked ~ .cp_container {
height: auto;
padding-bottom: 80px; /* 閉じるボタンのbottomからの位置 */
transition: all 0.5s;
}
CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@CopypetJp More Info