【最新HTML / CSS】 初級WEBデザイナー　ランクUP　リスキリングコース

【最新HTML / CSS】 初級WEBデザイナー　ランクUP　リスキリングコース

【最新HTML / CSS】 初級WEBデザイナー　ランクUP　リスキリングコース
¥22,980
¥22,980
（税込） SALE 売り切れ

講座の内容

  • Section1　WEBサイトのしくみ
  • このコースで学習すること 5:09
  • 学習の進め方 8:19
  • HTMLのコード 12:37
  • CSSの設定（１） 6:38
  • CSSの設定（２） 5:08
  • CSSの設定（３） 6:05
  • Ste002のHTML 9:11
  • Ste002のCSS（１） 5:31
  • Ste002のCSS（２） 3:55
  • Ste002のCSS（３） 10:08
  • 少し進んだグリッドレイアウト 6:36
  • Step03のHTML 12:41
  • レイアウトの簡略化 8:00
  • Section2　iPhoneサイズのOwlページ（１）
  • このセクションで学習すること（１） 9:25
  • header要素のHTML 6:42
  • header要素のCSS 8:03
  • WEBフォントの使用 10:02
  • headerレイアウトの完成 6:49
  • ハンバーガーメニューのHTML 10:08
  • ハンバーガーメニューのCSS（１） 6:01
  • ハンバーガーメニューのCSS（２） 7:24
  • ハンバーガーメニューのCSS（３） 9:29
  • メニュー内容の設定 9:30
  • ハンバーガーメニューの完成 6:11
  • Section3　iPhoneサイズのOwlページ（２）
  • main部分のHTML 11:35
  • main部分のCSS（１） 11:26
  • main部分のCSS（２） 9:45
  • SliderのHTML 10:36
  • SliderのCSS 12:01
  • SNS 12:50
  • footer（１） 7:53
  • footer（２） 8:33
  • 擬似要素 8:42
  • 擬似クラス 6:32
  • 隣接、間接、直下セレクタ 10:11
  • Positionプロパティ 13:25
  • Section4　Responsive WEB Design
  • Responsive WEB Designとは 4:58
  • Media Queriesとは 8:01
  • メディアクエリの役割 6:38
  • メディアクエリのHTML 8:58
  • iPhoneサイズのCSS 9:46
  • iPhoneサイズのメディアクエリ 12:58
  • PCサイズのメディアクエリ 7:44
  • Fluid GridのHTML 12:29
  • Fluid GridのCSS（１） 10:41
  • Fluid GridのCSS（２） 9:26
  • Fluid imageのHTML 7:41
  • Fluid imageのCSS 12:07
  • 背景画像のFluid image 7:45
  • Section5　iPadサイズのOwlページ
  • このセクションで学習すること 4:32
  • Break Pointの設定 10:28
  • mainの設定（１） 7:03
  • mainの設定（２） 6:04
  • SNS、Footerの設定 9:51
  • PCサイズの設定（１） 9:22
  • PCサイズの設定（２） 7:48
  • PCサイズの設定（３） 6:52
  • 仕上げ 6:55
  • Section6　iPhoneサイズのindexページ（１）
  • このセクションで学習すること 3:31
  • 準備 10:11
  • 動画の挿入と設定 8:33
  • announceの設定 8:12
  • ギャラリーのHTML 8:55
  • ギャラリーのレイアウト設定 9:30
  • ギャラリーの効果の概要 7:36
  • ギャラリーの効果の設定（１） 6:41
  • ギャラリーの効果の設定（２） 6:20
  • ギャラリーの効果の設定（３） 7:40
  • ギャラリーのアンカータグ設定 6:49
  • Section7　iPhoneサイズのindexページ（２）
  • 観察ボタンの配置 9:44
  • 観察ボタン効果のCSS設定（１） 5:47
  • 観察ボタン効果のCSS設定（２） 5:54
  • 観察会案内のHTML 11:35
  • 観察会案内のCSS（１） 8:50
  • 観察会案内のCSS（２） 6:21
  • 生態部分のHTML 11:18
  • 観察会案内のCSS 7:02
  • マウスオンで画像拡大の効果 9:53
  • 季節の野鳥部分のHTML 9:47
  • 季節の野鳥部分のCSS 7:10
  • 季節の野鳥部分の効果 10:01
  • 四季の野鳥HTML 7:19
  • 四季の野鳥CSS 12:24
  • リンクの設定と修正（１） 9:33
  • リンクの設定と修正（２） 15:12
  • Section8　iPhoneサイズのindexページ（２）
  • headerのレスポンシブ化 7:17
  • Galleryのレスポンシブ化 7:48
  • indexページの修正 9:19
  • サイト全体の仕上げ 5:48
  • HTMLのインクルード化（１） 8:11
  • HTMLのインクルード化（２） 10:54
  • HTMLのインクルード化（３） 5:11
  • Section9　Sliderの改良
  • 改良の概要 3:49
  • HTMLで画像を配置する 7:13
  • HTMLでセレクター用の画像を配置 4:01
  • CSSEレイアウトを整える 7:25
  • HTMLでラジオボタンを配置する 7:51
  • CSSで画像を切り替える 8:54
  • positionで画像の位置を直す 5:32
  • チルダを(~)使ったinputの遠隔操作（１） 8:44
  • チルダを(~)使ったinputの遠隔操作（２） 7:35
  • チルダを(~)使ったinputの遠隔操作（３） 6:00
  • チルダを(~)使ったinputの遠隔操作（４） 5:03
  • チルダを(~)使ったinputの遠隔操作（５） 7:19
