手を動かしてマスター　WEBデザイナーコース　最新HTML5/CSS3をゼロから全て学ぶ

手を動かしてマスター　WEBデザイナーコース　最新HTML5/CSS3をゼロから全て学ぶ

手を動かしてマスター　WEBデザイナーコース　最新HTML5/CSS3をゼロから全て学ぶ
¥29,800
¥29,800
（税込） SALE 売り切れ

講座の内容

  • セクション1　WEBサイトのしくみ
  • 準備と基礎知識 7:43
  • サイトとサーバー 3:57
  • テキストエディター 8:19
  • CSSファイル 4:05
  • CSSファイルの中身 6:36
  • HTMLとCSSの関係 4:12
  • セクション2　基礎編
  • エディターの準備 6:09
  • 「タグ」と「要素」 8:09
  • HTMLの文法（１） 5:30
  • HTMLの文法（２） 7:18
  • CSSの文法 8:45
  • HTMLにCSSを読み込む 6:26
  • その他のCSSプロパティ 7:36
  • ボックスモデル 7:58
  • セクション3　htmlとCSSの文法
  • 制作の準備 3:09
  • HTMLの定型文 9:28
  • HTMLコードの記述 6:59
  • id属性とclass属性 8:09
  • 新しいタグ 10:39
  • container要素のCSS 6:34
  • 仕上げ 10:13
  • セレクターの書き方 8:58
  • セクション4　Grid Layoutの基本
  • 学習の準備 6:36
  • htmlのコード 0:27
  • CSSの設定（１） 6:41
  • CSSの設定（２） 9:57
  • htmlのコード 8:48
  • CSSのコード（１） 8:03
  • CSSのコード（２） 7:25
  • 少し複雑なGrid Layout 5:45
  • htmlのコード 8:02
  • レイアウトの簡略化 3:36
  • セクション5　iPadPro サイズページの制作
  • 概要 5:48
  • ページレイアウト 5:58
  • htmlのコード（１） 7:37
  • htmlのコード（２） 8:15
  • containerのCSS 7:51
  • headerのGrid Layout 7:29
  • mainのCSS設定 9:14
  • reset.cssとSNS 13:46
  • Flex Boxを使った均等配置（１） 10:36
  • Flex Boxを使った均等配置（２） 7:08
  • メインビジュアルのCSS 4:25
  • space-betweenとjustify-content 9:28
  • 記事部分のCSS 14:41
  • SNS部分のCSS 6:19
  • footer部分のCSS 13:14
  • リンクの設定（１） 11:01
  • リンクの設定（２） 7:48
  • WEBフォントのダウンロード 10:08
  • WEBフォントの適用 9:50
  • セクション6　iPhoneサイズ
  • 概要 5:19
  • Wireframeの準備 5:55
  • サイトの全体像 4:50
  • containerのCSS設定 10:30
  • CSSの詳細設定（１） 7:03
  • CSSの詳細設定（２） 10:00
  • 仕上げ 11:24
  • セクション7　Responsive Web Design
  • Responsive Web Designとは 4:51
  • Responsive Web Designの理論 7:37
  • メディアクエリ 5:43
  • htmlの書き方 9:25
  • iPhoneサイズのCSS 10:04
  • iPadのCSS 10:38
  • PCサイズのCSS 9:27
  • Fluid Gridのhtml 13:49
  • Fluid GridのCSS 9:54
  • Fluid Gridの単位 9:46
  • Fluid Imageのhtml 8:33
  • Fluid ImageのCSS 12:16
  • 背景画像のFluid Image 7:37
  • セクション8　Mejiroサイトのレスポンシブ化
  • ここで学ぶこと 6:25
  • iPhoneサイズのCSS（１） 5:28
  • iPhoneサイズのCSS（２） 8:41
  • iPhoneサイズの仕上げ 11:32
  • iPadサイズのCSS（１） 8:28
  • iPadサイズのCSS（２） 9:12
  • iPadサイズのCSS（３） 10:19
  • iPadサイズのCSS（４） 7:07
  • iPadサイズの仕上げ 8:25
  • PCサイズの仕上げ 10:46
  • セクション9　indexページ（１）
  • サイトの構成 7:20
  • indexページの内容 6:07
  • ファイルの準備 8:05
  • XDからの画像の書き出し（１） 7:58
  • XDからの画像の書き出し（２） 6:00
  • 文字部分の入力 6:48
  • nav部分の制作 11:09
  • nav部分のCSS設定 9:41
  • 「最新の目撃情報」のhtml 10:35
  • 「最新の目撃情報」のCSS（１） 8:57
  • 「最新の目撃情報」のCSS（２） 8:41
  • 「野鳥観察会」のhtml 12:22
  • 「野鳥観察会」のCSS（１） 7:14
  • 「野鳥観察会」のCSS（２） 6:10
  • iPadサイズのCSS設定（１） 6:49
  • iPadサイズのCSS設定（１） 10:23
  • iPadサイズのCSS設定（３） 11:59
  • 「観察記録」のhtml 11:50
  • 「観察記録」のCSS設定（１） 8:04
  • 「観察記録」のCSS設定（２） 6:31
  • セクション10　indexページ（２）
  • 図鑑部分のhtml（１） 12:12
  • 図鑑部分のhtml（２） 7:08
  • 図鑑部分のCSS（１） 6:53
  • 図鑑部分のCSS（２） 9:46
  • 図鑑部分のCSS（３） 10:36
  • ページ全体の仕上げ 10:25
  • セクション11　Contactページ
  • 送信機能 3:36
  • レイアウトの説明 9:55
  • htmlのコーディング 7:46
  • CSSの設定 10:45
  • 送受信の仕組み 4:55
  • 送信用部品をhtmlで配置 7:51
  • form属性の設定 5:57
  • input属性の設定 6:36
  • iPhone版のContactページ完成 12:14
  • iPadサイズページの設定 8:24
  • セクション12　「野鳥観察会」ページ
  • 内容の検討 8:09
  • htmlのコーディング（１） 7:48
  • htmlのコーディング（２） 9:54
  • iPhoneサイズのCSS（１） 7:34
  • iPhoneサイズのCSS（２） 10:17
  • iPadサイズのCSS 11:08
  • セクション13　リンクの設定
  • アンカータグの設定方法 10:37
  • <a>タグはどこに書く？ 5:31
  • パスの説明 5:25
  • 不具合の修正 10:18
