おためし受講中

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

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

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

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

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

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

■授業のアジェンダ(予定)

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

学生代表

  • 大木 しのぶ

    大木 しのぶ

    スクー放送部

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

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