chevron_left デザインパターン基礎

デザインパターン基礎

PREMIUM
第7回

デザインパターン基礎 -スクロール時にTOPを固定させる実装-

2016年9月19日 60min

会員登録して、全てのスライドを見よう

1 / 11

授業の概要

この授業では、Web制作におけるPCサイト及びスマートフォン(スマホ)サイトのデザインパターンとコーディングテクニックを学びます。

CSSのみで実装できるものからjQueryを用いて表現するものまで、Webサイトを作る上で最低限必要になってくる表現方法を抜粋して紹介していきます。

「HTMLとCSSの知識はあるけれど、レスポンシブ実装は勘でやっている」
「jQueryの実装の仕組みがいまいちよくわからない」

今まで“なんとなく”で実装していたコーディングを“確実”なものにするために、根拠のある知識をつけましょう。

第7回目の授業では、スクロール時にTOP部分を固定させるための実装を学習していきます。縦スクロールが長いサイトなどによく用いられる手法です。ユーザビリティーを考えると欠かせない実装になりますので、しっかり理解しましょう。

こんな人にオススメ

実践的に使えるデザインパターンを学びたいWebデザイナー

授業で使用する教材

※授業以外での使用は禁止します

チャプター

play_arrow
授業の流れ
01:21
play_arrow
事前準備
00:49
play_arrow
トップ固定の実装の説明
00:51
play_arrow
サンプルファイルを見てみよう
01:43
play_arrow
質問:トップ固定の実装のメリットはなんでしょうか?
02:05
play_arrow
トップ付け実装のメリット
03:17
play_arrow
HTMLファイルのコードを見てみよう
03:53
play_arrow
レスポンシブ対応を確認してみよう
02:20
play_arrow
各要素のサイズの設定を確認しよう
03:38
play_arrow
jQueryがどういった働きをしているか
05:31
play_arrow
HTMLファイルのjQueryの実装を見てみよう
02:00
play_arrow
Q.jqueryにはバージョンが最近、1.0系と2.0系、3.0系とあると思うんですが、どれを使うのがいいですか?
05:37
play_arrow
jQueryの変数の働きを見てみよう
03:06
play_arrow
jQueryの実装を図で見てみよう
07:15
play_arrow
Q.jQueryの記述にある「var」が今まであやふやだったんですが、複雑な記述を分かりやすいキーワードに置き換えるものという認識で間違いないでしょうか?
00:59
play_arrow
実際に動きを確認しよう
08:53
play_arrow
まとめ
01:24
play_arrow
Q.jqueryの上の部分ではvar top = $('.header').offset().top;下の部分ではvar topBtn = $('#area03Menu'); なんですが、.offset().topはなんですか?変数に入れるという処理はわかるのですが、この二つの違いはなんでしょうか?
02:14
play_arrow
Q.HTMLでmainArea__articleの用にアンダーバーを2つ書いてるのは何か意味がありますか、また、先生はlessやscssを使いますか?
03:05
play_arrow
Q.jqueryのエラーチェックはchromeのデベロッパーツールで行えばいいのでしょうか?他にいいツールはありますか?
00:38
play_arrow
お知らせ