こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
<目次>
実装するもの
FAQアプリのToggle開閉画面をCSSでスタイリングします。
demoは「こちら」で確認できます。
JavaScript版
ワークスペース
必要なファイルは、以下の通りです。
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
HTML&JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" /> <link rel="stylesheet" href="style.css" /> <title>FAQ</title> </head> <body> <h1>Frequently Asked Questions</h1> <div class="faq-container"> <div class="faq active"> <h3 class="faq-title"> Why shouldn't we trust atoms? </h3> <p class="faq-text"> They make up everything </p> <button class="faq-toggle"> <i class="fas fa-chevron-down"></i> <i class="fas fa-times"></i> </button> </div> <div class="faq"> <h3 class="faq-title"> What do you call someone with no body and no nose? </h3> <p class="faq-text"> Nobody knows. </p> <button class="faq-toggle"> <i class="fas fa-chevron-down"></i> <i class="fas fa-times"></i> </button> </div> <div class="faq"> <h3 class="faq-title"> What's the object-oriented way to become wealthy? </h3> <p class="faq-text"> Inheritance. </p> <button class="faq-toggle"> <i class="fas fa-chevron-down"></i> <i class="fas fa-times"></i> </button> </div> <div class="faq"> <h3 class="faq-title"> How many tickles does it take to tickle an octopus? </h3> <p class="faq-text"> Ten-tickles! </p> <button class="faq-toggle"> <i class="fas fa-chevron-down"></i> <i class="fas fa-times"></i> </button> </div> <div class="faq"> <h3 class="faq-title"> What is: 1 + 1? </h3> <p class="faq-text"> Depends on who are you asking. </p> <button class="faq-toggle"> <i class="fas fa-chevron-down"></i> <i class="fas fa-times"></i> </button> </div> </div> <script src="script.js"></script> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 |
// 要素を取得する const toggles = document.querySelectorAll('.faq-toggle') // 取得したtoggle要素をループで回す toggles.forEach(toggle => { // クリックイベントを登録 toggle.addEventListener('click', () => { // 親要素へactiveクラスを付与する toggle.parentNode.classList.toggle('active') }) }) |
このHTMLをブラウザ上で表示すると以下のようになります。

