試験公開中

スマートフォンサイトのためのHTML5+CSS3
ギフトで購入
このエントリーをはてなブックマークに追加

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

マイナビ出版

2,409円 (2,190円+税)

スマートフォンサイトを制作する際に知っておかなければならない知識とノウハウを網羅。レスポンシブWebデザイン、デバイスの特性や機能の判定、ビューポートの設定、高解像度デバイスへの対応など。iOS、Android、Windows Phoneの主要ブラウザへの対応状況も掲載。

関連サイト

出版社による関連ページが公開されています。

内容紹介

スマートフォン用のサイトを制作するのに有効なHTML5とCSS3の機能とテクニックをぎゅっとまとめた最強の解説書の登場です。

iPhone、iPad、Androidといったスマートフォンやタブレットの普及につれて、それに対応したサイトの制作事例が増えています。

しかしスマートフォンやタブレットに最適化したWebページを制作するには、それぞれの機種や搭載ブラウザの特性を把握しなければならず、大変です。

そこで本書では、レスポンシブWebデザイン、デバイスの特性や機能の判定、ビューポートの設定、高解像度デバイスへの対応など、知っておきたい知識とノウハウを解説しました。

Chapter1「スマートフォンやタブレットに対応したサイト構築の考え方」は総論として、スマートフォンサイト制作の考え方をまとめています。

Chapter2「レスポンシブWebデザインの実践」では、可変レイアウト、固定レイアウト、可変レイアウト＋固定レイアウトそれぞれのレスポンシブWebデザイン制作を、サンプルを用いて解説しています。

Chapter3「特性や機能の判別」ではデバイスの特性や機能の判別について解説。CSS3のメディアクエリーやModernizrを使った機能の判別方法などを紹介しています。

Chapter4「ビューポートとブラウザの設定」ではビューポートの設定、Chapter5「高解像度なデバイスへの対応」では高解像度デバイス用に画像を切り替えて使う方法やSVG、Webフォントの解説などを行っています。

Chapter6「テクニカル・サンプル」では基本から応用まで、用途に応じて様々なサンプルを用意。基本のマークアップ、ビデオの表示、フォーム、メニュー、段組、アニメーション効果、SVGの表示、コンテンツ表示の動的な切り替え、ロールオーバー、jQuery Mobileの利用など。サンプルは必要に応じてJavaScript/jQueryを利用した、実践的なものとなっています。

iOS、Android、Windows Phoneの主要ブラウザへの対応状況も掲載（Mobile Safari、Android標準ブラウザ、Chrome for Android、Windows Phone 7.5、Mobile版Firefox、Opera Mobile、そのほかPC用のInternet Explorer、Firefox、Google Chrome、Safari、Opera）。

使いごたえ抜群、Webデザイナー、制作者必携の1冊となっています。

書誌情報

  • 著者: エ・ビスコム・テック・ラボ
  • 発行日:
  • 最終更新日: 2012-08-31
  • バージョン: 1.0.0
  • ページ数: 320ページ(PDF版換算)
  • 対応フォーマット: PDF
  • 出版社: マイナビ出版

対象読者

Webデザイナー、Web制作者

著者について

エ・ビスコム・テック・ラボ

さまざまなメディアにおける企画制作を世界各地のネットワークを駆使して展開。コンピュータ、インターネット関係では書籍、CD-ROM、デジタル映像、CG、ソフトウェアの企画制作、WWWシステムの構築などを行う。
主な編著書： 『WordPress3　サイト構築スタイルブック』マイナビ刊
『WordPress3　デザイン＆カスタマイズ　スタイルブック』同上
『CSS3　スタンダード・デザインガイド』同上
『XHTML/HTML+CSS　スーパーレシピブック』同上
『Movable Type　サイトデザイン＆レシピ事典』同上
『Dreamweaver+HTML5&CSS3レッスンブック』ソシム刊
『HTML5 & CSS3ステップアップブック』同上
『WordPressデザインブック3.x対応』同上
『HTML/XHTML＆スタイルシート　レッスンブック』同上
『HTML/XHTML＆スタイルシート　デザインブック』同上

目次

Chapter1　スマートフォンやタブレットに対応したサイト構築の考え方

  • 1 スマートフォン＆タブレットに対応したWeb サイト制作の歴史
  • 2 レスポンシブWebデザイン
  • 3 densityに基づいたビューポート

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

  • ■デザインを切り替えるための横幅の決定
  • ■レスポンシブWebデザインにおける主要レイアウトパターン
  • ■レスポンシブWebデザインの基本設定
  • A 可変レイアウトによるレスポンシブWebデザイン
  • B 固定レイアウトによるレスポンシブWebデザイン
  • C 可変レイアウト＋固定レイアウトによるレスポンシブWebデザイン

Chapter3 特性や機能の判別

  • 1 デバイスの特性や機能の判別
  • 2 CSS3のメディアクエリ
  • 3 CSSOMによるメディアクエリ
  • 4 JavaScriptで特性の値を取得する
  • 5 機能の判別

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

  • 1 ビューポートの基本設定
  • 2 アドレスバーの表示
  • 3 Webクリップのアイコンの指定

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

  • 1 高解像度なデバイスへの対応
  • 2 高解像度な画像の利用
  • 3 SVGの利用
  • 4 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の利用
Home 〉 書籍一覧 〉 スマートフォンサイトのためのHTML5+CSS3 ▲ ページトップへ戻る