chevron_left スマホサイトコーディング入門

スマホサイトコーディング入門

PREMIUM
第3回

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

2015年9月21日 60min

会員登録して、全てのスライドを見よう

1 / 23

授業の概要

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

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

■ 事前準備

この授業はテキストエディタとブラウザ(GoogleChrome)を使用します。またHTML/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/

こんな人にオススメ

Web制作フローを学びたい方、Webコーディングを学びたい方、スマホサイトコーディングの経験がない方