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

レイアウト変更後のCSS作成を作成する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「ヘッダー」部分の、レイアウト変更後のCSSを作成する方法について解説致します。
講師:
03:28

字幕

このレッスンでは ヘッダー部分のレイアウト 変更後の CSS を作成する方法について― 解説していきます まずはダウンロードしてきたこちらの headersize-html ― というフォルダーの中に入っている こちらの css フォルダーの中にある― この style.css ファイルを エディターで開いて下さい そして これがそのファイルを開いた状態です このファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう 今回 注目して頂きたい部分は こちらの部分となります こちらの部分にヘッダーのレイアウト変更後の スタイルを作成しています ここで設定する内容は二つです まず ヘッダーサイズの高さを小さくします そして もう一つはドロップシャドーの効果を ヘッダー部分に与えるということです では その部分について みていきたいと思います まずはこちらの部分で クラスを作っていますね ヘッダータグに対して small クラスが付いたら― こちらのスタイルを適用する という形になります そして まずこちらの一つ目 padding ですね 通常の padding のサイズは このような形となっています 上下が 35 ピクセル という指定になっていますね こちらのクラス small では このように上下が 10 ピクセル― という風に少しサイズを小さくしてあげます そして 次にドロップシャドーの方です それがこちらの box-shadow というものですね box-shadow というのは CSS 3 で登場してきた― 新しい CSS のプロパティーです これを使うことによって box 要素に対して― 影の効果を付けることが出来ます このように box-shadow と書いて その後にこのように記述しています これはどういう意味かというとー まず 影の色を黒で透過率を 0.1% としています ですので 限りなく透明に近い黒 という風な指定ですね そして こちらの 12 ピクセルですが これはぼかしの範囲を指定しています そして こちらの 1 ピクセルは 影のサイズを指定しています 因みに こちらの前の二つの値ですが 一つ目の値は影の横方向のズレ そして 二つ目の値は影の下方向のズレ という形になります 今回はどちらも 0 を指定していますね 片側には単位がなくて 片側にはピクセルの単位が付いていますが― これは 0 ピクセルの場合 この単位を付けても付けなくても― どちらでも大丈夫です これでレイアウト変更後のスタイルシートの 作成が完了致しました 後は jQuery を使ってそのヘッダーの レイアウトを変更する際に― このヘッダータグに small というクラスを 付けてあげれば 大丈夫です その方法に関しては 後のレッスンで解説していきます 以上でレッスンは終了です 今回はヘッダー部分のレイアウト変更後の CSS を作成する方法について― 解説致しました 以降のレッスンでは jQuery を使って ブラウザスクロールの動作とその位置を― 検知する方法について解説していきますので そちらも合わせてご覧下さい

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

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

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

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

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

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