【jQuery編】WEBのコーディングでググって調べた基礎の基礎のまとめ
WEBのコーディングでググって調べたことシリーズ、「【IllustratorでのWEBデザイン編】WEBのコーディングでググって調べた基礎の基礎のまとめ」、「【RWD、CSS3編】WEBのコーディングでググって調べた基礎の基礎のまとめ」に続いて、今回はjQuery編です。
WEBスクールに通っている時にも、学習はしている「jQuery」。しかし、HTML、CSSは苦戦しながらも進めていけましたが、jQueryでというか、JavaScriptでというか、つまづいてしまって未だにどーも苦手です。
そのため、jQueryを使わなくてもCSS3で同じようなことが出来る場合はCSS3で実装していたのですが、そのせいでIE対策という点で最後に大変なことになってしまいました…。特に「ドロップダウンメニュー」を作る時には本当してググり続けました。
そんなわけで苦手だけれども調べて実装したものを、まとめてみました。
JQueryの基礎とよく使うもの
ググってコピペして、必要な記述をすれば使えることは使えるはずですが、一応この機会にと思い、jQueryの基礎もおさらいしてみました。それとよく使うn番目の指定や、topに戻るスクロールボタン、ページ内のフォントサイズを変更（プラグイン）などです。
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
jQueryで（n）番目（ｎ倍数）の特定要素に処理を加える「:nth-child()」のちょっと便利な使い方 | BlackFlag
[CSS3, jQuery] 行毎にテーブルの背景色を変更する4つの方法
【jQuery】topに戻るスクロールボタン | Web Cafe
jQuery | ページ内のフォントサイズを変更してくれる「Text Resizer」
レスポンシブして、IE8対応のドロップダウンメニューってどうすれば出来るんだ！？
冒頭にも書いたように、今回の案件で1番苦労したところです。この全ての条件を満たすjQueryプラグイン「FlexNav」というものを早めに見つけていたので、最初は結構余裕でいました。
しかし、いざ実装する段階になると、今回のナビゲーションのデザインが結構細かいもので、内にボーダーがあって、その内の四隅に画像があって、でも、レスポンシブするから、そのボタンを1つ単に画像で書き出すわけにもいかず…、というもので、それをプラグインを使って実装しようとすると、見事にぐちゃぐちゃになって崩壊してしまいました。そこから、レスポンシブして、IE8対応のドロップダウンメニューの作り方を延々とググることになったのです。
ASCII.jp：レスポンシブにも対応したドロップダウン FlexNav｜こうめの“これから使える”jQueryプラグイン
ドロップダウン可能でレスポンシブ対応でIE7OKなメニューを簡単に実装できてしまうjQueryプラグイン「flexnav.js」 | yugurido
簡単なドロップダウンメニューの作り方(jQuery活用編) [ホームページ作成] All About
幅広でメニューバー、幅狭ではプルダウンに変化させる [ホームページ作成] All About
結局、レスポンシブして、IE8対応のドロップダウンメニューはどう実装したか
色々なプラグインやjQueryを使ったドロップダウンメニューの作り方について調べましたが、どれも今回の条件を満たすものはなく、結局CSSを使ったドロップダウンメニューを作り、それをレスポンシブさせ、IE8でも動きを確認し、リッチなアニメーションではないけれど、問題なく使える形のナビゲーションを実装しました。つまり、結局あれだけ調べたのにjQueryで実装してないという結末。でも、どうにか出来て良かったです。
CSSだけで作る動きのあるドロップダウンメニュー｜Webpark
まとめ
jQuery、もっとしっかり身に付けます。何度も言っていますが、わからずググりながらでは時間がいくらあっても足りないのを実感しました。実家フリーランサーのうちに習得だ！