WEBデザイナーを目指す人に最適のコースです。
WEBサイトの仕組から、最新の高度なコーディングまで、スマホページにも対応したレスポンシブWEBデザインについてもしっかり学習できます。
理論だけでなく実際に手を動かしてコーディングしながらページを完成させて学習するので理解しやすく、最短でスキルが習得できます。

こんな方にオススメ

  • 初歩からWEBデザイナーを目指す方
  • WEBサイト開発を我流ではなく正しく体系的に学び直したい方
  • 実際にやってみることで成果を確かめながら学習したい人
  • 即戦的なスキルを身につけたい人
  • モバイルデバイスにも対応したResponsiv WEBページを制作するスキルを身に付けたい方

習得できるスキル

  • HTML5とCSS3の最新技術が学べます
  • 実践的で実務ですぐに活用できるコーディング技術
  • スマートフォン、タブレット、PCすべてに対応できるResponsiv WEB Design

講座内容

手を動かして覚えましょう。

実際にコードを書いてみて、その結果を確認しながらコードの意味が理解でき、変化を楽しみながら学習をするので飽きることがありません。

コースではWEBサイトの仕組みから、スマートフォンにも対応するResponsiv Web Designの技術まで、初歩から高いレベルのスキルが学べます。

講座提供者

むらもりこう
むらもりこう

　大手半導体メーカー販促部門で勤務後、WEBサイトの開発を行うデザイン会社を設立。現在は現場での指導とともに社員の技術教育を多く行っています。

　Photoshop、Illustratorなどデザイン系のアプリケーションと、HTML、CSS、Javascript、Python/Djangoなどフロントエンドからサーバーサイドまで、フルスタックのプログラミングを解説しています。

　これまでにUdemyほかでコースを公開、Udemyでは80,000人を超える受講生の学びをサポートしています。

受講要件

  • 初めての方でも大丈夫ですが、HTML、CSSについて少しの知識があれば上達は早くなります。Adobe XDを使っている方にはXDの応用的な使い方が学べます。
¥29,800
¥29,800
（税込） SALE 売り切れ

