コーディング授業 復習
今回は授業を休んでしまったので、授業動画を確認しながら勉強します！
こういう時、授業を録画していただけるので嬉しいです。
復習じゃなく初見になるので、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
何秒かけて０〜１００％までアニメーションするか。
・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で形を作っていく。
ハンバーガーの形とそれを押した時に現れる中身の作成
上の形を作成していく。
⑴ ハンバーガーメニューの形
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を逆にするためにーを付ける。
以上でハンバーガーメニューの完成！
脳内爆発しました！！！！
サヨナラ。
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか？