スマホサイトコーディング入門 -ファーストビューのUIを作る-

この授業ではスマホサイトの特性と振る舞いを学び、完成予想図通りにHTMLとCSSでコーディングして完成させるまでを学んでいきます。
Googleアルゴリズムがスマホ対応サイトを優先するようになり、ますますWebサイトはスマホUIが重要になってきました。コーディングは初めてという方はもちろん、PCサイトは作ったことがあるがスマホサイトは未経験という方にオススメの授業です。

今回のアジェンダアジェンダ
・スマホにフィットするファーストビューの作り方
・レビュー／実機検証

■ 事前準備

この授業はテキストエディタとブラウザ(GoogleChrome)を使用します。またHTML／CSSの基本を理解している方を対象としています。自信の無い方は、下記授業をご受講ください。

• WebデザインのためのHTML入門
• WebデザインのためのCSS入門

はじめて受講される方は、前回までの演習素材を下記URLからダウンロードしておいて下さい。
http://behomazn.com/schoo/20150921/20150921.zip

サイトの完成図です。サイズが全て%表記されています。制作のヒントにして下さい。
http://behomazn.com/schoo/20150921/size.jpg

CSSの完成見本です。CSSはこちらを手本にコーディングしてみてください。
http://behomazn.com/schoo/20150921/schoo_kids/css/style.css

■ そのリンク

スライドP4: Page Ruler(chromeの拡張機能) 
https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn

スライドP9: html-5-reset-stylesheet
http://html5doctor.com/html-5-reset-stylesheet/