スマートフォン(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、タブレット向けのスマートフォンサイト制作をしたい方
- スマートフォンサイト制作の案件の問い合わせのある業者様
- スマートフォンサイト構築が初めての方
カリキュラム
特徴
- 日本初、レスポンシブWebデザイン のカリキュラムを正式導入
- レスポンシブWebデザイン の第一人者であり、多くの実績がある講師が担当
- iOS端末、Android端末、Windows Phone 7、BlackBerryへ対応
- 実践レベルに合わせたカリキュラム
- 最新の実案件を元にしたスマートフォンサイト開発ケーススタディーの提供
進行方法
- 講座は1日全8時間です。
- パソコン持参の方には事前に環境設定のメールをご案内いたします。
- 本講座ではCSS3は詳解していません。ご希望の方はCSS3講座にご参加ください。
内容
- デスクトップとモバイルの違い
- モバイルファースト
- 開発環境の設定
- レスポンシブ・ウェブデザインとは
- Fluid Image(Flexible image)
- Fluid Grid(Flexible grid)
- Media Query(メディア・クエリ)
- 実践基本サンプルサイト
- ボックスモデル
- 背景画像の処理
- スマートTVと表示の注意点
- モバイルサイトの為のパフォーマンスチューニング