【css】 CSS（detailsとsummary）だけでつくるアコーディオンの実装 javascriptなし
detailesタグとsummaryタグ
以下のHTMLコードだけで、アコーディオンが実装されます。便利になりました。しかし、これだけでは味気ないので、CSSで装飾したいと思います。
<details>
<summary>ここをクリック！</summary>
<div>こんにちは！！！</div>
</details>
javascriptでつくるならこちら
CSSでカッコよく
以下のように実装しました。CSSで装飾すれば、いろいろな効果を楽しめます。以下、ポイントだけ紹介します。
HTML
<details>
<summary class="html">CSS</summary>
<div class="codeWrapper">
<pre class="line-numbers"><code class="language-html"> </code></pre>
</div>
</details>CSS
details{
height: 10px;
margin-bottom: 100px;
transition: all .5s ease;
}
summary{
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 40px;
padding-top: 5px;
padding-left: 30px;
color: #fff;
text-shadow: 1px 1px 1px black;
font-size: 1.5em;
font-weight: bold;
transition: all .3s ease;
cursor: pointer;
}
.html{
background: rgb(255, 157, 0);
}
.html:hover{
background: rgb(165, 102, 0);
}
.css{
background: rgb(0, 162, 255);
}
.css:hover{
background: rgb(0, 100, 158);
}
.js{
background: rgb(255, 251, 0);
}
.js:hover{
background: rgb(177, 150, 0);
}
summary::after{
content: '+';
position: absolute;
right: 20px;
transition: all .3s ease;
}
details[open] summary::after{
transform: rotate(45deg);
}
details[open] {
height: 300px;
}
details[open] .codeWrapper{
overflow: auto;
animation: ani 1s ;
}
@keyframes ani {
0%{
opacity: 0;
transform: translateY(-20px);
}
100%{
opacity: 1;
transform: none;
}
}javascript
const summary = document.querySelector("summary");
summary.addEventListener("click", ()=>{
summary.classList.toggle("active")
})detailesタグ
details {
height: 10px;
transition: all 0.5s ease; /* 動きをなめらかに */
}
details[open] { /* クリックしたとき */
height: 300px; /* 高さはお好みで */
}summaryの疑似要素で「＋」
summary::after { /* 最初の状態 */
content: "+";
position: absolute;
right: 20px;
transition: all 0.3s ease;
}
details[open] summary::after { /* クリックしたときに「+」⇒「×」 */
transform: rotate(45deg);
}クリックしたら、ふわっと表示させる
details[open] .codeWrapper { /* クリックしたら表示される要素 */
overflow: auto;
animation: ani 1s; /* アニメーションの指定 */
}
@keyframes ani {
0% {
opacity: 0; /* 最初は見えない状態 */
transform: translateY(-20px); /* 20px上にずらしておく */
}
100% {
opacity: 1; /* 1秒後に見えるように */
transform: none; /* 20pxずらしたものを取り除く */
}
}
detailsタグとsummaryタグでアコーディオンの実装ができる。
transitionやanimationにより、動きをつける
summaryの疑似要素で「＋」「×」を表現
こんな記事も読まれています。
-
【CSS】box-sizing: border-boxとは？指定するメリットは？
CSSのbox-sizing: border-boxについて解説します。指定することによりレイアウトしやすくなります。また、親要素からはみ出すことも防げます。
-
【CSS】box-sizing: border-boxとは？指定するメリットは？
CSSのflexboxで上下左右、中央の配置の方法について説明します。justify-contentで左右の配置を、align-itemsで上下の配置を決めます。flex-start,center,flex-endの使い方。
- リンク
-
【CSS】transformのrotateとtransform-originについて。回転させる基点を変える
CSSのrotateについて解説します。指定によりZ軸、X軸、Y軸で回転させます。またtarnsform-originを指定することにより、回転する基点を移動させることができます。
-
【CSS】filterの使い方 画像をぼかしたり、色の変化を適用させる
【CSS】filterの使い方について解説します。画像をぼかしたり、色の変化を適用させるには？ brightness、contrast、drop-shadow、grayscale、hue-rotate、invert、saturate、sepiaの設定方法
- リンク
-
【CSS】perspective と transform-style で3D表現。立方体を作ってみよう。
CSSのperspectiveとtransform-styleについて解説します。CSSだけで３Dを表現できます。立方体をつくり、それを応用する方法も紹介します。
-
【CSS】animation パート2 アニメーションの動き（time-function）,遅延時間（delay）,方向（direction）について
【CSS】animation のアニメーションの動き（time-function）,遅延時間（delay）,方向（direction）について解説します。。
- リンク
-
【css】grid-templateでtwitter風に画像を表示させる方法
grid-templateを使えば、画像を思い通りに配置できます。twitter風に画像を表現することができます。
-
リンク
-
【CSS】マウスを乗せた（ホバーした）時、サムネイル画像を拡大・縮小する方法
CSSでマウスをホバーした時、サムネイル画像を拡大・縮小する方法。overflow: hiddenやtransform: scale();を使い、拡大、縮小させます。
