印刷書籍一覧

スマートフォンサイトのための HTML5+CSS3

スマートフォンやタブレットなど、あらゆるデバイスを目指した情報発信・Webデザインにおいて有効なHTML5 + CSS3の機能に関する情報を集め、活用テクニックをまとめた一冊です。

Amazon

Amazon Kindle

2012年08月　マイナビ
B5変形 320ページ / 978-4839943325

はじめに

World Wide Webが産声を上げてから、20年を超える歳月が過ぎました。

研究者の一部だけが利用する、非常に限られた人のための道具でしかなかったWorld Wide Webですが、今では、誰もが簡単に利用することができるメディアとなり、生活の一部にさえなっています。

しかし、その変化に合わせて「あらゆるデバイスからアクセスできる」という理想は失うことになります。

当時のウェブは、いずれ現れるであろう未来のデバイスも含めて、あらゆるデバイスからアクセスされることを想定していました。そして、そんな時代のWebデザインでは、大きさや形の定まらないページのデザインを考えるという、多くの思考トレーニングが行われていました。
テキストと画像くらいしか扱うことができなかったころ、JavaScriptやCSSさえ存在しなかった時代の話です。

しかしその後、Webがグラフィカルでインタラクティブなものとなり、商業化が進んでいきます。その結果、デザインの重要性が高まり、ページサイズは固定され、受信環境はどんどん限定されていくことになります。

ところが、iPhoneやiPad、そしてAndroidといったスマートフォンやタブレットが登場し、誰もが手にするようになった今、Webは再びスタート地点に立ち戻り、あらゆるデバイスを目指した情報発信が必要な時代に入ろうとしています。

そして、この時代の主役であるHTML5 + CSS3 は、多様なデバイスへの情報発信を可能にするための機能を急速に備え、新しいWebデザインの時代に対応しようとしています。

そこで、本書では、現時点で見えている新しいWebデザインで有効な機能に関する情報を集め、活用するテクニックをまとめています。
新しいWebデザインの時代を感じていただければ幸いです。

1 スマートフォン＆タブレットに対応したWeb サイト制作の歴史
1-1 iPhone の登場
1-2 iPhone に最適化したWeb ページ制作の誕生
1-3 Android の登場
1-4 タブレットの登場
1-5 多様なデバイスに対応するためのWebページ制作
2 レスポンシブWebデザイン
2-1 レスポンシブWebデザイン
2-2 画面の横幅
3 densityに基づいたビューポート
3-1 densityとは
3-2 ビューポートとは
3-3 densityに基づいたビューポートを利用する理由
3-4 デザインを切り替えるための横幅の決定

Chapter2　レスポンシブWebデザインの実践

■レスポンシブWebデザインにおける主要レイアウトパターン
■レスポンシブWebデザインの基本設定
1 ビューポートの横幅の指定
2 メディアクエリとスタイルシートの設定
A 可変レイアウトによるレスポンシブWebデザイン
B 固定レイアウトによるレスポンシブWebデザイン
C 可変レイアウト＋固定レイアウトによるレスポンシブWebデザイン

Chapter3 特性や機能の判別

1 デバイスの特性や機能の判別
1-1 特性や機能の判別について
1-2 特性や機能の判別方法
2 CSS3のメディアクエリ
2-1 CSS3のメディアクエリの基本
2-2 メディアタイプの指定
2-3 特性の指定
3 CSSOMによるメディアクエリ
3-1 JavaScriptでメディアクエリを利用する
3-2 CSSOMによるメディアクエリの基本
3-3 リスナーを利用してビューポートの横幅の変化に対応する
3-4 ライブラリを利用して未対応のブラウザに対応する
4 JavaScriptで特性の値を取得する
4-1 メディアクエリでは不十分な機能を補う
4-2 画面解像度の値を取得する
4-3 デバイスの向きの値を取得する
4-4 densityの値を取得する
5 機能の判別
5-1 機能の判別の基本的な仕組み
5-2 Modernizrによる機能の判別
5-3 jQueryによる機能の判別

Chapter4 ビューポートとブラウザの設定

1 ビューポートの基本設定
1-1 によるビューポートの設定
1-2 ビューポートをdensityに基づく解像度で表示する
1-3 ビューポートの横幅をピクセルで指定する
1-4 ページの拡大率を指定する
1-5 ユーザーによる拡大表示を制限する
1-6 densityを指定する
2 アドレスバーの表示
2-1 アドレスバーの表示
2-2 アドレスバーを隠す
2-3 ファビコンを表示する
3 Webクリップのアイコンの指定
3-1 Webページをホーム画面に登録する
3-2 Webクリップのアイコンを指定する
3-3 スタンドアローンモードで表示する

Chapter5 高解像度なデバイスへの対応

1 高解像度なデバイスへの対応
1-1 デバイスの高解像度化と画像表示の問題
1-2 画像がぼけて見えるのを防ぐ方法
2 高解像度な画像の利用
3 SVGの利用
3-1 SVG形式で画像を用意する
3-2 SVG形式の画像を表示する
3-3 インラインSVGを利用する
4 Webフォントの利用
4-1 画像をWebフォントに置き換えて表示する

Chapter6 テクニカル・サンプル

1 HTML5を利用した論理構造のマークアップ
2 HTML5によるビデオの表示
3 フォームのデザイン
4 横並びのメニューを効率よくレイアウトする
5 画面の横幅に応じて自動的に段組みで表示する
6 ヘッダーを画面上部に固定表示する
7 コンテンツをコンパクトに表示する
8 アニメーション効果の設定
9 対応ブラウザのみにSVGを表示する
10 インラインSVG＋CSSでロールオーバーを設定する
11 ビューポートの設定を動的に変更する
12 デスクトップ環境ではレスポンシブWebデザインを無効にする
13 デバイスに合わせて最適な画像を表示する
14 コンテンツの表示を動的に切り替える
15 ロールオーバーの表示を揃える
16 画面の横幅に合わせて文字サイズを変更する
17 jQuery Mobileの利用