モバイルに対応するCSSのサンプルコードがほしかったのでKindleで発売されていた「プロが教えるレスポンシブWebデザイン 現場のメソッド レイアウト・UIのマルチデバイス対応手法」という本を読んでみました。
本の内容
■Chapter1 基本の確認
レスポンシブWebデザインの基本/アクセシビリティの確保/jQueryについて ほか
■Chapter2 レイアウト
1カラムレイアウト/2カラムレイアウト/CSS Flexible Box/タイルレイアウト
■Chapter3 ナビゲーション
アコーディオン/リスト/パンくずリスト/ドロワー/タブナビゲーション ほか
■Chapter4 ギミック
カルーセル/モーダルウィンドウ/スムーズスクロール
■Chapter5 フォーム
フォームのスタイリング/バリデーション/郵便番号検索
■Chapter6 細かなテクニック
要素の高さを揃える/画像のトリミング/画像の遅延読み込み
■Chapter7 API・外部サービスの活用
Googleマップ/Googleカレンダー/Microsoft翻訳/YouTube ほか
CSSをつかったモバイルにも対応するレイアウトの実装方法やjQueryをつかったアコーディオンメニュー、パンくずリスト、モーダルウィンドウの実装方法が紹介されています。また郵便番号検索や画像のトリミング、Google APIの使い方も紹介されていました。
個人的にはタイルレイアウトと郵便番号検索の実装方法が確認できたのがよかったです。他のサンプルも実践で利用できるコードばかりだと思います。
画面サイズに合わせてカラム数の変更
タイルレイアウト
アコーディオンメニュー
パンくずリスト
ドロワーメニュー
タブメニュー
ページング
郵便番号
GoogleマップAPI
Font Awesome
ざっくり目を通しただけですがこれってどうやるんだろうと思っていた表現のサンプルコードが手に入ったので、すごくいい本だと思います。