Design
Coding
Setting
jQueryとは
05:04実用的なjQueryのコーディング
- ハンバーガーメニュー
- スクロールトップ
今回のステップでは、実用的でよく使われる jQuery のコーディングを2つ説明します。
これらはWebサイトをコーディングする上で頻繁に使われるため、しっかりと学んでいきましょう。
- ハンバーガーメニュー
スマートフォンやタブレット向けのナビゲーションメニューで、ボタンをクリックするとメニューが開閉する仕組みです。 - スクロールトップ
ページの下部から素早くトップへ戻るボタンの機能です。
一定のスクロール量を超えると表示され、クリックするとスムーズにページの上部へスクロールします。
ハンバーガーメニュー
1：HTML/SCSS/jQueryの準備
まずは、ハンバーガーメニューのjQueryのコーディングが行えるように、HTMLとCSSを記述します。
また、HTMLにはjQueryを記述できるように、jQueryのファイルと外部JSファイルを読み込んでおきましょう。
See the Pen
7242_実用的なjqueryのコーディング_001 by Yugo Harima (@yh-dezadezi)
on CodePen.
2：jQueryの記述
ハンバーガーメニューの開閉のために必要なjQueryのコードをJSファイルに記述します。
「#humb」をクリックすると、「#humb」と「#nav」のクラスが切り替わる処理を記述します。
これにより、ハンバーガーメニューの開閉に必要なクラスが付いたり、消えたりします。
See the Pen
7242_実用的なjqueryのコーディング_002 by Yugo Harima (@yh-dezadezi)
on CodePen.
「this」について
「this」は、現在実行されている操作の対象を指します。
上記のコードでは、「クリックされた要素」を指し、具体的には「this」は「#hamb（idが「hamb」の要素）」になります。このように、イベント発生時に指定した要素を「this」として扱い、セレクタとして操作することができます。
3：ハンバーガーメニューのスタイルを調整
現状では、jQueryでクラスを切り替えただけなので、クラス切り替え後のスタイルを調整する必要があります。これにより、ハンバーガーメニューの開閉時に見た目が変化するようにスタイルを設定します。
See the Pen
7242_実用的なjqueryのコーディング_003 by Yugo Harima (@yh-dezadezi)
on CodePen.
スタイルの設定としては、「#humb」をクリックした時に、ハンバーガーメニューのラインがバッテン（×）に変わります。また、非表示になっていたナビゲーションメニューを表示させます。
ハンバーガーメニューの説明は以上になります。
次に、スクロールトップについて説明していきます。
スクロールトップ
1：HTML/SCSS/jQueryの準備
まずは、スクロールトップのjQueryのコーディングが行えるように、HTMLとCSSを記述します。
また、HTMLにはjQueryを記述できるように、jQueryのファイルと外部JSファイルを読み込んでおきましょう。
See the Pen
7242_実用的なjqueryのコーディング_004 by Yugo Harima (@yh-dezadezi)
on CodePen.
2：jQueryの記述
スクロールトップに必要なjQueryのコードをJSファイルに記述します。
「ページトップボタン」を初期状態を非表示にし、スクロール位置に応じて表示非表示する処理をします。また、「ページトップボタン」をクリックした時にスムーズにページ最上部へスクロールする処理を記述します。これによって、ページ下部からページのトップへスムーズにスクロールされるようになります。
See the Pen
7242_実用的なjqueryのコーディング_005 by Yugo Harima (@yh-dezadezi)
on CodePen.
スクロールトップの説明は以上になります。
以上が「実用的なjQueryのコーディング」の説明でした。
また、「jQuertの基本」のステップも全て終了となります。
引き続き、別のステップも進めていきましょう。
