技術評論社サイトのロゴ

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

著者
ネットイヤークラフト株式会社（ねっといやーくらふとかぶしきがいしゃ），荒井千佳（あらいちか），入江寿栄（いりえとしはる）　著
定価
2,618円（本体2,380円＋税10%）
発売日
2013.8.21［在庫なし］ 2013.8.22
判型
B5変形
頁数
224ページ
ISBN
978-4-7741-5880-8 978-4-7741-5985-0

サポート情報

概要

本書は，スマートフォンサイト制作とレスポンシブ・ウェブの基礎の両方を，一冊で学ぶことができます。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　レスポンシブ化に役立つツール

プロフィール

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

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

荒井千佳（あらいちか）

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

入江寿栄（いりえとしはる）

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