MdN Web Mook 現場のプロが教える WEBデザイン 新・スタンダードテクニック37
エムディエヌコーポレーション / 2015年08月18日 / 全258ページ
【いまWebでよく見るデザイン手法が勢ぞろい!】
現在はHTML5+CSS3に対応したモダンブラウザを前提に、多彩なデバイスに対応できるWebサイトづくりが主流になっています。本書はこのような状況を踏まえ「これからのWeb制作のスタンダード」となる手法をまとめた解説書です。近年よく見られるレイアウト/ナビゲーション/エフェクト/UIパーツをステップ・バイ・ステップ形式で紹介。ドロップダウンメニューなどの基本から、背景全面動画などの流行の手法まで、いまのWebデザインに欠かせないテクニックを網羅しました。サンプルデータもダウンロード可能。「これをやりたかった!」が必ず見つかる1冊です。
現在はHTML5+CSS3に対応したモダンブラウザを前提に、多彩なデバイスに対応できるWebサイトづくりが主流になっています。本書はこのような状況を踏まえ「これからのWeb制作のスタンダード」となる手法をまとめた解説書です。近年よく見られるレイアウト/ナビゲーション/エフェクト/UIパーツをステップ・バイ・ステップ形式で紹介。ドロップダウンメニューなどの基本から、背景全面動画などの流行の手法まで、いまのWebデザインに欠かせないテクニックを網羅しました。サンプルデータもダウンロード可能。「これをやりたかった!」が必ず見つかる1冊です。
目次
- 扉
- はじめに
- 目次
- 本書の使い方
- ■Chapter1 デザイン&レイアウト
- 近年のWebデザインのトレンド
- 001 レスポンシブなマルチカラムレイアウトの実装
- 002 レスポンシブに対応したシングルページレイアウト
- 003 メディア風に見せるページレイアウト
- 004 背景の全面に画像や動画を配置するテクニック
- 005 背景に配置した画像や動画をトリミングする
- 006 自動的に次ページのコンテンツを読み込むInfinite Scroll
- 007 フレームワークを利用したレスポンシブなサイト
- 008 Masonryを利用したPinterest風レイアウト
- 009 チャットツールのように吹き出しで会話を表現する
- ■Chapter2 ナビゲーション
- ユーザーを導くナビゲーション
- 010 アコーデオン式の折りたためるメニュー
- 011 様々なドロップダウンするメニュー
- 012 上部固定のナビゲーションメニュー
- 扉
- はじめに
- 目次
- 本書の使い方
- ■Chapter1 デザイン&レイアウト
- 近年のWebデザインのトレンド
- 001 レスポンシブなマルチカラムレイアウトの実装
- 002 レスポンシブに対応したシングルページレイアウト
- 003 メディア風に見せるページレイアウト
- 004 背景の全面に画像や動画を配置するテクニック
- 005 背景に配置した画像や動画をトリミングする
- 006 自動的に次ページのコンテンツを読み込むInfinite Scroll
- 007 フレームワークを利用したレスポンシブなサイト
- 008 Masonryを利用したPinterest風レイアウト
- 009 チャットツールのように吹き出しで会話を表現する
- ■Chapter2 ナビゲーション
- ユーザーを導くナビゲーション
- 010 アコーデオン式の折りたためるメニュー
- 011 様々なドロップダウンするメニュー
- 012 上部固定のナビゲーションメニュー
- 013 画面全体に表示されるポップアウト式メニュー
- 014 レスポンシブデザインに対応したページネーション
- 015 アニメーションして切り替わるレスポンシブなタブメニュー
- 016 オフキャンバスのメニュー
- ■Chapter3 エフェクト&インタラクション
- Webエフェクトのトレンド
- 017 ページを賑やかにするスライドショー
- 018 様々な手法を使ったマウスホバー時のアニメーション
- 019 スクロールに応じたアニメーション
- 020 アニメーション効果をつけてページ単位でスクロール
- 021 様々なエフェクトで表示するLightbox
- 022 CSS3を使った各種ボタンデザイン
- 023 マウスホバーでコンテンツの表示を切り替える
- 024 テキストの注目ポイントをアニメーションさせて目立たせる
- ■Chapter4 ユーザビリティ
- ユーザビリティの考え方
- 025 吹き出しでヘルプなどが表示されるツールチップ
- 026 ユーザーを退屈させないNow Loadingの表現
- 027 Googleマップの埋め込みとカスタマイズ
- 028 ユーザビリティに配慮したお問い合わせフォーム
- 029 検索フォームとユーザビリティ
- 030 マルチデバイスに対応したレスポンシブな表組み
- 031 アイコンの表示にWebフォントを利用する
- 032 各種SNSボタンを設置して拡散をうながす
- 033 FacebookやTwitterタイムラインをWebサイトに表示
- 034 トップへ戻るボタンを設置して画面のトップへスクロール
- 035 スクロールした現在位置の表示
- 036 マルチデバイスに対応するレスポンシブな画像出力
- 037 ドラッグ&ドロップによるファイルアップローダ
- 目的別索引
- 用語索引
- 著者プロフィール
- 奥付
- カバー
※このデジタル雑誌には目次に記載されているコンテンツが含まれています。それ以外のコンテンツは、本誌のコンテンツであっても含まれていません のでご注意ください。
※電子版では、紙の雑誌と内容が一部異なる場合や、掲載されないページがある場合があります。