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

ヘッダーサイズを小さくして影を付ける

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ブラウザスクロールの位置によって、ヘッダーのサイズを小さくして、影を付ける方法について解説致します。
講師:
03:29

字幕

このレッスンでは ブラウザスクロールの 位置によって― ヘッダーのサイズを小さくする 方法について解説していきます まずはダウンロードしてきたこちらの headersize-small ― というフォルダーの中に入っている こちらの js フォルダーの中の― この javascript.js ファイルと そして― こちらの css フォルダーの中に 入っている この style.css ファイルをエディターで開いて下さい そして これがそれらの ファイルを開いた状態です 左側には javascript.js ファイル そして 右側には style.css ファイルを― 表示させています これらのファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう それでは まず 前回までのレッスンの おさらいをしていきましょう 前回までのレッスンでブラウザに対して スクロールイベントを登録して― そして スクロールされる度に そのブラウザのスクロール位置を― 変数に代入して そして if 文を使って― そのブラウザのスクロール位置に応じて 条件分岐をさせる所まで行ってきました 今回は具体的にその条件分岐の中で ヘッダーサイズを小さくする処理を― 書いていってみたいと思います 今回 注目して頂く部分は こちらの部分となります まず こちらの条件分岐の else の方に処理を付け足していきます この else というのは ブラウザの スクロール位置が 30 より上の時― という意味でしたね その条件が満たされた時に こちらの処理が実行されます そして こちらの処理で実際に そのヘッダーサイズを小さくしています では みていきましょう まず $('header') と書きます これはヘッダータグの意味ですね そのヘッダータグに対して addClass と書いています これをすることによって この addClass の後にある― 括弧の中に入力されたクラスを このヘッダータグに追加することが出来ます 今回は small というクラスを 追加させるという意味になります この small というクラスですが 以前のレッスンで作成しましたね こちらの style.css ファイルの こちらの部分になります こちらの部分で padding のサイズを 小さくして そして ― ドロップシャドーの効果を付けています この small というクラスを このヘッダータグに付ける― といった形の処理となります それでは この状態で 先程ダウンロードしてきた― index.html ファイルを ブラウザで開いて その動作を確認してみたいと思います はい これがその index.html ファイルを 開いた状態ですね それでは ブラウザを スクロールさせてみましょう すると このように小さくなりましたね このように動作すれば きちんと 実装が完了出来ている― といった形になります ただ このままの状態ですと このままスクロールを元に戻しても― 元のサイズには戻りません 次のレッスンでは このサイズが小さくなった ヘッダー部分をスクロールの位置に応じて― 元に戻すという処理を 行っていきたいと思います 以上でレッスンは終了です 今回はブラウザスクロールの 位置によってヘッダーのサイズを― 小さくする方法について 解説致しました

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

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

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

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

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

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