おためし受講中

スマホサイトコーディング入門 -構造設計とHTMLコーディング-

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

今回のアジェンダ
・スマホ用UIが必要とされる理由
・制作現場での制作手順
・コーディング

■ 事前準備

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

この授業では素材ファイルを使用します。事前に下記素材ファイルをダウンロードして置いて下さい。
http://behomazn.com/schoo/20150928/images.zip
 
また以下サンプルファイルも適時参考になさって下さい。

※ 授業中では0からコーディングを行っていきますので、可能な方は先生と一緒にコーディングしてみましょう。

 

学生代表

  • 新井 利佳

    新井 利佳

    スクー放送部

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

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介&アジェンダ
    02:39  (00:14 ~ )
    なぜスマホ用のUIが必要なのか?
    01:42  (02:53 ~ )
    なぜスマホ用のUIが必要なのか?: スマホデバイスの特徴
    01:44  (04:35 ~ )
    なぜスマホ用のUIが必要なのか?: UIはリキッドデザインで作る
    00:39  (06:19 ~ )
    なぜスマホ用のUIが必要なのか?: html5とcss3が使える
    00:57  (06:58 ~ )
    なぜスマホ用のUIが必要なのか?: 画像は極力使わない
    00:50  (07:55 ~ )
    なぜスマホ用のUIが必要なのか?: 動画、jQueryも極力使わない
    00:34  (08:45 ~ )
    なぜスマホ用のUIが必要なのか?: タッチパネル操作で作る
    01:31  (09:19 ~ )
    制作現場での制作手順
    00:25  (10:50 ~ )
    制作現場での制作手順: レギュレーションを把握する
    00:52  (11:15 ~ )
    制作現場での制作手順: 制作仕様書
    00:54  (12:07 ~ )
    制作現場での制作手順: コーディングルール
    02:16  (13:01 ~ )
    制作現場での制作手順: コーディングガイドライン
    03:43  (15:17 ~ )
    デザインカンプの確認
    00:57  (19:00 ~ )
    デザインカンプの確認: 遷移図
    01:38  (19:57 ~ )
    デザインカンプの確認: Webライティング
    01:05  (21:35 ~ )
    コーディング: 【実践】配布素材を元に準備をしよう
    04:53  (22:40 ~ )
    コーディング: 【実践】index.htmlを作ろう
    02:26  (27:33 ~ )
    コーディング: 【実践】htmlの中にランゲージを書こう
    03:41  (29:59 ~ )
    コーディング: 【実践】構図を確認しよう
    03:23  (33:40 ~ )
    コーディング: 【実践】骨組みのhtml構造を作ってみよう
    01:34  (37:03 ~ )
    コーディング: 【実践】骨組みのhtmlの中にタグを用いて要素を入れていこう
    13:38  (38:37 ~ )
    【後半】質疑応答
    Q:確認はPCを使ってブラウザの横幅を大きくしたり小さくしたりで確認じゃダメなのでしょうか?
    01:36  (52:49 ~ )
    Q:sectionはarticle内に必ず書くものですか?
    00:18  (54:25 ~ )
    Q:文字化けの直し方がわかりません。
    01:04  (54:43 ~ )
    Q:SNSとメニューのリストを1つのnavにまとめていましたが、分けなくても良いものでしょうか。
    00:42  (55:47 ~ )
    Q:最終的にPC・タブレットへの対応も仕込みますか?
    00:52  (56:29 ~ )
    Q:田中先生はOOCSSやBEM、SMACSS、google guidelineなどのガイドライン、コーディングルールで実際に制作していますか?
      (57:21 ~ )