WebデザイナーのためのjQuery実践講座

「スムーズスクロール効果」部分のHTMLの作成方法

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「スムーズスクロール効果」を実装する為の、HTMLのコーディング方法について、いくつかのポイントをご紹介致します。
講師:
02:22

字幕

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

WebデザイナーのためのjQuery実践講座

jQueryとはJavaScriptを簡単かつ便利に扱えるJavaScriptライブラリです。このコースではプログラミングの知識はそれほどないけれど日々仕事でHPを制作しているWebデザイナーの方や趣味で自分のサイトを運営している方などを対象に、jQueryとプラグインを利用してさまざまな機能や効果を手軽にサイトに実装する方法を学びます。

2時間04分 (34 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年06月29日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。