コーディング　授業復習

2020年1月19日 17:24

前回作成したハンバーガーメニューは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に記録してても実際よくわかってないこと多すぎて、、、

この記事が気に入ったらサポートをしてみませんか？

コーディング 授業復習

コーディング　授業復習