デザインパターン基礎

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

おためし受講中
  • 授業で使用する教材

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

「授業フィードバック」で、授業の感想を教えてください!

チュートリアルは、こちらの「その他のオプション」からいつでも確認いただけます。

コピーしました!

ここには授業中のやりとりが表示されます

生放送でのコメントが再生されています

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

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    全8回 2016年9月19日公開
    デザインパターン基礎 -スクロール時にTOPを固定させる実装-

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

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

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

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

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

    受講生代表

    • 新井 利佳

      新井 利佳

      スクー放送部

    教室画面の機能をご紹介します

    学習機能を活用して、効率よく学習しましょう!