スマートフォンサイト制作入門［レスポンシブ・ウェブデザイン対応］

出版社：技術評論社
ISBN：978-4-7741-5880-8
本体価格：2,380円
発売日：2013年08月21日
著者：ネットイヤークラフト株式会社，荒井千佳，入江寿栄　著

詳細は技術評論社サイトへ

この本の概要

本書は，スマートフォンサイト制作とレスポンシブ・ウェブの基礎の両方を，一冊で学ぶことができます。HTML5＋CSS3＋jQueryで基本的なスマートフォンサイトを制作し，さらにマルチデバイスに対応させるためのレスポンシブ・ウェブ化を，サンプルコードを元にしっかりと行います。解説に使用しているソースや画像はすべてダウンロードできるので，手軽に実践力を身につけることができます。スマートフォンサイトのソースを元にマルチデバイス化を行うという，これからのWeb制作のスタイルに最適な一冊です。

こんな方におすすめ

• スマートフォンサイトを制作しようと考えている方

目次

第1章　スマートフォンサイトを制作するために

• 1.1　スマートフォンサイトの基本
  • 1.1.1　スマートフォンとは
  • 1.1.2　スマートフォンのOS／ブラウザー
  • 1.1.3　スマートフォンの画面
  • 1.1.4　スマートフォンサイトのレイアウト
  • 1.1.5　画面解像度とdevicePixelRatio
• 1.2　制作に取り掛かる前に
  • 1.2.1　制作環境ツール
  • 1.2.2　必要な素材<
• 1.3　本書で制作するサイトについて
  • 1.3.1　サンプルを参考にサイトを作成する

第2章　HTML＋CSSで基本のコーディングを行う

• 2.1　HTML5の基本
  • 2.1.1　最低限おさえておきたい特長
  • 2.1.2　より明確になった文書構造
• 2.2　HTMLで基本の構造を組む
  • 2.2.1　head要素を作成する
  • 2.2.2　body要素を作成する
• 2.3　CSS3でスタイリングする
  • 2.3.1　スタイリングを始める前に
  • 2.3.2　グラデーションを作成する
  • 2.3.3　メイン画像・アラートを設置する
  • 2.3.4　サービスピックアップを実装する
  • 2.3.5　リンクありのリストを作成する
  • 2.3.6　フッターを作成する
• 2.4　動作確認をする
  • 2.4.1　実機で表示する
  • 2.4.2　devicePixelRatioに合わせて背景画像を指定する
  • 2.4.3　Androidでのリンク不具合に対応する

第3章　JavaScript＋CSS3で動きを実装する

• 3.1　動きのあるUIを実現する技術
  3.1.1　動きのあるUIの基本
  • 3.1.2　jQueryの基本
  • 3.1.3　CSS3を用いたアニメーションの基本
• 3.2　ドロップダウンを実装する
  • 3.2.1　ドロップダウンとは
  • 3.2.2　HTMLに追加する
  • 3.2.3　CSSでレイアウトを整える
  • 3.2.4　JavaScriptで動きをつける
  • 3.2.5　Androidでの表示調整
• 3.3　タブを実装する
  • 3.3.1　タブとは
  • 3.3.2　タブの実装
• 3.4　アコーディオンを実装する
  • 3.4.1　アコーディオンとは
  • 3.4.2　アコーディオンの実装
• 3.5　カルーセルを実装する
  • 3.5.1　カルーセルとは
  • 3.5.2　カルーセルの実装
• 3.6　ページスライドを実装する
  • 3.6.1　ページスライドとは
  • 3.6.2　ページスライドの実装
  • 3.6.3　JavaScriptによる動きをつける

第4章　マルチデバイスに対応させる

• 4.1　レスポンシブ化の基本
  • 4.1.1　レスポンシブ・ウェブデザインとは
  • 4.1.2　レスポンシブ・ウェブデザインの事例
• 4.2　レスポンシブ化の準備を行う
  • 4.2.1　メディアクエリーを理解する
  • 4.2.2　サンプルサイトをレスポンシブ化する
  • 4.2.3　新しくCSSファイルを読み込ませる
• 4.3　ヘッダー・フッターをレスポンシブ化する
  • 4.3.1　ヘッダーをレスポンシブ化する
  • 4.3.2　フッターをレスポンシブ化する
• 4.4　メイン画像をレスポンシブ化する
  • 4.4.1　ブレークポイントの切り替えを設定する
  • 4.4.2　レイアウトを調整する
• 4.5　メインコンテンツをレスポンシブ化する
  • 4.5.1　複雑化するマークアップ
  • 4.5.2　HTMLファイルに追記する
  • 4.5.3　CSSファイルに追記する
  • 4.5.4　JavaScriptで調整する
• 4.6　Internet Explorerに対応させる
  • 4.6.1　IE8以前への対応
  • 4.6.2　スクリプトを利用して大体の形を整える
  • 4.6.3　プラグインを利用して細かな部分を調整する

• 付録1　スマートフォン専用タグ
• 付録2　レスポンシブ化に役立つツール