スタイリング
スタイリングを始めます。項目に出てくるbodyやh1はHTMLに設定した要素です。
全体の設定
全体の設定を行います。
1 2 3 4 5 6 7 8 |
/* フォント */ @import url("https://fonts.googleapis.com/css?family=Muli&display=swap"); * { /* ボックスの大きさの算出方法を指定 paddingとborderをwidthとheightに含める */ box-sizing: border-box; } |
body
bodyのスタイリングをします。
1 2 3 4 |
body { font-family: "Muli", sans-serif; background-color: #f0f0f0; } |

h1
h1のスタイリングをします。
1 2 3 4 5 |
h1 { /* 上 | 左右 | 下 */ margin: 50px 0 30px; text-align: center; } |

faq-container
faq-containerのスタイリングをします。
1 2 3 4 5 |
.faq-container { max-width: 600px; /* 上下 | 左右 */ margin: 0 auto; } |

faq
faqのスタイリングをします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.faq { background-color: transparent; /* 枠線 */ border: 1px solid #9fa4a8; /* 角を丸く */ border-radius: 10px; /* 上下 | 左右 */ margin: 20px 0; padding: 30px; /* アイテム位置の起点 */ position: relative; /* はみ出た要素は非表示 */ overflow: hidden; /* アニメーション */ transition: 0.3s ease; } |

faq-title
faq-titleのスタイリングをします。
1 2 3 4 |
.faq-title { /* 上 | 右 | 下 | 左 */ margin: 0 35px 0 0; } |

faq-text
faq-textのスタイリングをします。
1 2 3 4 5 6 |
.faq-text { /* text非表示 */ display: none; /* 上 | 左右 | 下 */ margin: 30px 0 0; } |

faq-toggle
faq-toggleのスタイリングをします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
.faq-toggle { background-color: transparent; /* 枠線なし */ border: 0; /* 角を丸く */ border-radius: 50%; /* カーソルをポインタへ */ cursor: pointer; /* flexアイテムにする */ display: flex; /* flex重点の真ん中に配置 */ align-items: center; /* 横軸真ん中に配置 */ justify-content: center; font-size: 16px; padding: 0; height: 30px; width: 30px; /* relativeから見て絶対値を定義 */ position: absolute; /* 上部 */ top: 30px; /* 右部 */ right: 30px; } /* toggleボタンが押された時 */ .faq-toggle:focus { /* 青線を非表示 */ outline: 0; } |

fa-times
fa-timesのスタイリングをします。
1 2 3 |
.faq-toggle .fa-times { display: none; } |

active
activeのスタイリングをします。activeは、JavaScriptで制御するクラスです。
1 2 3 4 5 |
.faq.active { background-color: #fff; /* ボックスの影 */ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1); } |

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.faq.active::before, .faq.active::after { content: "\f075"; font-family: "Font Awesome 5 Free"; color: #2ecc71; font-size: 7rem; position: absolute; opacity: 0.2; top: 20px; left: 20px; z-index: 0; } .faq.active::before { color: #3498db; top: -10px; left: -30px; /* アイテムの位置を変更 */ transform: rotateY(180deg); } |

1 2 3 4 |
.faq.active .faq-text { /* inline->block要素にする */ display: block; } |

1 2 3 4 5 6 7 8 9 10 11 12 |
.faq.active .faq-toggle .fa-times { color: #fff; display: block; } .faq.active .faq-toggle .fa-chevron-down { display: none; } .faq.active .faq-toggle { background-color: #9fa4a8; } |

これで、完成です。
おわりに
要素の表示・非表示の切り替えは、JavaScriptにて「active」クラスをtoggleすることで可能にしています。
このようなJavaScript+CSSのコンボは現場でもよく使われるので、この機会に慣れていきましょう^^
それでは、また!
CSSまとめ
CSSソースコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
/* フォント */ @import url("https://fonts.googleapis.com/css?family=Muli&display=swap"); * { /* ボックスの大きさの算出方法を指定 paddingとborderをwidthとheightに含める */ box-sizing: border-box; } body { font-family: "Muli", sans-serif; background-color: #f0f0f0; } h1 { /* 上 | 左右 | 下 */ margin: 50px 0 30px; text-align: center; } .faq-container { max-width: 600px; /* 上下 | 左右 */ margin: 0 auto; } .faq { background-color: transparent; /* 枠線 */ border: 1px solid #9fa4a8; /* 角を丸く */ border-radius: 10px; /* 上下 | 左右 */ margin: 20px 0; padding: 30px; /* アイテム位置の起点 */ position: relative; /* はみ出た要素は非表示 */ overflow: hidden; /* アニメーション */ transition: 0.3s ease; } .faq-title { /* 上 | 右 | 下 | 左 */ margin: 0 35px 0 0; } .faq-text { /* text非表示 */ display: none; /* 上 | 左右 | 下 */ margin: 30px 0 0; } .faq-toggle { background-color: transparent; /* 枠線なし */ border: 0; /* 角を丸く */ border-radius: 50%; /* カーソルをポインタへ */ cursor: pointer; /* flexアイテムにする */ display: flex; /* flex重点の真ん中に配置 */ align-items: center; /* 横軸真ん中に配置 */ justify-content: center; font-size: 16px; padding: 0; height: 30px; width: 30px; /* relativeから見て絶対値を定義 */ position: absolute; /* 上部 */ top: 30px; /* 右部 */ right: 30px; } /* toggleボタンが押された時 */ .faq-toggle:focus { /* 青線を非表示 */ outline: 0; } .faq-toggle .fa-times { display: none; } .faq.active { background-color: #fff; /* ボックスの影 */ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1); } .faq.active::before, .faq.active::after { content: "\f075"; font-family: "Font Awesome 5 Free"; color: #2ecc71; font-size: 7rem; position: absolute; opacity: 0.2; top: 20px; left: 20px; z-index: 0; } .faq.active::before { color: #3498db; top: -10px; left: -30px; /* アイテムの位置を変更 */ transform: rotateY(180deg); } .faq.active .faq-text { /* inline->block要素にする */ display: block; } .faq.active .faq-toggle .fa-times { color: #fff; display: block; } .faq.active .faq-toggle .fa-chevron-down { display: none; } .faq.active .faq-toggle { background-color: #9fa4a8; } |
コメントを残す
コメントを投稿するにはログインしてください。