おためし受講中

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

この授業ではスマホサイトの特性と振る舞いを学び、完成予想図通りに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

学生代表

  • 新井 利佳

    新井 利佳

    スクー放送部

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介&アジェンダ
    02:25  (00:14 ~ )
    メインコンテンツのコーディング
    01:52  (02:39 ~ )
    メインコンテンツのコーディング: sectionの中にfigureタグを置く
    10:08  (04:31 ~ )
    文字のデザイン指定
    01:01  (14:39 ~ )
    文字のデザイン指定: 【実践】段落の文字の指定
    10:50  (15:40 ~ )
    メインコンテンツのコーディング: お問い合わせフォームを作る
    01:04  (26:30 ~ )
    メインコンテンツのコーディング: formタグの中身を作る
    00:55  (27:34 ~ )
    メインコンテンツのコーディング: formの中にtableを作る
    00:15  (28:29 ~ )
    メインコンテンツのコーディング: trの中身を作る
    01:26  (28:44 ~ )
    メインコンテンツのコーディング: 【実践】実際に書いていこう
    10:48  (30:10 ~ )
    メインコンテンツのコーディング: 骨組みのUIをcssで組み立てる
    00:59  (40:58 ~ )
    メインコンテンツのコーディング: 【実践】フォームのsectionの指定をする
    21:51  (41:57 ~ )
    【後半】質疑応答
    Q:フィギュアータグを使うべきか、ただのimgだけにするべきかいつも悩みます。
    00:43  (1:04:04 ~ )
    Q:line - heightにどうして単位を入れるのでしょうか?
    01:13  (1:04:47 ~ )
    Q:rem指定でフォントサイズの感覚を掴むために「こうするとわかりやすい」とかありますか?
      (1:06:00 ~ )