俺の食べログ

「グルメ」「仕事」「プログラミング」「趣味」について書いてます。

【1週やった感想・口コミ】現場で役立つjQueryデザインパーツライブラリ

現場で役立つjQueryデザインパーツライブラリ

【1週やった感想・口コミ】現場で役立つjQueryデザインパーツライブラリ

jQueryでどんなことが出来るのか?

どんなプラグインがあるのか、

より深く理解するためにこの本で勉強しました。

 

 

一通りJavaScriptやjQueryを勉強した人が読むための本。

全くの初心者にはおすすめ出来ない。

 

jQueryでどんなことが出来るのかを調べられる辞書に近い本。

自分では気がつかないような面白そうな表現をページをめくって調べるのに使える。

 

この本を使っていなかったから出会わなかったであろう、

プラグインなどがたくさんあり、勉強になりました。

 

本で紹介されている一つ一つの機能を自分で作り直してみるのも良いかもしれません。

 

本の目次

目次を紹介しておく。

300ページくらいあり、結構充実している。

 

<目次>

 

INTRODUCTION jQueryの基本

01 jQueryの導入

02 jQueryの基本構文とセレクタ

03 メソッドとイベント処理

 

CHAPTER 1 ナビゲーション

01 細かなCSS設定なしに画像をロールオーバーさせる

02 画像のロールオーバーにアニメーションを付ける

03 細かなCSS設定なしに円形メニューを作る

04 jQuery UIを使ったアコーディオン

05 jQuery UIを使った順番を入れ替えられるアコーディオン

06 アニメーションで切り替わるタブ

07 グローバルナビゲーションをウィンドウ上部に固定する

08 特定の要素を固定表示させる

09 スクロールするとフェードインで現れる「戻る」ボタン

10 スクロールすると下から出現する「戻る」ボタン

11 折りたたみアニメーションが付いたパンくずリスト

 

CHAPTER 2 インターフェース

01 自動的にメールアドレスにリンクを付ける

02 リンクの内容に合わせてアイコン画像を挿入する

03 ブロック要素全体にリンクを設定する

04 文章中のhttp://から始まるURLに自動でリンクを付ける

05 外部リンクを自動的に別ウインドウで開く

06 リスト要素を自動分割する

07 リストをツリー表示型のメニューに変更する

08 画面をクリックした時にほわっとした輪っかのアニメーションを表示する

09 テキストや画像などをぶるぶるさせるアニメーションを実装する

10 アニメーションするテキストシャドウ

11 アニメーションしながら交互にスタイルを切り替える

12 文字が流れるニュースティッカー

13 ページ内の文字サイズを変更できるボタンを設置する

14 ウインドウサイズに合わせて文字の大きさを変化させる

15 ドラッグ&ドロップで要素の順番を入れ替える

16 ドラッグ&ドロップで要素を移動できるようにする

17 ドラッグで移動できる範囲を制限する

18 要素がドロップされたことを判定する

19 ドラッグしてサイズを変更できるボックスを作成する

20 シンプルなダイアログボックス

21 jQuery UIを使用したダイアログボックス

22 jQuery UIを使用した要素を追加するダイアログフォーム

23 スリムなモーダルウインドウ ..などなど

 

CHAPTER 3 フォト&ムービー

01 オープニングを豪華にするイントロエフェクト

02 Lightbox風のシンプルフォトギャラリー

03 シンプルに作れるスライドショー

04 本をめくるような演出のギャラリー

05 ランダムに表示されるポラロイド風ギャラリー

06 立体感のあるスライドギャラリー

07 マウスホイールで動くスライドギャラリー

08 シンプル設定のカルーセル

09 スクロールに合わせて画像の表示を開始するエフェクト

10 ページ送りを自動で生成するギャラリー ..などなど

 

CHAPTER 4 レイアウト

01 ウィンドウの大きさに合わせてレイアウトが変更されるボックス

02 要素のボックスの高さを揃える

03 ドラッグで自由に再配置できるボックス

04 左右に隠れているボックスを表示する

05 文字色を簡単に変化させるプラグイン ..などなど

 

CHAPTER 5 ソーシャル

01 複数のSNSの投稿を一覧表示する

02 SNSの「いいね!」ボタンを設置する

03 Twitterのつぶやきを横スライドしながら見せる

04 Google+の投稿を自動取得してウィジェットとして表示する

05 Instagramの写真を埋め込む

06 Google Static Mapsをズーム可能にする ..などなど

 

CHAPTER 6 モバイル

01 スマートフォンやタブレットにも対応したギャラリー

02 レスポンシブデザインに対応したグリッドを表示する

03 ウィンドウサイズに合わせて調整されるパンくずリスト

04 自動的に段数が変わるカラムレイアウト

05 ウインドウサイズに合わせてテーブル内の表示を変更する

06 jQuery Mobileを使って簡単にスマートフォンサイトを作成する

 

以上です。

興味を持った方はやってみて下さい。