chevron_left

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

PREMIUM
第2回

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

2015年9月14日 60min

スライド資料

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

1 / 37

授業の概要

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

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

■ 事前準備

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

 

この授業では素材ファイルを使用します。事前に第1回の教室(動画ページ)内スライド資料下の「ファイル」ボタンより下記素材ファイルをダウンロードしておいて下さい。

[2799_downloads]

ファイル内にはjs./css/imagesの他、デザインカンプ画像/遷移図/Webライティング/完成イメージが含まれていますので、都度完成イメージを確認しながら進めましょう。

 

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

こんな人にオススメ

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

チャプター

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