デザインパターン基礎

第3回｜デザインパターン基礎 -CSSとjQueryを使ったハンバーガーメニューの実装-

おためし受講中

  • 授業で使用する教材

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

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

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

コピーしました！

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

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

【前半】授業
  • 授業の流れ
  • 00:00:25〜（01:19）
  • ハンバーガーボタンとは何か学ぼう
  • 00:01:44〜（01:19）
  • 質問:レスポンシブ対応ってどのように実装 しているかご存知ですか?
  • 00:03:03〜（02:56）
  • レスポンシブ対応とは何か学ぼう
  • 00:05:59〜（06:04）
  • ハンバーガーボタンのCSS設計
  • 00:12:03〜（04:48）
  • 質問:なぜ.toggleのなかのspanに display:blockをつけるのでしょうか。
  • 00:16:51〜（06:51）
  • 実装結果をみてみよう
  • 00:23:42〜（04:06）
  • jQueryを導入したボタンの実装
  • 00:27:48〜（02:50）
  • jQueryも含めたhtmlとcssの動きを確認してみよう
  • 00:30:38〜（05:54）
  • Q.レスポンシブではサイズだけでなくiOSとAndloidのようにOSごとに切り分ける事は出来ますか？それともOSごとに分ける場合、別々にサイトを作成する事になるのでしょうか？
  • 00:36:32〜（00:57）
  • Q.サンプルファイルにprepros.cfgというファイルがありますが何のファイルでしょうか？
  • 00:37:29〜（00:58）
  • media screenが指定値以下の際のhtmlとcssの動きを確認してみよう
  • 00:38:27〜（08:54）
  • まとめ
  • 00:47:21〜（01:14）
【後半】質疑応答
  • Q.今回は二つで切り分けてましたが、先生はMedia Queriesを何ピクセルで切り分けますか？PC、タブレット、スマートフォンで切り分ける場合のpx数を教えていただけると助かります。
  • 00:48:59〜（02:22）
  • Q.WordPressでjQueryをスムーズに動かす方法はあります？
  • 00:51:21〜（01:32）
  • Q.WordPressでjQueryをスムーズに動かす方法はありますか？いつもこのハンバーガーメニューがwordpressで動かないことがよくあります。
  • 00:52:53〜（01:06）
  • Q.メニューが表示される速さの調整は、.open .nav に指定ではないのですか？
  • 00:53:59〜（01:56）
  • Q.HTMLでのjQuery(Javascript)の記述は､最後にまとめて書いた方が良いのでしょうか？
  • 00:55:55〜（00:57）
  • Q.メディアクエリーではなく、.htaccessでのユーザーエージェントで区別することはよくありますか？
  • 00:56:52〜（01:17）
  • Q.jQueryを使わず、CSSのみでハンバーガーメニューをするのとjQueryでハンバーガーメニューをするのは、どちらがいいですか。何か違いはありますか？
  • 00:58:09〜（01:43）
  • お知らせ
  • 00:59:52〜

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

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    全8回 2016年8月22日公開
    デザインパターン基礎 -CSSとjQueryを使ったハンバーガーメニューの実装-

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

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

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

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

    第3回目の授業は、前回の授業での知識を踏まえ、Webサイトやアプリなどのメニューアイコンとして用いられるハンバーガーメニューを実装していきます。jQueryを使用しての実装になりますがライブラリは用いません。構造とメニューの動きの仕組みをしっかりと理解してください。
     

    ■授業のアジェンダ（予定）

    ・ハンバーガーメニューがどのようにできているのか
    ・とりあえずCSSだけ作ってみる
    ・jQueryを導入して実際に動かしてみる
    ・実装したボタンが動くかどうかの確認

    デザインパターン基礎 （全8回）

    担当の先生

    受講生代表

    • 大木 しのぶ

      大木 しのぶ

      スクー放送部

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

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