chevron_left

PCサイトコーディング入門
PREMIUM
第1回

PCサイトコーディング入門 -スマホサイトUIとの違い-

2016年4月10日 60min
PCサイトコーディング入門 -スマホサイトUIとの違い- play_arrow おためし受講

スライド資料

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

1 / 42

授業の概要

「PCサイトコーディング入門」ではPCサイトの特性と振る舞いを学び、デザインカンプ通りにCSSコーディングしてシングルページのPC用UIを完成させるまでを学んでいきます。難易度はターミナルのWebデザイナールート、「A-1 WebデザインのためのHTML入門」「A-2 WebデザインのためのCSS入門」をご受講済みの方、または同程度のレベルの方に合わせてあります。

第1回「スマホサイトUIとの違い」では、「A-3 スマホサイトコーディング入門」未受講の方にも理解が深まるよう、スマホやタブレットなどのタッチデバイスに最適化したサイトとPCサイトのコーディングの違いをしっかり学びましょう。

■ 事前準備 この授業はテキストエディタとブラウザ(GoogleChrome)を使用します。

またHTML／CSSの基本を理解している方を対象としています。自信の無い方は、下記授業をご受講ください。

・WebデザインのためのHTML入門

・WebデザインのためのCSS入門

こんな人にオススメ

PCサイトのコーディングを習得したい方

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

授業で使用する教材

※授業以外での使用は禁止します

チャプター

play_arrow
授業の目的
00:44
play_arrow
アジェンダ
00:27
play_arrow
HTMLのアウトライン(文書構造)について
05:08
play_arrow
アウトラインを視覚化する方法
02:01
play_arrow
htmlファイルをW3CでValidation checkする
01:24
play_arrow
Validation checkから、文書構造をチェックする
01:38
play_arrow
文書構造内に見出しと要素が逆転している
06:38
play_arrow
アウトラインのUI化
01:21
play_arrow
可視化されたアウトラインを整理する
01:38
play_arrow
アルゴリズムは文書構造をHTMLタグで判断する
00:47
play_arrow
PC用UIは、固定幅で作る
06:17
play_arrow
サイトの幅を測る「Page Ruler」のインストール方法
02:04
play_arrow
Page Rulerで実際にサイト幅を測る
03:55
play_arrow
CSS3の対応ブラウザをチェック
08:50
play_arrow
レスポンシブデザインにする場合、画像はPC表示以上のサイズで作る
02:47
play_arrow
1024pxの固定幅と、それ以下のブラウザウィンドウへの対応
00:44
play_arrow
ユーザビリティを意識したUI設計
02:24
play_arrow
hoverによって、クリックできる場所をわかりやすく
09:00
play_arrow
CSSのセレクタについて
02:46
play_arrow
先生からのお知らせ
01:02
play_arrow
次回授業のお知らせ