錆びついたHTML/CSS手法を再生しよう。CSS3の動的な効果テクニックやレスポンシブWEBデザイン、グリッドレイアウトなど最新の開発手法を実践形式でマスターするコースです。

こんな方にオススメ

  • 初級からランクアップして中上級を目指すWEBデザイナーの方
  • フリーランスでランディングページを制作しているWEBデザイナー初級の方
  • 企業内で上級のエンジニアを目指すWEBデザイナーの方
  • 最新のページデザイン技術を学びたい方
  • 単一のランディングページ制作から、プロジェクト全体の統括ができるスキルを身に付けたい方

習得できるスキル

  • スマホからタブレット、PCサイズまで、どんなデバイスサイズにも最適のページデザインで表現する、メディアクエリを使ったレスポンシブWEBデザインの技術をマスターします。
  • グリッドレイアウトとFlex Boxを駆使して、安定してトラブルのないページレイアウトをする技術を学びます。効率的なコーディング技術で処理能力は飛躍的に上がります。
  • 最新のWEBページに不可欠な、カルーセルやバーガーメニューを擬似要素や擬似クラス、positionプロパティなどを実際にコードを書いて学習し、高度なCSSテクニックを学習します。

講座内容

内容

　このコースは、古いHTMLやCSSの技術で現在も開発を続けているWEBデザイナーが、現在主流となっている最新のHTML5、CSS3を学んでスキルアップすることを目的に開発したコースです。

　社内でフロントエンド部門を統括し、フリーランサーでも高い収入を得られるようなエンジニア・デザイナーになるには、最新のHTM/CSSのスキルを身につけることが必須条件です。

　このコースでは13時間超の学習で、経験則に頼らないしっかりとした技術を学びます。講座はすべて実践的な作品制作を行う演習形式で構成され、動画の内容に従って１つのWEBサイトを制作することで、ミスへの対処、時短テクニック、Tips、効果的なコード記述などプロWEBデザイナーに必須のスキルが自然に身につきます。


高度なHTML/CSS 技術が学べます

  • スマホ、タブレット、PCサイズまで、すべてのデバイスで最適のデザインを実現するレスポンシブWEBデザイン
  • グリッドレイアウトを駆使した最新のページレイアウト技術
  • floatを全く使わないFlexBox
  • モダンブラウザに対応した動的な効果テクニック

全編動画と練習素材付きの講座

  • コースは８つのセクション、13時間以上の動画講座です。
  • １つのサンプルWEBサイトを動画を見ながら手を動かして制作することで実践的なテクニックが学べます。
  • すべてのセクションに練習素材が添付されているので、すぐに学習が開始できます。

講座提供者

村守　康（むらもり　こう）
村守　康（むらもり　こう）

大手半導体メーカー販促部門で勤務後、WEBサイトの開発を行うデザイン会社を設立。第一線を離れた後、社内の技術教育に携わる。

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

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

受講要件

  • 初めての方でも学べますが、初級のHTML、CSSの知識があると大きな学習効果があります。
  • WEBサイト開発の工程について、実践的な経験は不要です。
  • プログラミング・エディターが操作できると効果的に学べます。
¥22,980
¥22,980
（税込） SALE 売り切れ

