1/22(Tue)

今日の生放送

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

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

第1回:2015年9月14日公開

60min

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

おためし受講する(5分)

コース概要

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

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

■ 事前準備

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

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

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

担当の先生

パーソナリティ

  • 新井 利佳

    新井 利佳

    スクー放送部

参加したい受講生 : 2062

カテゴリー

タグ

サンプルファイル

授業で使用するファイル
今なら初月無料ですべての授業が見放題!
今すぐ無料でおためし

授業リスト

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

2015年9月14日公開

60min.

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

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

■ 事前準備

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

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

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

 

  • 自己紹介&アジェンダ
  • 02:39
  • なぜスマホ用のUIが必要なのか?
  • 01:42
  • なぜスマホ用のUIが必要なのか?: スマホデバイスの特徴
  • 01:44
  • なぜスマホ用のUIが必要なのか?: UIはリキッドデザインで作る
  • 00:39
  • なぜスマホ用のUIが必要なのか?: html5とcss3が使える
  • 00:57
  • なぜスマホ用のUIが必要なのか?: 画像は極力使わない
  • 00:50
  • なぜスマホ用のUIが必要なのか?: 動画、jQueryも極力使わない
  • 00:34
  • なぜスマホ用のUIが必要なのか?: タッチパネル操作で作る
  • 01:31
  • 制作現場での制作手順
  • 00:25
  • 制作現場での制作手順: レギュレーションを把握する
  • 00:52
  • 制作現場での制作手順: 制作仕様書
  • 00:54
  • 制作現場での制作手順: コーディングルール
  • 02:16
  • 制作現場での制作手順: コーディングガイドライン
  • 03:43
  • デザインカンプの確認
  • 00:57
  • デザインカンプの確認: 遷移図
  • 01:38
  • デザインカンプの確認: Webライティング
  • 01:05
  • コーディング: 【実践】配布素材を元に準備をしよう
  • 04:53
  • コーディング: 【実践】index.htmlを作ろう
  • 02:26
  • コーディング: 【実践】htmlの中にランゲージを書こう
  • 03:41
  • コーディング: 【実践】構図を確認しよう
  • 03:23
  • コーディング: 【実践】骨組みのhtml構造を作ってみよう
  • 01:34
  • コーディング: 【実践】骨組みのhtmlの中にタグを用いて要素を入れていこう
  • 13:38
  • Q:確認はPCを使ってブラウザの横幅を大きくしたり小さくしたりで確認じゃダメなのでしょうか?
  • 01:36
  • Q:sectionはarticle内に必ず書くものですか?
  • 00:18
  • Q:文字化けの直し方がわかりません。
  • 01:04
  • Q:SNSとメニューのリストを1つのnavにまとめていましたが、分けなくても良いものでしょうか。
  • 00:42
  • Q:最終的にPC・タブレットへの対応も仕込みますか?
  • 00:52
  • Q:田中先生はOOCSSやBEM、SMACSS、google guidelineなどのガイドライン、コーディングルールで実際に制作していますか?

スライド資料

スマホサイトコーディング入門 -スマートフォンUIの特徴とCSSコーディング-

2015年9月14日公開

60min.

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

今回のアジェンダアジェンダ
・スマホUIの仕組み
・スマホUIに必要な物
・モバイルフレンドリーなUIを実現する方法

■ 事前準備

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

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

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

  • 自己紹介&アジェンダ
  • 01:10
  • 1限目のコーディングの続き
  • 10:41
  • スマホUIの仕組み
  • 00:24
  • スマホUIの仕組み: デバイス幅について
  • 02:09
  • スマホUIの仕組み: ピクセル密度について
  • 02:22
  • スマホUIに必要な物
  • 05:33
  • タッチパネル操作で作る
  • 02:04
  • モバイルフレンドリーなUI: デザインカンプのトレース
  • 01:14
  • モバイルフレンドリーなUI: ピクセルを測る
  • 04:09
  • モバイルフレンドリーなUI: コーディングルールについて
  • 03:41
  • モバイルフレンドリーなUI: フォントはfont-family:sans-serif;に指定する
  • 00:20
  • モバイルフレンドリーなUI: class名、id名のネーミング
  • 00:53
  • モバイルフレンドリーなUI: css resetについて
  • 01:13
  • モバイルフレンドリーなUI: フルードイメージについて
  • 01:37
  • CSSのやり方を学ぼう
  • 04:36
  • Q:最後の©はfont-iconは使わないのですか?
  • 00:24
  • Q:footerの見出しはh2、h3ではなく、どうしてh4が望ましいのでしょうか?
  • 01:02
  • Q:BEMはもう現場では必須と考えてよろしいでしょうか?
  • 01:12
  • Q:viewportについて
  • 00:50
  • Q:iphone6を意識してレスポンシブサイトを作る際について
  • 02:03
  • Q:スマホサイトでデザインカンプpsdデータからのスライスして、コーディングでするのが支流ですか?
  • 02:16
  • Q:pxを%に変換する際、先生は小数点以下桁数は何桁まで記述されていますか?
  • 00:51
  • Q:jQueryのライブラリについて
  • 01:11
  • Q:画像の圧縮など、携帯三社などの通信事業者が勝手に再圧縮したりすることはあるのでしょうか?
  • 03:40
  • Q:縦の%指定は何を基準にすればいいでしょうか?

スライド資料

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

2015年9月21日公開

60min.

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

スライド資料

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

2015年9月21日公開

60min.

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

スライド資料

スマホサイトコーディング入門 -ユーザーが操作するUIを作る:戻るボタンなど-

2015年9月28日公開

60min.

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

今回のアジェンダアジェンダ
・操作性を一義的に考える
・ユーザの操作に反応する画像
・上に戻るボタンを作る

■ 事前準備

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

 

スライド資料

スマホサイトコーディング入門 -ユーザーが操作するUIを作る:メニューなど-

2015年9月29日公開

90min.

 

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

今回のアジェンダアジェンダ
・メニュー部分のコーディング
・タップで開閉するドロワーメニューの作成

■ 事前準備

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

 

スライド資料

プレミアム生放送

関連授業

人気の生放送授業

もっと見る

新着の生放送授業

もっと見る

アクティビティ