おためし受講中

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

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

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

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

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

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

学生代表

  • 新井 利佳

    新井 利佳

    スクー放送部

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

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