ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/342/room ーーーーーーーーーーーーーーーーーーーーーーー

1. スマホ最適化のためのデザイン・コーディング実習
2014年1月13日

2. 本日のアジェンダ
・プロフィール
・完成系の確認/ファイルをダウンロード(5分)
・index.htmlに追加の記述(5分)
・新しく作るCSSファイルを読み込み(5分)
・sp.cssを作成、メディアクエリの記述(5分)
・インスペクタを使ってCSS構築(45分)
・レティナディスプレイのための画像対応方法(10分)
・質疑応答(15分)

3. プロフィール
池田 祐太郎
ウェブサイト構築とコンサルティング
!
!
!
http://highfivecreate.com/

4. 制作に入る前に
質問：
インスペクタ（Chrome/Safariの開発者ツール）や
Firebugをどのように使っていますか？
!
1.html, css, javascriptのデバッグ
2.CSS構築のメインツール
3.使わない、使ったことがない
4.その他

5. 完成系の確認/ファイルをダウ
ンロード
レスポンシブ対応させるサイトはこちら
http://highfivecreate.com/sample/course/samplesite/finish/
!
!
zipファイルをダウンロード
http://highfivecreate.com/sample/course/samplesite/
finish_res/data.zip
!
!
レスポンシブ対応した完成形（ウィンドウ幅を狭めて確認）
http://highfivecreate.com/sample/course/samplesite/
finish_res/

6. index.htmlに追加の記述
viewportとformat-detection
!
<meta name="viewport" content="width=devicewidth">
<meta name="format-detection"
content="telephone=no">

7. 新しく作るCSSファイルを
読み込み
linkタグを追加

8. sp.cssを作成、メディアクエ
リの記述
@media screen and (max-width: 640px) {
/*ここにsmartphone用のcssを記述していく*/
}
!
ブレークポイント：640px

9. インスペクタを使って
CSS構築
主要なcss（body, 横幅指定系[#wrap, #mainなど]）か
ら記述

10. レティナディスプレイのため
の画像対応方法
高解像度表示に対応するために2倍の画像で作り直す
※読み込みスピードを意識

11. 質疑応答
本日の授業内容について
レスポンシブWebデザイン
インスペクタ
etc…

12. 課題
レスポンシブWebデザインで
スマホサイトを作ってみよう！

13. ありがとうございました
またお会いしましょう