講座の内容

  • Section1　WEBサイトのしくみ
  • このコースで学習すること 5:09
  • 学習の進め方 8:19
  • HTMLのコード 12:37
  • CSSの設定（１） 6:38
  • CSSの設定（２） 5:08
  • CSSの設定（３） 6:05
  • Ste002のHTML 9:11
  • Ste002のCSS（１） 5:31
  • Ste002のCSS（２） 3:55
  • Ste002のCSS（３） 10:08
  • 少し進んだグリッドレイアウト 6:36
  • Step03のHTML 12:41
  • レイアウトの簡略化 8:00
  • Section2　iPhoneサイズのOwlページ（１）
  • このセクションで学習すること（１） 9:25
  • header要素のHTML 6:42
  • header要素のCSS 8:03
  • WEBフォントの使用 10:02
  • headerレイアウトの完成 6:49
  • ハンバーガーメニューのHTML 10:08
  • ハンバーガーメニューのCSS（１） 6:01
  • ハンバーガーメニューのCSS（２） 7:24
  • ハンバーガーメニューのCSS（３） 9:29
  • メニュー内容の設定 9:30
  • ハンバーガーメニューの完成 6:11
  • Section3　iPhoneサイズのOwlページ（２）
  • main部分のHTML 11:35
  • main部分のCSS（１） 11:26
  • main部分のCSS（２） 9:45
  • SliderのHTML 10:36
  • SliderのCSS 12:01
  • SNS 12:50
  • footer（１） 7:53
  • footer（２） 8:33
  • 擬似要素 8:42
  • 擬似クラス 6:32
  • 隣接、間接、直下セレクタ 10:11
  • Positionプロパティ 13:25
  • Section4　Responsive WEB Design
  • Responsive WEB Designとは 4:58
  • Media Queriesとは 8:01
  • メディアクエリの役割 6:38
  • メディアクエリのHTML 8:58
  • iPhoneサイズのCSS 9:46
  • iPhoneサイズのメディアクエリ 12:58
  • PCサイズのメディアクエリ 7:44
  • Fluid GridのHTML 12:29
  • Fluid GridのCSS（１） 10:41
  • Fluid GridのCSS（２） 9:26
  • Fluid imageのHTML 7:41
  • Fluid imageのCSS 12:07
  • 背景画像のFluid image 7:45
  • Section5　iPadサイズのOwlページ
  • このセクションで学習すること 4:32
  • Break Pointの設定 10:28
  • mainの設定（１） 7:03
  • mainの設定（２） 6:04
  • SNS、Footerの設定 9:51
  • PCサイズの設定（１） 9:22
  • PCサイズの設定（２） 7:48
  • PCサイズの設定（３） 6:52
  • 仕上げ 6:55
  • Section6　iPhoneサイズのindexページ（１）
  • このセクションで学習すること 3:31
  • 準備 10:11
  • 動画の挿入と設定 8:33
  • announceの設定 8:12
  • ギャラリーのHTML 8:55
  • ギャラリーのレイアウト設定 9:30
  • ギャラリーの効果の概要 7:36
  • ギャラリーの効果の設定（１） 6:41
  • ギャラリーの効果の設定（２） 6:20
  • ギャラリーの効果の設定（３） 7:40
  • ギャラリーのアンカータグ設定 6:49
  • Section7　iPhoneサイズのindexページ（２）
  • 観察ボタンの配置 9:44
  • 観察ボタン効果のCSS設定（１） 5:47
  • 観察ボタン効果のCSS設定（２） 5:54
  • 観察会案内のHTML 11:35
  • 観察会案内のCSS（１） 8:50
  • 観察会案内のCSS（２） 6:21
  • 生態部分のHTML 11:18
  • 観察会案内のCSS 7:02
  • マウスオンで画像拡大の効果 9:53
  • 季節の野鳥部分のHTML 9:47
  • 季節の野鳥部分のCSS 7:10
  • 季節の野鳥部分の効果 10:01
  • 四季の野鳥HTML 7:19
  • 四季の野鳥CSS 12:24
  • リンクの設定と修正（１） 9:33
  • リンクの設定と修正（２） 15:12
  • Section8　iPhoneサイズのindexページ（２）
  • headerのレスポンシブ化 7:17
  • Galleryのレスポンシブ化 7:48
  • indexページの修正 9:19
  • サイト全体の仕上げ 5:48
  • HTMLのインクルード化（１） 8:11
  • HTMLのインクルード化（２） 10:54
  • HTMLのインクルード化（３） 5:11
  • Section9　Sliderの改良
  • 改良の概要 3:49
  • HTMLで画像を配置する 7:13
  • HTMLでセレクター用の画像を配置 4:01
  • CSSEレイアウトを整える 7:25
  • HTMLでラジオボタンを配置する 7:51
  • CSSで画像を切り替える 8:54
  • positionで画像の位置を直す 5:32
  • チルダを(~)使ったinputの遠隔操作（１） 8:44
  • チルダを(~)使ったinputの遠隔操作（２） 7:35
  • チルダを(~)使ったinputの遠隔操作（３） 6:00
  • チルダを(~)使ったinputの遠隔操作（４） 5:03
  • チルダを(~)使ったinputの遠隔操作（５） 7:19
詳細を表示する