スマートフォン(SmartPhone) モバイル タブレット Galaxy iPad

第9回レスポンシブWebデザイン手法で学ぶ
スマートフォンサイト制作基礎講座

昨今のスマートフォン市場は、デバイスの増加に伴いOSとスクリーンサイズが多様化している事でスマートフォンサイト制作を困難にしています。

スマートフォンサイト制作のアプローチには2つの方法があります。
1つはサーバーサイドでデバイス(ユーザーエージェント:UA)ごとに振り分け、複数のHTML、CSSを作成する方法。もうひとつは、CSS3の Media Queries(メディアクエリ)でウィンドウサイズを基準にCSSのみを切り分ける方法です。

本講座では、後者のCSSだけで複数の OS やデバイスに対応するResponsive Web Design(レスポンシブWebデザインを中心に学習します。もちろん、スマートフォンのサイズになった際の制作方法も学ぶ事ができます。

対象

  • HTML5を理解されている方
  • CSSで自分で最初からページを組む事ができる方
  • CSSの継承・相対単位・フォントサイズを理解されている方
  • iOS、Android、Windows Phone 7、タブレット向けのスマートフォンサイト制作をしたい方
  • スマートフォンサイト制作の案件の問い合わせのある業者様
  • スマートフォンサイト構築が初めての方

カリキュラム

特徴

  1. 日本初、レスポンシブWebデザイン のカリキュラムを正式導入
  2. レスポンシブWebデザイン の第一人者であり、多くの実績がある講師が担当
  3. iOS端末、Android端末、Windows Phone 7、BlackBerryへ対応
  4. 実践レベルに合わせたカリキュラム
  5. 最新の実案件を元にしたスマートフォンサイト開発ケーススタディーの提供

進行方法

  1. 講座は1日全8時間です。
  2. パソコン持参の方には事前に環境設定のメールをご案内いたします。
  3. 本講座ではCSS3は詳解していません。ご希望の方はCSS3講座にご参加ください。

内容

  1. デスクトップとモバイルの違い
  2. モバイルファースト
  3. 開発環境の設定
  4. レスポンシブ・ウェブデザインとは
  5. Fluid Image(Flexible image)
  6. Fluid Grid(Flexible grid)
  7. Media Query(メディア・クエリ)
  8. 実践基本サンプルサイト
  9. ボックスモデル
  10. 背景画像の処理
  11. スマートTVと表示の注意点
  12. モバイルサイトの為のパフォーマンスチューニング

実習で利用するソフト

テキストエディタ(要UTF-8入力)を利用して開発します。特殊ツールは講座でご紹介します。

  1. Windows:TeraPad
  2. Mac:ミミカキエディット
  3. Safari5
パソコン持参の方は上記アプリケーション、もしくは代用ソフトをご用意下さい。 講座でもインストール方法をご紹介しますが、参考に技術評論社のページを参照くださいませ。