PRO COURSE

HTML5+CSS3 フロントエンド開発マスター講座

最新のHTML5とCSS3を基礎から完全にマスターすることを目的に作られたコースです。

Instructor: ムラモリコウ

HTML5、CSS3を駆使して
グリッドレイアウト & レスポンシブなページを作ろう

最新のHTML5とCSS3について学び、グリッドレイアウトとレスポンシブデザインを適用させたページを作れるようになるプログラミング講座です。実際にいくつものページを制作し、実践的なコーディングスキルを習得できます。

コーディングは初めてという方でも、確実にHTML5とCSS3の技術を身につけ、Webサイトを公開することができます。

このコースで学べること

CSS Gridのスキルが確実に身につきます
レスポンシブデザインであらゆるデバイスに対応したページを作る力が身につきます

こんな方にオススメ

HTMLとCSSを基礎から確実に学びたい方
Webサイト開発を我流ではなく正しく体系的に学び直したい方
最新のCSS Gridを理解しWebサイト制作に活かしたい方
手を動かして実践的な制作演習で達成感と自信を持てるコース学習をしたい方

この講座で、HTML5とCSS3の最新技術を確実に身につけましょう！

About the Instructor

ムラモリコウ

株式会社テクセル代表

大手半導体メーカー販促部門でデザイナーとして勤務後、Webデザイン会社を設立。現在は現場でのデザインとともに新人教育を多く行う。Adobe Photoshop, Illustrator, InDesignなどデザイン系のアプリケーションと、HTML, CSS, Java, PHPなどコーディングとプログラミングの解説がメインで、即戦力のスキルを伝えることに力を入れています。これまでに特に動画を使った指導カリキュラムを多く開発しており、わかりやすいと好評を得ています。

Course content

Total 17 hours 36 minutes

