Top Design HTML5+CSS3 Webデザインとプログラミング講座
PRO COURSE

HTML5+CSS3 Webデザインとプログラミング講座

最新のHTML5とCSS3に準拠したWebページを、ソースコードを書いて制作することができるようになります。

最新のHTML5とCSS3を駆使して
Web業界で活躍できるスキルを習得

この講座はHTML5とCSS3を使ったWebページの制作スキルを学べる講座です。

全編、手を動かして作品を制作しながら学ぶことができるので、明日から使える実践的なスキルが身につきます。


受講における必要条件

  • コースを始める前に添付の「練習素材」をダウンロードしてください。
  • 講座を受講するために特別な知識は必要ありません。練習素材も添付されているのですぐに学習をスタートできます。

ホームページ編集ソフトなど準備するものは何もありません。インターネットにつながったパソコンがあればそれだけで大丈夫です。 事前にパソコンの専門的な知識も必要ではありません。

最新のHTML5とCSS3でWebページを作る

  • Webページ制作に必要な知識はすべて基本からていねいに分かりやすく説明しているので、これだけでサイト作成のスキルを身につけられます。
  • 将来役立つかもしれないけれど今は必要はないという知識は含んでいません。実践を重視した講座です。
  • 実際に手を動かしてコードを書き、ひとつのサイトを制作していきます。
  • 解説はすべて動画で行い、現役のデザイナーがページを制作する工程をマウスの動きひとつまで収録しています。
  • ナレーション付きでわかりやすく解説しています。
  • 必要な画像素材はすべてダウンロード可能です。

Web業界で活躍できるスキルが確実に身につく

この講座を修了すると、最新のHTML5とCSS3に準拠したWebページを、ソースコードを書いて制作することができるようになります。Webデザイナーとして仕事をするのに必要なスキルが確実に身につきます。

About the Instructor

ムラモリ コウ
株式会社テクセル 代表

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

See more

Course content

Total 10 hours 12 minutes
Preview You can preview lectures with this label
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
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
Test_Siteの制作
14 HTMLの構造 7:06
15 head要素 6:27
16 body要素 6:40
トップページの制作
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
コンテンツの制作
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
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
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
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
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
お問合せ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

Ratings and reviews

4.3
4 reviews
5 stars
50%
4 stars
25%
3 stars
25%
2 stars
0%
1 stars
0%
初心者にもわかり易く丁寧に教えていただきました。
一度も購入で何度でも見直しができて、すごく理解できました。
See more

Related Courses