tyoshikawa1106のブログ

- Force.com Developer Blog -

プロが教えるレスポンシブWebデザインの本を読んでみました

モバイルに対応するCSSのサンプルコードがほしかったのでKindleで発売されていた「プロが教えるレスポンシブWebデザイン 現場のメソッド レイアウト・UIのマルチデバイス対応手法」という本を読んでみました。
f:id:tyoshikawa1106:20170129155406p:plain

本の内容

■Chapter1 基本の確認
レスポンシブWebデザインの基本/アクセシビリティの確保/jQueryについて ほか
■Chapter2 レイアウト
1カラムレイアウト/2カラムレイアウト/CSS Flexible Box/タイルレイアウト
■Chapter3 ナビゲーション
アコーディオン/リスト/パンくずリスト/ドロワー/タブナビゲーション ほか
■Chapter4 ギミック
カルーセル/モーダルウィンドウ/スムーズスクロール
■Chapter5 フォーム
フォームのスタイリング/バリデーション/郵便番号検索
■Chapter6 細かなテクニック
要素の高さを揃える/画像のトリミング/画像の遅延読み込み
■Chapter7 API・外部サービスの活用
Googleマップ/Googleカレンダー/Microsoft翻訳/YouTube ほか


CSSをつかったモバイルにも対応するレイアウトの実装方法やjQueryをつかったアコーディオンメニュー、パンくずリスト、モーダルウィンドウの実装方法が紹介されています。また郵便番号検索や画像のトリミング、Google APIの使い方も紹介されていました。


個人的にはタイルレイアウトと郵便番号検索の実装方法が確認できたのがよかったです。他のサンプルも実践で利用できるコードばかりだと思います。

画面サイズに合わせてカラム数の変更

f:id:tyoshikawa1106:20170129155834p:plain

f:id:tyoshikawa1106:20170129155854p:plain:w200

タイルレイアウト

f:id:tyoshikawa1106:20170129160040p:plain

アコーディオンメニュー

f:id:tyoshikawa1106:20170129160118p:plain

パンくずリスト

f:id:tyoshikawa1106:20170129160212p:plain

ドロワーメニュー

f:id:tyoshikawa1106:20170129160355p:plain

f:id:tyoshikawa1106:20170129160407p:plain:w200

タブメニュー

f:id:tyoshikawa1106:20170129160447p:plain

ページング

f:id:tyoshikawa1106:20170129160528p:plain

f:id:tyoshikawa1106:20170129160548p:plain:w300

郵便番号

f:id:tyoshikawa1106:20170129160842p:plain

GoogleマップAPI

f:id:tyoshikawa1106:20170129161229p:plain

f:id:tyoshikawa1106:20170129161441p:plain

Font Awesome

f:id:tyoshikawa1106:20170129161523p:plain


ざっくり目を通しただけですがこれってどうやるんだろうと思っていた表現のサンプルコードが手に入ったので、すごくいい本だと思います。