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

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

B5変形判/224ページ

定価(本体2,380円+税)

ISBN 978-4-7741-5880-8

電子版

→学校・法人一括購入ご検討の皆様へ

書籍の概要

この本の概要

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

こんな方におすすめ

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

この書籍に関連する記事があります!

新世代のWeb制作スタイル
スマートフォンの普及率が5割となった現在(2013年7月末時点※),スマートフォンサイトを制作するための技術は,HTMLコーダーにとって必修項目と言えます。

目次

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

著者プロフィール

ネットイヤークラフト株式会社(ねっといやーくらふとかぶしきがいしゃ)

ネットイヤークラフトは,ウェブサイトやアプリの制作,運用の専門家集団として,ネットイヤーグループが手掛けるデジタルマーケティング全般を実装面からサポートしています。日々新しい技術が生み出されるウェブ業界の制作現場で,最新の技術にも積極的に取り組むことで制作ナレッジを蓄積し,顧客企業のさまざまなニーズに最適なソリューションを提案できるよう取り組んでいます。


荒井千佳(あらいちか)

ウェブ制作会社を経て,2008年にネットイヤークラフト株式会社に入社。HTMLコーダーとして企業サイト構築に携わる。HTMLコーディングだけではなくアクセシビリティーガイドライン作成や,JavaScript開発にも関わる。2章,3章の執筆を担当。


入江寿栄(いりえとしはる)

2002年に某制作会社にてECサイトのパッケージ開発に携わる。その後,ウェブディレクター,デザイナーを経て,2010年にHTMLコーダーとしてネットイヤークラフト株式会社に入社。大手企業サイトのHTMLコーディングや,JavaScriptによるウェブアプリケーションの開発などを行う。1章,4章の執筆を担当。