chevron_left デザインパターン基礎

デザインパターン基礎

PREMIUM
第3回

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

2016年8月22日 60min

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

1 / 16

授業の概要

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

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

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

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

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

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

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

こんな人にオススメ

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

授業で使用する教材

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

チャプター

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