コーディング 授業復習
前回作成したハンバーガーメニューはPCの大きさにした時、目には見えないが、header_navの左に存在している。
HTMLで書く順番を変えるとレイアウトが崩れる場合があるので、
⒈一旦メディアクエリの上でdisplay: none;をしておく。
⒉レスポンシブでdisplay: none;を上書きするために、レスポンシブ対応のCSSにdisplay: block;をかけておく。
コードの場所が分からない時は、⌘+Fで探せる。
<jQueryを使う時の注意点>
・読み込む場所
今回は<head>の中で読み込みをしたが、</body>の直前に読み込ませることを推奨していることもある。
JSはHTMLやCSSと比べて重いので、<head>の中に書くとHTML等の記述を読み込む前にJSをひたすら読み込んでいることがある。→サイトが真っ白な状態で待たせている。
先に表示できるものは表示させてからJSを読み込む方がいいと言う考え。
・読み込む順番
jQueryと自分で書いたJSの順番を間違えない。
今回書いたJSはjQueryありきのコードなので、jQueryの本体を先に読み込む必要がある。
※JavaScriptの記述はどこに書いてもいい。
jQueryのサイトのサーバーからファイルを読み込んでも、自分でダウンロードして来て、ファイルに読み込んでもいい。
<サーバーから読み込む場合=CDN>
提供しているサーバー自体がサービスの提供を辞めてしまうと効かなくなる。
<自分のサイトに置く場合>
手間がかかる。サイトが少し重くなる。
納品する場合はこっちのやり方の方がいいかも。
⚫︎方法
新規ファイルに適当な名前を付けて、コピペする。
そのファイルをHTMLで読み込む。
前回作成したハンバーガーメニューはleft100%から0にする動きをclassを付けたり外したりすることで実装したけど、それをjQueryだけで実装することもできる。
left0にして、予め見える状態にする。
JSでtoggleClassにしていた箇所を
slideToggleに変更し、クラス名を消す。()は必要。
※その際transitionは消す。
この()の中に、
slideToggle(1000);
このように表記すると、1秒でスライドする。(transitionのような)
このやり方は、display: none;とdisplay: block;で表示非表示を切り替えている。+動き
最初にnavが出ている状態なので、display: none;をnavに当てると初期で消える。
ただ、このままじゃ無理。
この辺りまだしっかり理解できないので、もっと勉強する←宣言
※コーディング応用2日目(1本目の動画32分あたり)
<同じページ上で、違う箇所に飛ばす方法>
まず、飛ばしたい場所にid(名前)を付ける。
<section class="works sec inner" id="works">
クラス名が当たっててもidは付けれる。
・classとidの違い
classは同じタグに、複数付けていい。
他のタグに使ってもいい。
idは1タグに1つだけ。
上のコードだとid="works"はここだけしか使えない。
飛ばす箇所には、#idを当てる。
・プラグインとは
プラグインとはjQueryの拡張機能で、さまざまな種類かつ、膨大な量のプラグインが公開されており(自作も可能)、基本的にはjQueryを使えるようにしておけば、容易に導入/カスタマイズすることが可能。
有名なものを使う方が解説記事などが多いので初心者は楽。
<スライダー付け方>
今回はスリックスライダーの使い方
参考サイト↓
https://stand-4u.com/web/javascript/slick.html
「slick.js」「slick.css」の2つを自分のフォルダに読み込ませる。
それぞれCSSとJSのファイルへ別々にいれる。
slick.lsを使う場合は、別のファイルに書くか、HTML上に書いた方がいい。
→エラーが出るから。理由はちゃんと調べる。
<アコーディオンメニューの作り方>
参考↓
https://www.jungleocean.com/programming/180618jquery-accordion#outline__1
こうやって、noteに記録してても実際よくわかってないこと多すぎて、、、
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか?