コーディング授業 復習

今回は授業を休んでしまったので、授業動画を確認しながら勉強します!
こういう時、授業を録画していただけるので嬉しいです。
復習じゃなく初見になるので、noteにメモしながら動画を見ます。


・transformプロパティについて
変形させることができる。
①移動 ②回転 ③伸縮 ④傾斜
上記4つの設定ができる。
移動、回転、伸縮は、XYZ方向の指定が可能。

・指定できる関数
translate 移動 
rotate 回転
scale 伸縮
skew 傾斜 

コード例

.sec_icon {
  transform: rotateZ(45deg)
}

※傾斜角度の単位はdegで表す。

複数記述する場合

セレクタ名 {
   transform:translateX(20px) translateY(20px) rotate(40deg);
}

半角スペースを空けて続けて記述していく。

※半角スペースを空けて続けて記述していく。

誤った記述

セレクタ名 {
   transform:translateX(20px);
   transform:translateY(20px);
   transform:rotate(40deg);
}

この記述だと最後の部分しか反映されない。


・キーフレームアニメーションとは
一連の動きを一つのアニメーションとして設定できる。

コード例

@keyframes slide {
 0% {
   transform: translateX(-100px)
}
 
 100% {
   transform: translateX(100px)
 }
}

−100pxの位置から始まり、100pxまで移動する。
※slideの箇所は自分の好きな文字で良い。

実際に適用させたいところにこのCSSを当てていく。

セレクタ名 {
 animation-name: slide;
 animation-duration: 1s;
 animation-iteration-count: infinite;
 animation-timing-function: linear;
 animation-direction: alternate-reverse;
}

・animation-name
あらかじめ付けた名前。

・animation-duration
何秒かけて0〜100%までアニメーションするか。

・animation-iteration-count
アニメーションを何回繰り返すか。
※infiniteは連続で繰り返し

・animation-timing-function
linear
で一定のスピードで動かす。

・animation-direction
alternate-reverse
で行ったり来たりできる。


【Animate.css】の使い方
Animate.cssとは色んなアニメーションを既に作成してくれているサイトの一つ。
使い方の参考↓
https://naruhodo.repop.jp/animate-css/


・jQueryとは
JavaScript
をより扱いやすくしたファイルのこと。
JavaScriptで書くと何十行にもなる記述が、jQueryを使用すると、ほんの数行で済んでしまうこともある。

<使い方>
①まず、ブラケッツでjsフォルダを作成する。
②ファイルを新規作成(⌘+N)
③作成したファイルを新規保存で、①で作成したjsフォルダに保存する。
④jQueryのセットを読み込む
※その際verを確認すること!1つのverしか読み込まない!
⑤<head>の中に、以下を読み込む

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="js/script.js"></script>

CSSは、linkタグのhrefで読み込む。
JSは、scriptタグのsrcで読み込む。

<書き方>

$(function(){
 
});

$(function(){});
この形を作って、{}の間でenterで改行。

<例>

$(function(){
 $(".profile_name").click(function(){
   $(".profile_text").slideToggle();
 });
})

上の表記だと、profile_nameをクリックした時に、profile_textがスライドで出てくる。
Toggleは、交互にするということ。


【ハンバーガーメニューを作成する】

① まず、CSSで形を作っていく。
ハンバーガーの形とそれを押した時に現れる中身の作成

スクリーンショット 2020-01-16 13.15.25

上の形を作成していく。

⑴ ハンバーガーメニューの形
HTML↓

<div class="header_navbtn"><span></span><span></span><span></span></div>

<span>を3つ作る。

CSS↓

.header_navbtn {
   width: 36px;
}

.header_navbtn span {
   display: block;
   background: #333;
   width: 100%;
   height: 3px;
 }

.header_navbtn span + span {
   margin-top: 8px;
 }

⒈ ハンバーガー自体の横幅を決める。
⒉ spanはinlineの性質なので、blockに変更
⒊ ハンバーガーの1本の線の横幅と高さを指定
・⒈ で決めた幅と同じ大きさにしたので、横幅は100%で指定

⒋ この時点では、3つの線が重なっているので、marginで間を空ける。
 ・1番上の線は動かしたくないので、それ以外にCSSを当てる
 ・上の理由は、最終的にロゴと垂直方向を中央揃えにしたいため
(1番上のmargin-topも取ってしまうと、箱自体の大きさが上に大きくなり、揃えた時にズレてしまう)


⑵ 中身の作成はだいたい分かるので割愛。


② 次にハンバーガーメニューをクリックしたら、中身が現れるようにする。
⑴ まずJSを書く。

 JSコード↓

$(".header_navbtn").click(function(){
   $(".header_nav").toggleClass("active");
 });

上の意味は、
header_navbtnをクリックしたら
header_navに対して、activeというクラスが
toggleClass(付いたり外れたり)する
ということ。

CSSコード↓

.header_nav {
   background: rgba(12, 168, 207, 0.74);
   width: 100%;
   position: absolute;
   top: 100%;
   left: 100%;
   transition: 0.3s;
 }

 .header_nav.active {
   left: 0;
 }

開いた時は、activeがついていない状態から始まる。
つまり、最初の段階では隠れていて欲しいので
left: 100%で画面から出す。

.header_nav.active {
 left: 0;
}
これは、header_navというクラス名かつactiveというクラス名が付いた時に、効くということ。
activeが付いた時だけ、上のheader_navのCSSをleft: 0で上書きする。


③ ハンバーガーをクリックしたら✖️になるようにする

JSコード↓

$(".header_navbtn").click(function(){
   $(".header_nav").toggleClass("active");
   $(".header_navbtn").toggleClass("active");
 });

さっきと同じ箇所に、$(".header_navbtn").toggleClass("active");を足す。
こうすることで、header_navbtnをクリックしたら
header_navとheader_navbtnの両方に当てれる。


CSSコード↓

.header_navbtn.active span:nth-child(1) {
   transform: translateY(10px) rotate(45deg);
 }
 
 .header_navbtn.active span:nth-child(2) {
   opacity: 0;
 }
 
 .header_navbtn.active span:nth-child(3) {
   transform: translateY(-10px) rotate(-45deg);
 }

まず
.header_navbtn.active span:nth-child(2) {
 opacity: 0;
}
で、クリックした時に真ん中の線を消すようにコードを書く。
nth-childで2つ目のという意味。

次に、
.header_navbtn.active span:nth-child(1) {
 transform: translateY(10px) rotate(45deg);
}
で、1本目の線にクリックしたら、10px下の箇所を軸に45度回転を加える。

最後に、
nth-childの数字を3に、translateYとrotateを逆にするためにーを付ける。


以上でハンバーガーメニューの完成!




脳内爆発しました!!!!
サヨナラ。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

銀行員からWEBデザイナーになるため勉強中!勉強記録だったり、読んだ本の書評なども書いていければなと思います!