Schooをご利用になるには、JavaScriptの設定を有効にしてください。 →JavaScriptの設定方法（参考）

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

PREMIUM

第4回

スマホサイトコーディング入門 -メインコンテンツのUIを作る-

2015年9月21日 60min

スマホサイトコーディング入門 -メインコンテンツのUIを作る-

play_arrow おためし受講

スライド資料

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

1 / 26

授業の概要

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

今回のアジェンダアジェンダ
・メインコンテンツのコーディング
・文字のデザイン指定
・エミュレーターチェック
・実機検証

■ 事前準備

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

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

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

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

こんな人にオススメ

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

担当の先生／パーソナリティ

チャプター

自己紹介＆アジェンダ

メインコンテンツのコーディング

メインコンテンツのコーディング: sectionの中にfigureタグを置く

文字のデザイン指定

文字のデザイン指定: 【実践】段落の文字の指定

メインコンテンツのコーディング: お問い合わせフォームを作る

メインコンテンツのコーディング: formタグの中身を作る

メインコンテンツのコーディング: formの中にtableを作る

メインコンテンツのコーディング: trの中身を作る

メインコンテンツのコーディング: 【実践】実際に書いていこう

メインコンテンツのコーディング: 骨組みのUIをcssで組み立てる

メインコンテンツのコーディング: 【実践】フォームのsectionの指定をする

Ｑ：フィギュアータグを使うべきか、ただのimgだけにするべきかいつも悩みます。

Ｑ：line - heightにどうして単位を入れるのでしょうか？

Ｑ：rem指定でフォントサイズの感覚を掴むために「こうするとわかりやすい」とかありますか？