Section 1：WEBサイトのしくみ
1	ダウンロード資料01	1:00
2	準備と基礎知識	8:01
3	サイトとWEBサーバー	3:57
4	HTMLの編集	8:20
5	CSSファイルの役割	4:05
6	CSSの中身	6:18
7	HTMLとCSSの関係	4:12
Section 2：HTMLとCSSの基礎
8	ダウンロード資料02	1:00
9	エディターの準備	6:09
10	タグと要素	8:17
11	HTMLの書き方（１）	5:30
12	HTMLの書き方（２）	7:18
13	CSSの書き方	8:45
14	HTMLとCSSの関連付け	6:26
15	その他のCSSプロパティ	7:36
16	ボックスモデル	7:58
Section 3：HTMLとCSSの文法
17	ダウンロード資料03	1:00
18	制作の準備	3:09
19	HTMLの定型	9:28
20	HTMLコードの記述	6:59
21	id属性とclass属性	8:09
22	新しいタグ	10:39
23	containerのCSS設定	6:34
24	仕上げと完成	10:13
25	セレクターの書き方	8:58
Section 4：CSS Grid Layoutの基本
26	ダウンロード資料04	1:00
27	学習の準備	6:36
28	HTMLのコード	10:27
29	CSSの設定 (1)	6:41
30	CSSの設定 (2)	9:57
31	HTMLのコード	8:48
32	CSSのコード (1)	8:03
33	CSSのコード (2)	7:25
34	少し進んだグリッドレイアウト	5:45
35	HTMLのコード	8:02
36	レイアウトの簡略化	3:36
Section 5：iPadPro サイズページの制作
37	ダウンロード資料05	1:00
38	概要	5:48
39	ページレイアウト	5:58
40	HTMLのコード(1)	7:37
41	HTMLのコード(2)	8:15
42	containerのCSS	7:51
43	headerのGrid Layout	7:29
44	mainのCSS設定	9:14
45	SNSとfooterのCSS設定	13:46
46	headerの詳細設定(1)	10:36
47	headerの詳細設定(2)	7:08
48	メインビジュアルのCSS	4:25
49	写真の均等配置	9:28
50	記事本文のCSS	14:41
51	SNSのCSS	6:19
52	footerのCSS	13:14
53	リンクの設定(1)	11:01
54	リンクの設定(2)	7:48
55	WEBフォントの準備	10:09
56	WEBフォントの適用	9:50
Section 6：iPhoneサイズページの制作
57	ダウンロード資料06	1:00
58	概要	5:19
59	Wireframeの準備	5:55
60	サイトの全体像	4:50
61	containerの設定	10:30
62	各要素の設定(1)	7:03
63	各要素の設定(2)	10:00
64	仕上げ	11:24
Section 7：レスポンシブWEBデザインの概要
65	ダウンロード資料07	1:00
66	レスポンシブWEBデザインの概要	4:51
67	レスポンシブの理論	7:37
68	メディアクエリの役割	5:43
69	HTMLの記述	9:25
70	iPhoneサイズのCSS	10:04
71	iPadのCSS	10:38
72	PCサイズのCSS	9:27
73	Fluid Grid(1) HTML	13:49
74	Fluid Grid(2) CSS	9:54
75	Fluid Grid(3) CSS	9:46
76	Fluid Image(1) HTML	8:33
77	Fluid Image(2) CSS	12:16
78	Fluid Image(3) CSS	7:37
Section 8：Mejiroサイトのレスポンシブ化
79	ダウンロード資料08	1:00
80	このセクションでやること	6:25
81	iPhoneサイズのCSS設定(1)	5:28
82	iPhoneサイズのCSS設定(2)	8:41
83	iPhoneサイズの完成	11:32
84	iPadサイズのCSS設定(1)	8:28
85	iPadサイズのCSS設定(2)	9:12
86	iPadサイズのCSS設定(3)	10:19
87	iPadサイズのCSS設定(4)	7:07
88	iPadサイズの仕上げ	8:25
89	PCサイズの仕上げ	10:46
Section 9：indexページの制作(1)
90	ダウンロード資料09	1:00
91	サイトの構成	7:20
92	indexページの内容	6:07
93	html, CSSファイルの準備	8:05
94	XDを使った画像の書きだし(1)	7:56
95	XDを使った画像の書きだし(2)	6:00
96	HTMLへの原稿入力	6:48
97	navのHTMLとCSSコード	11:09
98	nav ulとliのCSS設定	9:41
99	「最新の目撃情報」のHTML	10:35
100	最新の目撃情報のCSS(1)	8:57
101	最新の目撃情報のCSS(2)	8:41
102	「野鳥観察会」のHTML	12:22
103	「野鳥観察会のお知らせ」CSS(1)	7:14
104	「観察会のお知らせ」CSS(2)	6:10
105	iPadサイズの設定(1)	6:49
106	iPadサイズの設定(2)	10:23
107	iPadサイズの設定(3)	11:59
108	「観察記録」html入力	11:50
109	「観察記録」CSS設定(1)	8:04
110	「観察記録」CSS設定(2)	6:31
Section 10：indexページの制作(2)
111	ダウンロード資料10	1:00
112	HTMLソースの準備(1)	12:12
113	HTMLソースの準備(2)	7:08
114	CSS Stylesheet (1)	6:53
115	CSS Stylesheet (2)	9:46
116	CSS Stylesheet (3)	10:36
117	チェックと修正	10:25
Section 11：contactページの制作
118	ダウンロード資料11	1:00
119	送信機能	3:36
120	サイトの準備	9:55
121	htmlのコーディング	7:46
122	CSS stylesheet	10:45
123	送信のための部品	4:55
124	送信用部品の配置	7:51
125	formタグの属性設定	5:57
126	inputタグの属性設定	6:36
127	textareaの設定	12:14
128	iPadサイズの設定	8:24
Section 12：野鳥観察会ページの制作
129	ダウンロード資料12	1:00
130	ページ内容の確認	8:09
131	htmlのコーディング(1)	7:48
132	htmlのコーディング(2)	9:54
133	iPhoneのCSS (1)	7:34
134	iPhoneのCSS (2)	10:17
135	iPadのCSS	11:08
136	リンクの設定 (1)	9:36
137	リンクの設定 (2)	7:59