今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
「スムーズスクロール効果」部分のHTMLの作成方法
このレッスンでは jQuery と jKit プラグインを利用して― スムーズスクロール効果を実装する為の HTML のコーディング方法について― いくつかのポイントをご紹介していきます まずは ダウンロードしてきた こちらの smoothscroll-html― フォルダーの中に入っている こちらの index.html ファイルを― エディターで開いて下さい そして これがそのファイルを開いた状態です このファイルを使って 今回のレッスンの 解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう 今回 注目して頂きたい部分は こちらの部分となります こちらのヘッダータグ部分に関しては 以前のレッスンで制作してきた― ウエブサイトのヘッダー部分 ロゴのメニューが掲載されている箇所ですね 今回はその中でもメニュー部分のところに 注目していきたいと思います さて スムーズスクロール効果を 実装していくに当たっては― この各メニューに対して その A タグをクリックした時の飛び先を― 指定してあげる必要があります その飛び先を指定してあげるのが こちらの A タグの中にある― href 属性の中となります 見て頂いて分るとおり それぞれに対して ページ内リンクの容量でその飛び先を― 指定してあげています このように #information と 書いていれば― information という名前の ID が ついたHTMLのタグのところに― リンクするという意味ですね こちらの下の部分も一緒です このように各メニュー部分の A タグに対して― それぞれページの中でリンクさせたい部分を 指定してあげることで― スムーズスクロール効果を実装する際にも こちらの部分を読み取って― 自動的にスムーズにスクロールさせてくれる といった形になります ちなみに ページの最上部に戻る際には このように何も指定しなくても大丈夫です これでスムーズスクロール効果を実装する為の HTML コーディングは完了となります 以上でレッスンは終了です 今回はスムーズスクロール効果を実装する為の HTML のコーディング方法について― いくつかのポイントをご紹介致しました 以降のレッスンでは jQuery と jKit プラグインを使って― 実際にスムーズスクロール効果を…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。