初心者にもわかり易く丁寧に教えていただきました。
一度も購入で何度でも見直しができて、すごく理解できました。
PRO COURSE
HTML5+CSS3 Webデザインとプログラミング講座
最新のHTML5とCSS3に準拠したWebページを、ソースコードを書いて制作することができるようになります。
最新のHTML5とCSS3を駆使して
Web業界で活躍できるスキルを習得
この講座はHTML5とCSS3を使ったWebページの制作スキルを学べる講座です。
全編、手を動かして作品を制作しながら学ぶことができるので、明日から使える実践的なスキルが身につきます。
受講における必要条件
- コースを始める前に添付の「練習素材」をダウンロードしてください。
- 講座を受講するために特別な知識は必要ありません。練習素材も添付されているのですぐに学習をスタートできます。
ホームページ編集ソフトなど準備するものは何もありません。インターネットにつながったパソコンがあればそれだけで大丈夫です。 事前にパソコンの専門的な知識も必要ではありません。
最新のHTML5とCSS3でWebページを作る
- Webページ制作に必要な知識はすべて基本からていねいに分かりやすく説明しているので、これだけでサイト作成のスキルを身につけられます。
- 将来役立つかもしれないけれど今は必要はないという知識は含んでいません。実践を重視した講座です。
- 実際に手を動かしてコードを書き、ひとつのサイトを制作していきます。
- 解説はすべて動画で行い、現役のデザイナーがページを制作する工程をマウスの動きひとつまで収録しています。
- ナレーション付きでわかりやすく解説しています。
- 必要な画像素材はすべてダウンロード可能です。
Web業界で活躍できるスキルが確実に身につく
この講座を修了すると、最新のHTML5とCSS3に準拠したWebページを、ソースコードを書いて制作することができるようになります。Webデザイナーとして仕事をするのに必要なスキルが確実に身につきます。
Course content
Total
10 hours 12 minutes
Preview
You can preview lectures with this label
Section 1:WEBサイトのしくみ | ||||
1 | 練習素材 | 1:00 | ||
2 | 準備と基礎知識 | Preview | 6:11 | |
3 | サイトとWEBサーバー | 2:52 | ||
4 | html文書の編集方法 | 8:14 | ||
5 | CSSについて | 3:38 | ||
6 | CSSの中身 | 6:34 | ||
7 | htmlとcssの関係 | 4:29 | ||
Section 2:htmlとCSSの基礎知識 | ||||
8 | エディターの準備 | 5:26 | ||
9 | htmlとCSSの実際 | 5:39 | ||
10 | タグの書き方(1) | 7:03 | ||
11 | タグの書き方(2) | 7:23 | ||
12 | CSSの説明 | Preview | 5:26 | |
13 | CSSをhtmlに適用する | 6:25 | ||
Section 3:Test_Siteの制作 | ||||
14 | HTMLの構造 | 7:06 | ||
15 | head要素 | 6:27 | ||
16 | body要素 | 6:40 | ||
Section 4:トップページの制作 | ||||
17 | index.htmlの構造 | 5:14 | ||
18 | bodyの設定 | 5:53 | ||
19 | containerの配置 | 7:52 | ||
20 | containerのCSS設定 | Preview | 5:34 | |
21 | containerの中央配置 | 9:49 | ||
22 | class(クラス)とid | 6:47 | ||
Section 5:コンテンツの制作 | ||||
23 | bodyの仕上げ(1) | 5:46 | ||
24 | bodyの仕上げ(2) | 7:24 | ||
25 | フォントの設定 | 5:22 | ||
26 | header, main, footerの配置 | 6:55 | ||
27 | header, main, footerのCSS設定 | 5:20 | ||
28 | headerの仕上げ | 6:22 | ||
29 | Logo_areaのCSS設定 | 4:20 | ||
30 | Logo_areaの仕上げ | Preview | 6:32 | |
31 | Logo_areaのリンク設定 | 7:39 | ||
32 | バナー画像の配置 | 11:27 | ||
33 | Global_Naviの設定(1) | 7:07 | ||
34 | Global_Naviの設定(2) | 7:21 | ||
35 | Global_Naviの設定(3) | 7:47 | ||
36 | Global_Naviの設定(4) | 12:13 | ||
37 | パスの指定方法 | 11:17 | ||
Section 6:Side_naviの制作 | ||||
38 | 画像と要素の配置 | 8:08 | ||
39 | Side_navi, Main_box, Banne | 10:23 | ||
40 | なぜ横一列に配置されない? | 8:08 | ||
41 | Side_navi ul, liの配置 | 7:30 | ||
42 | Side_navi ul, liのCSS | Preview | 5:31 | |
43 | ロールオーバーのhtml設定 | 7:01 | ||
44 | ロールオーバーのCSS設定 | 9:37 | ||
45 | トップ以外のボタンのhtml設定 | 6:53 | ||
46 | トップ以外のボタンのCSS設定 | 6:03 | ||
47 | スキマはどこから? | 7:52 | ||
Section 7:Main_boxの制作 | ||||
48 | 内容の検討 | 3:26 | ||
49 | テキストの挿入 | 8:01 | ||
50 | テキストのマークアップ | 7:10 | ||
51 | MainBox_itemの仕上げ | Preview | 9:07 | |
52 | 新着情報の設定(1) | 8:37 | ||
53 | 新着情報の設定(2) | 7:43 | ||
54 | 新着情報の設定(3) | 9:04 | ||
55 | Banner_boxの制作 | 12:59 | ||
56 | footerの制作 | 4:00 | ||
Section 8:corporate.htmlの制作 | ||||
57 | ページの概要 | 4:15 | ||
58 | MainBox_subの配置とCSS設定 | 9:29 | ||
59 | Subpage_Titleの設定 | 7:37 | ||
60 | Corporate_titleの設定 | 11:52 | ||
61 | tableの設定(1) | 5:39 | ||
62 | ableの設定(2) | 6:50 | ||
63 | tableの設定(3) | 9:16 | ||
64 | Side_naviの設定 | 5:23 | ||
Section 9:modelhouse.htmlの制作 | ||||
65 | ページの概要 | 5:13 | ||
66 | ページの準備 | 5:04 | ||
67 | MainBox_itemの設定 | 6:52 | ||
68 | Item_titleの設定 | 10:15 | ||
69 | Item_box, Item_textの設定 | 6:42 | ||
70 | Side_naviの設定 | 1:54 | ||
Section 10:お問合せformページの制作 | ||||
71 | ページの準備 | 8:22 | ||
72 | ページ内容の検討 | 5:38 | ||
73 | ワイヤーフレームの検討 | 5:16 | ||
74 | p要素の設定 | 4:42 | ||
75 | CSS3でグラデーションを設定 | Preview | 12:56 | |
76 | labelとinput要素の配置 | 9:00 | ||
77 | input要素のCSS設定 | 8:03 | ||
78 | CSS3によるシャドウの設定 | 5:31 | ||
79 | メールアドレス入力部品の設定 | 8:19 | ||
80 | 郵便番号入力部品の設定 | 10:22 | ||
81 | ラジオボタンの設定 | 8:52 | ||
82 | チェックボックスの設定 | 6:52 | ||
83 | プルダウンメニューの設定 | 10:48 | ||
84 | 送信とリセットボタンの設定 | 10:13 | ||
85 | リンク先urlの設定 | 8:34 |