講座の内容

  • セクション1　WEBサイトのしくみ
  • 準備と基礎知識 7:43
  • サイトとサーバー 3:57
  • テキストエディター 8:19
  • CSSファイル 4:05
  • CSSファイルの中身 6:36
  • HTMLとCSSの関係 4:12
  • セクション2　基礎編
  • エディターの準備 6:09
  • 「タグ」と「要素」 8:09
  • HTMLの文法（１） 5:30
  • HTMLの文法（２） 7:18
  • CSSの文法 8:45
  • HTMLにCSSを読み込む 6:26
  • その他のCSSプロパティ 7:36
  • ボックスモデル 7:58
  • セクション3　htmlとCSSの文法
  • 制作の準備 3:09
  • HTMLの定型文 9:28
  • HTMLコードの記述 6:59
  • id属性とclass属性 8:09
  • 新しいタグ 10:39
  • container要素のCSS 6:34
  • 仕上げ 10:13
  • セレクターの書き方 8:58
  • セクション4　Grid Layoutの基本
  • 学習の準備 6:36
  • htmlのコード 0:27
  • CSSの設定（１） 6:41
  • CSSの設定（２） 9:57
  • htmlのコード 8:48
  • CSSのコード（１） 8:03
  • CSSのコード（２） 7:25
  • 少し複雑なGrid Layout 5:45
  • htmlのコード 8:02
  • レイアウトの簡略化 3:36
  • セクション5　iPadPro サイズページの制作
  • 概要 5:48
  • ページレイアウト 5:58
  • htmlのコード（１） 7:37
  • htmlのコード（２） 8:15
  • containerのCSS 7:51
  • headerのGrid Layout 7:29
  • mainのCSS設定 9:14
  • reset.cssとSNS 13:46
  • Flex Boxを使った均等配置（１） 10:36
  • Flex Boxを使った均等配置（２） 7:08
  • メインビジュアルのCSS 4:25
  • space-betweenとjustify-content 9:28
  • 記事部分のCSS 14:41
  • SNS部分のCSS 6:19
  • footer部分のCSS 13:14
  • リンクの設定（１） 11:01
  • リンクの設定（２） 7:48
  • WEBフォントのダウンロード 10:08
  • WEBフォントの適用 9:50
  • セクション6　iPhoneサイズ
  • 概要 5:19
  • Wireframeの準備 5:55
  • サイトの全体像 4:50
  • containerのCSS設定 10:30
  • CSSの詳細設定（１） 7:03
  • CSSの詳細設定（２） 10:00
  • 仕上げ 11:24
  • セクション7　Responsive Web Design
  • Responsive Web Designとは 4:51
  • Responsive Web Designの理論 7:37
  • メディアクエリ 5:43
  • htmlの書き方 9:25
  • iPhoneサイズのCSS 10:04
  • iPadのCSS 10:38
  • PCサイズのCSS 9:27
  • Fluid Gridのhtml 13:49
  • Fluid GridのCSS 9:54
  • Fluid Gridの単位 9:46
  • Fluid Imageのhtml 8:33
  • Fluid ImageのCSS 12:16
  • 背景画像のFluid Image 7:37
  • セクション8　Mejiroサイトのレスポンシブ化
  • ここで学ぶこと 6:25
  • iPhoneサイズのCSS（１） 5:28
  • iPhoneサイズのCSS（２） 8:41
  • iPhoneサイズの仕上げ 11:32
  • iPadサイズのCSS（１） 8:28
  • iPadサイズのCSS（２） 9:12
  • iPadサイズのCSS（３） 10:19
  • iPadサイズのCSS（４） 7:07
  • iPadサイズの仕上げ 8:25
  • PCサイズの仕上げ 10:46
  • セクション9　indexページ（１）
  • サイトの構成 7:20
  • indexページの内容 6:07
  • ファイルの準備 8:05
  • XDからの画像の書き出し（１） 7:58
  • XDからの画像の書き出し（２） 6:00
  • 文字部分の入力 6:48
  • nav部分の制作 11:09
  • nav部分のCSS設定 9:41
  • 「最新の目撃情報」のhtml 10:35
  • 「最新の目撃情報」のCSS（１） 8:57
  • 「最新の目撃情報」のCSS（２） 8:41
  • 「野鳥観察会」のhtml 12:22
  • 「野鳥観察会」のCSS（１） 7:14
  • 「野鳥観察会」のCSS（２） 6:10
  • iPadサイズのCSS設定（１） 6:49
  • iPadサイズのCSS設定（１） 10:23
  • iPadサイズのCSS設定（３） 11:59
  • 「観察記録」のhtml 11:50
  • 「観察記録」のCSS設定（１） 8:04
  • 「観察記録」のCSS設定（２） 6:31
  • セクション10　indexページ（２）
  • 図鑑部分のhtml（１） 12:12
  • 図鑑部分のhtml（２） 7:08
  • 図鑑部分のCSS（１） 6:53
  • 図鑑部分のCSS（２） 9:46
  • 図鑑部分のCSS（３） 10:36
  • ページ全体の仕上げ 10:25
  • セクション11　Contactページ
  • 送信機能 3:36
  • レイアウトの説明 9:55
  • htmlのコーディング 7:46
  • CSSの設定 10:45
  • 送受信の仕組み 4:55
  • 送信用部品をhtmlで配置 7:51
  • form属性の設定 5:57
  • input属性の設定 6:36
  • iPhone版のContactページ完成 12:14
  • iPadサイズページの設定 8:24
  • セクション12　「野鳥観察会」ページ
  • 内容の検討 8:09
  • htmlのコーディング（１） 7:48
  • htmlのコーディング（２） 9:54
  • iPhoneサイズのCSS（１） 7:34
  • iPhoneサイズのCSS（２） 10:17
  • iPadサイズのCSS 11:08
  • セクション13　リンクの設定
  • アンカータグの設定方法 10:37
  • <a>タグはどこに書く？ 5:31
  • パスの説明 5:25
  • 不具合の修正 10:18
詳細を表示する