chevron_left PCサイトコーディング

PCサイトコーディング

PREMIUM
第1回

PCサイトコーディング -デザインを元にマークアップしよう-

2016年6月22日 60min

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

1 / 51

授業の概要

このコースでは、HTMLとCSSの基本的なスキルを持った方を対象に、企業のコーポレートサイトのような簡単なPCサイトのコーディングについて全6限で学びます。

「様々なテクニックを使いこなして、かっこいいWebサイトを作れるようになりたい」という気持ちは、Web制作を行う誰もが思うことです。しかしながら、基礎があやふやだと応用がききません。まずは基本的なレイアウトをきちっと実装できるように、基礎力をしっかり身につけることが大切です。

第1回はサンプルデザインをもとにHTMLを書いていきます。

授業を通して、簡単なレイアウトのサンプルデザインを使って、実際にWebページとして完成させましょう。

こんな人にオススメ

HTML、CSSの基本を学んだので実際にWebサイトを制作したいと考えているWebデザイナー

授業で使用する教材

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

チャプター

play_arrow
自己紹介
01:28
play_arrow
今日のゴール
01:30
play_arrow
今日の授業内容
00:50
play_arrow
サンプルデータの説明
01:57
play_arrow
Marcketchの紹介
05:03
play_arrow
デザインを見てどうマークアップするか考えよう
02:07
play_arrow
基本のHTML
02:11
play_arrow
HTMLを書こう
00:15
play_arrow
HTMLを書こう - header
01:33
play_arrow
HTMLを書こう - main
00:45
play_arrow
問題#01
05:07
play_arrow
答え#01
00:24
play_arrow
h1について
00:30
play_arrow
キャッチコピー
00:37
play_arrow
Our Mission
02:10
play_arrow
画像のalt属性について
03:28
play_arrow
Topics
03:54
play_arrow
「もっと見る」
00:30
play_arrow
問題#02
03:11
play_arrow
答え#02
00:18
play_arrow
CSSだけで表現できること:例
00:47
play_arrow
「ページトップへ」
01:42
play_arrow
HTMLを書こう - footer
00:37
play_arrow
問題#03
02:48
play_arrow
答え#03
01:38
play_arrow
まとめ
03:22
play_arrow
Q:最近、モダンなwebサイトだと画面一杯に大きな背景画像が現れ、グローバルnavもその画像の上にかかってるサイトをよく見かけるのですが、そういう場合はmainの中にheaderが入っているのでしょうか?
02:22
play_arrow
Q:日付の<p>2016.06.20</p>は<time></time>でしなくてもいいですか?
00:58
play_arrow
Q:ずっと企業ロゴをh1にしてました。企業ロゴはh2くらいにしておいたらいいですか?
01:03
play_arrow
Q:©は& c o p y ;で、今回はしない感じですか?
01:30
play_arrow
Q:先生はarticlやsectionは使いませんか?
01:37
play_arrow
Q:footerのナビゲーションがグローバルナビゲーションのメニュー、プラス下層ページのサイトマップになってる場合は、navにしてもよいのでしょうか?
01:27
play_arrow
お知らせ