目次
第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 レスポンシブ化に役立つツール