CSSでToggle開閉画面のスタイリングをしよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

<目次>

実装するもの

FAQアプリのToggle開閉画面をCSSでスタイリングします。

demoは「こちら」で確認できます。

JavaScript版

JavaScriptでToggleボタンの開閉処理を実装しよう!

ワークスペース

必要なファイルは、以下の通りです。

$ tree
.
├── index.html
├── script.js
└── style.css

$ tree

├── index.html

├── script.js

└── style.css

HTML&JavaScript

<!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>

<!DOCTYPE html>

<head>

</head>

<body>

<h1>Frequently Asked Questions</h1>

Why shouldn't we trust atoms?

</h3>

They make up everything

</p>

</button>

</div>

What do you call someone with no body and no nose?

</h3>

Nobody knows.

</p>

</button>

</div>

What's the object-oriented way to become wealthy?

</h3>

Inheritance.

</p>

</button>

</div>

How many tickles does it take to tickle an octopus?

</h3>

Ten-tickles!

</p>

</button>

</div>

What is: 1 + 1?

</h3>

Depends on who are you asking.

</p>

</button>

</div>

</body>

</html>

// 要素を取得する
const toggles = document.querySelectorAll('.faq-toggle')

// 取得したtoggle要素をループで回す
toggles.forEach(toggle => {
  // クリックイベントを登録
  toggle.addEventListener('click', () => {
    // 親要素へactiveクラスを付与する
    toggle.parentNode.classList.toggle('active')
  })
})

// 要素を取得する

const toggles = document.querySelectorAll('.faq-toggle')

// 取得したtoggle要素をループで回す

toggles.forEach(toggle => {

// クリックイベントを登録

toggle.addEventListener('click', () => {

// 親要素へactiveクラスを付与する

toggle.parentNode.classList.toggle('active')

})

このHTMLをブラウザ上で表示すると以下のようになります。

スタイリング

スタイリングを始めます。項目に出てくるbodyやh1はHTMLに設定した要素です。

全体の設定

全体の設定を行います。

/* フォント */
@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");

* {
  /* ボックスの大きさの算出方法を指定
  paddingとborderをwidthとheightに含める */
  box-sizing: border-box;
}

/* フォント */

@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");

* {

/* ボックスの大きさの算出方法を指定

paddingとborderをwidthとheightに含める */

box-sizing: border-box;

}

body

bodyのスタイリングをします。

body {
  font-family: "Muli", sans-serif;
  background-color: #f0f0f0;
}

body {

font-family: "Muli", sans-serif;

background-color: #f0f0f0;

}

h1

h1のスタイリングをします。

h1 {
  /* 上 | 左右 | 下 */
  margin: 50px 0 30px;
  text-align: center;
}

h1 {

/* 上 | 左右 | 下 */

margin: 50px 0 30px;

text-align: center;

}

faq-container

faq-containerのスタイリングをします。

.faq-container {
  max-width: 600px;
  /* 上下 | 左右 */
  margin: 0 auto;
}

.faq-container {

max-width: 600px;

/* 上下 | 左右 */

margin: 0 auto;

}

faq

faqのスタイリングをします。

.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 {

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のスタイリングをします。

.faq-title {
  /* 上 | 右 | 下 | 左 */
  margin: 0 35px 0 0;
}

.faq-title {

/* 上 | 右 | 下 | 左 */

margin: 0 35px 0 0;

}

faq-text

faq-textのスタイリングをします。

.faq-text {
  /* text非表示 */
  display: none;
  /* 上 | 左右 | 下 */
  margin: 30px 0 0;
}

.faq-text {

/* text非表示 */

display: none;

/* 上 | 左右 | 下 */

margin: 30px 0 0;

}

faq-toggle

faq-toggleのスタイリングをします。

.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 {

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のスタイリングをします。

.faq-toggle .fa-times {
  display: none;
}

.faq-toggle .fa-times {

display: none;

}

active

activeのスタイリングをします。activeは、JavaScriptで制御するクラスです。

.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 {

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::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-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;
}

.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学習記事まとめ

CSSソースコード

/* フォント */
@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;
}

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;

}

CSSでToggle開閉画面のスタイリングをしよう!

実装するもの

JavaScript版

ワークスペース

HTML&JavaScript

スタイリング

全体の設定

body

h1

faq-container

faq

faq-title

faq-text

faq-toggle

fa-times

active

おわりに

CSSまとめ

CSSソースコード

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

2021年3月
月	火	水	木	金	土	日
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

実装するもの

JavaScript版

ワークスペース

HTML&JavaScript

スタイリング

全体の設定

body

h1

faq-container

faq

faq-title

faq-text

faq-toggle

fa-times

active

おわりに

CSSまとめ

CSSソースコード

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

Django開発~ブログ構築編2~投稿フォーム

[Go言語]Factoryパターン~後編~

Go言語とVue.jsで作るユーザー認証アプリ~バックエンド開発編Vol4~

[golang]goroutineの使い所2 ~ ファイル操作 ~

CSSでKeyCode画面のスタイリングを実装する

[小技/初心者向け]GolangでClosureを実装しよう~Sampleあ…

JavaScriptでTMDB APIを使ったMovieアプリを作ろう!

Go言語とPostgreSQLで遊ぼう!~Unit Test編~

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル