【覚えておきたい】HTML CSS Javscriptのチップ集

様々なコンポーネントを開発するにあたってのサンプルレシピを記載します。
※この記事は、随時更新します。

# トグルスイッチについて
(完成イメージ)
![トグル.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/fe3399a6-9c6d-ff60-48a1-1d07207e887c.jpeg)



```Index.html
<div class="switch_outer_1">
  <div class="toggle_switch_1"></div>
</div>

<div class="switch_outer_2">
    <div class="toggle_switch_2"></div>
</div>

```
```Index.css
.switch_outer_1 {
    width: 105px;/*120px*/
    height: 50px;/*60px*/
    background-color: lightgrey;
    border-radius: 10px;/*四隅の枠*/
    position: relative;
    cursor: pointer;
    transition: background-color .3s ease-in-out;/*切り替えの安海メーション*/
}
.switch_outer_1.active {
    background-color: blue;
}
/*トグル内の設定*/
.toggle_switch_1 {
    width: 35px;/*50px*/
    height: 40px;/*50px*/
    border-radius: 50%;
    position: absolute;
    background-color: white;
    top: 0;
    bottom: 0;
    left: 5px;
    margin: auto;
    box-shadow: 1px 1px 7px #B7B7B7, -1px -1px 4px #CECECE inset;
    transition: left .3s ease-in-out;
}
.toggle_switch_1.active {
    left: 65px;
}


/*No.2*/
/*トグル内の設定*/
.switch_outer_2 {
    width: 105px;/*120px*/
    height: 50px;/*60px*/
    background-color: lightgrey;
    border-radius: 10px;/*四隅の枠*/
    position: relative;
    cursor: pointer;
    transition: background-color .3s ease-in-out;/*切り替えの安海メーション*/
}
.switch_outer_2.active {
    background-color: blue;
}
.toggle_switch_2 {
    width: 35px;/*50px*/
    height: 40px;/*50px*/
    border-radius: 50%;
    position: absolute;
    background-color: white;
    top: 0;
    bottom: 0;
    left: 5px;
    margin: auto;
    box-shadow: 1px 1px 7px #B7B7B7, -1px -1px 4px #CECECE inset;
    transition: left .3s ease-in-out;
}
.toggle_switch_2.active {
    left: 65px;
}

```

## Transitionプロパティのアニメーションについて

transition: アニメーションさせたいプロパティ名 秒数 アニメーションの種類
【書き方例】
transition: background-color .3s ease-in-out
■linear（アニメーションの開始から終了まで等速にするアニメーション）
■ease-in-out（徐々に加速し、最後はスピードが緩まるアニメーション）

```Index.js
//スイッチの外枠とスイッチそれぞれの各要素を取得する
const switchOuter = document.querySelector(".switch_outer_1");
const toggleSwitch = document.querySelector(".toggle_switch_1");

const switchOuter2 = document.querySelector(".switch_outer_2");
const toggleSwitch2 = document.querySelector(".toggle_switch_2");

//クリックイベントでacitveクラスを追加/削除する処理
switchOuter.addEventListener("click", () => {
    switchOuter.classList.toggle("active");
    toggleSwitch.classList.toggle("active");
});
switchOuter2.addEventListener("click", () => {
    switchOuter2.classList.toggle("active");
    toggleSwitch2.classList.toggle("active");
});
```
# ナビゲーションバーのアコーディオンの動的制御
<b>【完成イメージ】</b>

<b>(Before)</b>
![before.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/449bf033-35b3-37f5-c78f-ab0f8aa719f2.jpeg)

<b>(after)</b>

![after.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/89eccff5-b43e-90cc-c781-051a6adc5757.jpeg)


<b>■使用したjQueryのバージョン</b>
version 3.7.1

<b>■参考にしたサイト</b>
125naroom:【CSS】三角アイコンと矢印アイコンをつくる

```index.html
<!DOCTYPE html>
<html>
    <head>
        <meata charset="UTF-8"/>
        <title>アコーディオン</title>
        <!--jqueryyomikomi -->
        <script type="text/javascript" src="./jquery_v3.7.1.js"></script>
        <link rel="stylesheet" href="./index.css" />
        <script type="text/javascript" src="./index.js"></script>
    </head>
    <body>       <!-- トリガーの部分 -->
        <div class="header">
            <div class="nav-open">
                <a href="#" class="arrow_u"></a>
                <span>ナビゲーションメニューの開閉</span>
            </div>       
            <!-- ナビゲーションメニュー項目 -->
            <nav>
                <ul>
                    <li>
                        <a href="#">ラベル1</a>
                        <label>ラベル1</label>
                    </li>
                    <li>
                        <a href="#">ラベル2</a>
                        <label>ラベル2</label>
                    </li>
                    <br/>
                    <li>
                        <a href="#">ラベル3</a>
                        <label>ラベル3</label>
                    </li>

                </ul>
            </nav>
        </div>
    </body>
</html>

```

```index.css
/*三角アイコン*/
body{
	font-family:'メイリオ', 'Meiryo';
}

/*ナビゲーションタグの設定*/
nav{ 
	display: none;
}

.nav-open{
	padding: 15px;
	color: white;
	font-size: 20px;
	background:blue;
	position: relative;
}

ul li{
	display: inline-block;/*liタグを横並び*/
}
/*ナビゲーションバーの矢印の設定*/
.arrow_u {
	position: relative;
	display: inline-block;
	padding-left: 20px;
	color: white;
	text-decoration: none;
}
/*ナビゲーションメニューが閉じている場合は、下向き矢印を表示*/
.nav-open .arrow_u::before {
content: '';
width: 6px;
height: 6px;
border: 0;
border-bottom: solid 6px white;/*下矢印の色設定 solid 2px #333*/
border-right: solid 6px white;/*下矢印の色設定solid 2px #333*/
position: absolute;
top: 50%;
left: 0;
margin-top: -6px;
transform: rotate(45deg);
}

/*ナビゲーションメニューが開いている場合は、上向き矢印を表示*/
.nav-open.active .arrow_u::before {
	content: '';
	width: 6px;
	height: 6px;
	border: 0;
	border-bottom: solid 6px white;/*上矢印の色設定solid 2px #333*/
	border-right: solid 6px white;/*上矢印の色設定solid 2px #333*/
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -6px;
	transform: rotate(220deg);
}


/*---不要な部分---*/
/*
.nav-open::before{
	content: "▲";
	position: absolute;
	left: 20px;
}

.nav-open.active::before{
	content: "▲";
}
*/

```

```index.js
$(document).ready(function(){
    accordionBtnClick();
});

function accordionBtnClick(){
        //クリックで動く
    $('.nav-open').click(function(){
        $(this).toggleClass('active');
        $(this).next('nav').slideToggle();
    });
}

/*
    $(function(){
		//クリックで動く
		$('.nav-open').click(function(){
			$(this).toggleClass('active');
			$(this).next('nav').slideToggle();
		});
		//ホバーで動く
		$('.nav-open').hover(function(){
			$(this).toggleClass('active');
			$(this).next('nav').slideToggle();
		});
	});
*/
```