2回コース講座 スマートフォンサイトコーディング講座

PC用のHTML・CSSは書ける方向けに、スマートフォン・タブレット・PCなど様々なデバイスで閲覧できる「レスポンシブWebデザイン」の作り方を学び、実際に作ってみることで身につける講座です。

意味がよくわからないままコピペで済ませるのではなく、「意味を理解して自分で書けるようになる」ことをテーマにしています。

レスポンシブWebデザインだけでなく、素早い HTML・CSS コーディングを手助けするための「Emmet」や「BEM」など、モダンなコーディングに必要な知識の習得も含む5時間×2日間（合計10時間）の講座です。

■対象となる方
この講座は「PC向けのHTML・CSSが書ける方」を対象にしています。
JavaScriptに関する知識は不要です。

■予定している内容

□座学（スライド）で学ぶ内容

・近年のスマートフォン事情
・Android対応がやりやすくなった理由
・スマートフォン対応、マルチデバイス対応にはどのような方法があるか、それぞれのメリットとデメリット
・Retina（HiDPI）ディスプレイとは、その対応方法は
・Retina対応の高解像度画像でも、ファイルサイズを大きくしない方法
・レスポンシブイメージの使いどころと、ハマりそうなところ
・コーディング時間を大幅に減らすには
・最近増えてきている「BEM」とは何か

□実習で学ぶ内容

・スマートフォンサイト制作におけるChrome開発者ツールの使い方
・HTML5やCSS3がどのWebブラウザーで使用できるか、Chromeから素早く検索できるようにする
・「Emmet」を使用した素早いHTML・CSSコーディング、「BEM」との連携について
・iOSで勝手にフォントサイズが変更されたり電話番号にリンクされないようにする
・メインビジュアルを普通のレスポンシブイメージではなく、人物写真の顔部分がアップになるようトリミングされたレスポンシブWebデザイン対応の画像にする
・PCでは横に並べて、スマートフォンでは縦に並べて表示されるカラムを作る
・Retinaディスプレイでも、ピンチアウトで拡大しても荒れないベクターグラフィックのアイコンを素早く配置する
・日本語Webフォントを使用して、Androidを含むあらゆる環境で日本語明朝体を表示させる
・jQueryライブラリを使用してハンバーガーボタンをタップするとメニューがスライドしながら出てくるようにする
・Macの「iOSシミュレーター」でiPhoneやiPadの表示確認をする、素早くスクリーンショットを撮影する

この講座で制作するスマートフォンサイトのスクリーンショットや動作サンプル（動画）をブログに掲載しておりますので、よろしければご覧ください。
http://stocker.jp/diary/sp-lesson/