MdNCORPORATION

プロが教えるレスポンシブWebデザイン 現場のメソッド レイアウト・UIのマルチデバイス対応手法

プロが教えるレスポンシブWebデザイン 現場のメソッド レイアウト・UIのマルチデバイス対応手法

笹尾 万里子 著/株式会社イー・ネットワークス 監修/前川 昌幸 著/中村 真己 著
本体 2300円(税別) ※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2016-04-15
仕様 B5変形判/192P
ISBN 978-4-8443-6580-8
スマートフォン、タブレット、PCなど、多様なデバイスでの表示に対応する手法として定着したレスポンシブWebデザイン。1つのサイトでさまざまな画面サイズに対応できる点が魅力ですが、しっかりと意識してつくらないとレイアウトが崩れたり、UIの機能が損なわれて使いづらくなったりと、問題が起こりがちです。本書では最も基本となるレイアウトをはじめ、ナビゲーション・フォーム・モーダルウィンドウ・カルーセルなどのパーツごとにレスポンシブに対応させる実装方法を解説しました。シンプルなわかりやすい作例をベースにステップ・バイ・ステップ形式で解説していますので、本質的な仕組みを理解できます。また、掲載コードをダウンロードでき、コピー&ペーストなどでご利用いただけますので、ご自身のWebサイトに部分的に取り入れたり、ひな型として使用することも可能です。Googleマップなどの外部API、Webアイコンフォント、遅延読み込みといった周辺技術も取り上げていますので、スマートフォンに対応したサイト制作の傍らでお役立ていただける一冊です。

■ページ見本










目次

■Chapter1 基本の確認
01 レスポンシブWebデザインの基本
02 アクセシビリティの確保について
03 jQueryについて
04 SNSとの連携
05 Chrome DevToolsを用いたデバッグについて

■Chapter2 レイアウト
01 1カラムレイアウト
02 2カラムレイアウト
03 CSS Flexible Box Layout Module
04 タイルレイアウト

■Chapter3 ナビゲーション
01 アコーディオンメニュー
02 リストメニュー
03 パンくずリスト
04 ドロワーメニュー
05 タブナビゲーション
06 ページング
07 プルダウンメニュー

■Chapter4 ギミック
01 カルーセル
02 モーダルウィンドウ
03 スムーズスクロール

■Chapter5 フォーム
01 フォームのスタイリング
02 バリデーション
03 郵便番号検索

■Chapter6 細かなテクニック
01 要素の高さを揃える
02 画像のトリミング
03 画像の遅延読み込み

■Chapter7 API・外部サービスの活用
01 Google Maps JavaScript API
02 Google Calendar API
03 Microsoft Translator API
04 YouTube IFrame Player API
05 Font Awesome
06 Google Fonts

INDEX

ダウンロードデータ

プロが教えるレスポンシブWebデザイン 現場のメソッド
レイアウト・UIのマルチデバイス対応手法
サンプルデータダウンロード


このたびは、「プロが教えるレスポンシブWebデザイン 現場のメソッド レイアウト・UIのマルチデバイス対応手法」をご購入いただきまして、誠にありがとうございます。以下に本書のサンプルデータをダウンロードにてご提供しております。


MdN_Responsive.zip(約101.6 MB)



■ダウンロードにあたってのご注意■


ダウンロードファイルは、ZIP形式で圧縮されています。Windows、Macそれぞれの解凍ソフトを使って圧縮ファイルを解凍してください。ダウンロードファイルには「はじめにお読みください.html」が同梱されていますので、ご使用の前に必ずお読みください。


■ダウンロードファイル解凍時のご注意■


Windowsをご利用の場合は、ダウンロードファイルをダブルクリックしても正しく解凍できない場合があります。画像が表示されないなど、サンプルファイルの閲覧に問題がある場合は、次の手順でファイルの解凍をお試しください。

[1]ダウンロードしたファイルを右クリック
[2]表示されたメニューから[すべてを展開...]を選択
[3]ファイルを解凍するダイアログが表示されるので、保存場所を選択して実行
[4]指定した場所にファイルが解凍される


※弊社Webサイトからダウンロードできるデータを実行した結果につきましては、著者および株式会社エムディエヌコーポレーションは一切の責任を負いかねます。お客様の責任においてご利用ください。



こだわりの年賀状を送りたい!ワンランク上を目指す助っ人アイテム決定版

今よりぐっと"良い"写真に仕上げる!おすすめ解説書ラインナップ