【動画で学習】UdemyのHTML/CSS 人気/おすすめ講座【セールでお得】

こちらでは、UdemyのHTML/CSS講座を、おすすめ、セール情報とともに紹介していきまっす。

Udemy講座の特徴

udemy

具体的な講座を見る前に、Udemyについてざっと整理しておきましょう。

Udemyは動画ベースの学習サービス、以下のような特徴があります。

Udemyの特徴

  • 買い切り型で継続コストがない
  • その上、内容更新あり、質問可能
  • スマホ対応、流し聴き学習も可能
  • 30日間返金が可能
  • セールで頻繁に80%以上割引

なんといっても、買い切り型なので購入後は継続コスト等が一切不要なのが安心。

その上で、講座の内容がアップデートされたり、質問も可能なので、買い切りなのに利用できるサポートが手厚いです。

講座の内容も10時間以上に登るものも多く、1本で基礎から応用まで学習可能

ユーザー評価や、動画プレビューあり、さらには30日間の返金保証もあるので、まず失敗しない購入が可能

購入時に絶対に抑えておきたいのがセール。毎回80~90%OFFの割引されます。

基本月1回は必ずセールが開催されているので、そこで購入するようにしましょう。また、新規ユーザーは1本目は大概セール価格で購入可能です。

 

UdemyのHTML/CSS講座 人気ランキング(セール情報付き)

以下がUdemyで学習できるHTML/CSSの最新の人気講座ランキング(日本語のもの)です。

セール価格情報も載せています。上述したとおりUdemyのセールは大きいので逃さずゲットしてください。

人気
Rank
学習コース評価
1
(4.5)
総評価数 6719件
2
(4.6)
総評価数 3215件
3
(4.4)
総評価数 4354件
4
(4.4)
総評価数 353件
5
(4.2)
総評価数 1273件
6
Nextjs + Tailwind CSS + Django REST Framework で学ぶモダンReact開発
発売日 2020/12/23
受講者 632人
通常 24,000円
現在 1,270円
(4.4)
総評価数 100件
7
(4.5)
総評価数 798件
8
70以上のレッスンで、基礎からしっかり学べる! HTML5完全マスターコース...
発売日 2015/10/16
受講者 2,127人
通常 9,600円
現在 1,430円
(4.3)
総評価数 365件
9
(4.5)
総評価数 199件
10
(4.4)
総評価数 350件
11
(4.1)
総評価数 173件
12
JavaScript+HTML:Electronでつくるローカルアプリ実例講座 for Windows...
発売日 2017/04/14
受講者 828人
通常 10,200円
現在 1,490円
(4.7)
総評価数 102件
13
(4.7)
総評価数 26件
14
(4.6)
総評価数 33件
15
(4)
総評価数 237件
16
(4)
総評価数 74件
17
(3.4)
総評価数 195件
18
(3.6)
総評価数 99件
19
(4)
総評価数 79件
20
(4.3)
総評価数 14件
21
初心者向けHTML & CSS基礎講座
発売日 2018/04/05
受講者 99人
通常 2,400円
現在 1,320円
(3.6)
総評価数 24件
22
(2.9)
総評価数 29件
23
Bootstrap3+Dreamweaver(CC2018)+HTML5+CSS3 レスポンシブWEBデザイン実践コース...
発売日 2018/02/15
受講者 1,450人
通常 12,000円
現在 1,490円
(4.1)
総評価数 263件
24
初めての人の「HTML5」入門
発売日 2015/08/26
受講者 440人
通常 3,000円
現在 1,320円
(4.2)
総評価数 97件
25
(4.4)
総評価数 83件
26
誰でもわかる HTML基礎&CSS基礎
発売日 2018/04/26
受講者 202人
通常 21,000円
現在 1,270円
(4)
総評価数 24件
27
HTMLやCSSをサクサク書こう! Emmet基礎講座
発売日 2016/10/24
受講者 301人
通常 4,200円
現在 1,490円
(4.5)
総評価数 52件
28
(4.4)
総評価数 21件
29
誰でもわかる HTML5
発売日 2015/10/09
受講者 73人
通常 4,800円
現在 1,270円
(4.1)
総評価数 20件
30
Webの新しいデザイン「CSS3」入門
発売日 2015/10/02
受講者 209人
通常 3,000円
現在 1,380円
(4.6)
総評価数 27件
31
HTMLやCSSをどんどん書こう! Brackets基礎講座
発売日 2016/09/08
受講者 125人
通常 3,000円
現在 1,320円
(4.2)
総評価数 29件
32
(3.8)
総評価数 8件
33
(4.2)
総評価数 8件
34
(3.1)
総評価数 4件
35
(4)
総評価数 2件
36
5日で覚える!HTML/CSS【超入門】
発売日 2020/06/29
受講者 4人
通常 2,400円
現在 1,270円
(4)
総評価数 1件
 

UdemyのHTML/CSS 人気・おすすめの5講座

以下が今人気のおすすめの講座の詳細です。

Udemy講座では、1つのコースで基礎から応用まで幅広く学べるものが多く、コスパ高く学習可能。

自分にあったコースをセールでゲットして効率よく学習しましょう。

[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門

[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門
発売日 2017/08/29
(4.5)

9 total hours
Webの仕事に関わる人なら誰でも必要な、「HTML/CSS」とプログラミング言語「JavaScript」の知識をこれ一本で。基礎の基礎から、jQuery/Vue.jsまで学びます。

HTMLとCSS、JavaScriptなどの Webの知識は、今や Webに関わる仕事はもちろんの事、アプリ開発やメディア制作など、あらゆる仕事に必要になっています。

これら、フロントエンド(表示される画面に関わる要素)を操るエンジニアを「フロントエンドエンジニア」などと呼びます。この講座では、そんなフロントエンドエンジニアになるための基礎知識となる、HTMLと CSS、プログラミング言語の JavaScriptを総合的に学びます。

スマートデバイスに対応した「レスポンシブWebデザイン」での、サイト制作や「CSSフレームワーク」を用いて、簡単に Webサイトデザインを行なう方法、そして JavaScriptでは「Ajax通信」や「jQuery/Vue.js」などの「JavaScriptフレームワーク」を用いたプログラミング開発まで学ぶことができます。

本講座を修得すれば、簡単な Webページなら自分の力で組み上げることができるようになるでしょう。また、他のチームメンバーが作った Webページの構造を理解し、変更したり、制作に参加するといった事もできます。

なお、本講座は同じ作者の、『これからWebをはじめる人のHTML&CSS, JavaScriptのきほんのきほん(マイナビ出版刊)』に基づいて映像講義にしています。本講座だけでも学ぶことができますが、書籍を手元に置けばより理解が深まることでしょう。合わせてご利用ください。


↓全て表示↑少なく表示
 
Users Voice
簡単すぎず、難しすぎず調度よい難易度だと思いました。全体的に広い範囲をカバーしているので、最初の取っ掛かりとしてはぴったりだと思います。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • Udemyでの受講について
    • Webの開発環境を整えよう(Windows編)
    • Webの開発環境を整えよう(macOS編)
  2. 入会フォームを HTML/CSSで作成しよう
    • サンプルファイルのダウンロード
    • 簡単なHTMLを作ってみよう
    • Visual Studio CodeでのHTML編集
    • テキストフィールドを作ろう
    • ボタンを作ろう
    • headタグの中に記述する決まり文句
    • CSSで見た目を調整しよう
    • CSSの内部参照でページ内の共通パーツのスタイルを調整しよう
    • CSSの外部参照で複数ページに共通のスタイルを記述しよう
    • sanitize.cssでブラウザーのデフォルトCSSをリセットしよう
    • divタグと class属性で要素を区分けしよう
    • marginプロパティの autoを使ってエリアを中央に揃えよう
    • box-shadowプロパティで浮いたボタンを作ろう
    • 適切な HTMLタグを利用しよう
    • spanタグで「必須」ラベルを作ろう
  3. レスポンシブWebデザインで、スマホ対応のサイトを作ろう
    • HTML/CSS:CDアルバムの紹介ページを作ろう
    • HTML:セクショニングコンテンツ(header, section)
    • CSS:タイトルの CSSを整える
    • CSSのセレクターの種類
    • 画像を配置しよう - img
    • CSS:floatを使った回り込み
    • CSS:clearで回り込みを解除する
    • HTML: リンクを張る aタグ
    • HTML:「実体参照」でコピーライト表記を追加する
    • CSS:Webフォントを使う
    • CSS:レスポンシブWebデザイン(RWD)のレイアウトを作る(メディアクエリー・リキッドデザイン・ブレイクポイント)
    • CSS:CSSアニメーションを使う(Transition)
  4. Bootstrapで素早く Webページを作ろう【2021年版】
    • このセクションで作るものを確認しよう
    • Bootstrapを CDN(Content Delivery Network)で利用しよう
    • Bootstrapの Containerを使って画面をレイアウトしよう
    • スタイルシートを調整しよう
    • Bootstrapのグリッドシステムで画面をレイアウトしよう
    • Bootstrapのフォームコントロールを使おう
    • プレイスホルダー(placeholder)の使い方
    • ドロップダウンリストを追加しよう
    • チェックボックスを追加しよう
    • ラジオボタンを追加しよう
    • テキストエリアを追加しよう
    • バッヂを使って、必須項目を示そう
  5. JavaScriptで今日の日付を表示しよう
    • HTML/CSS:画面を作り上げよう
    • JavaScript:オブジェクト・メソッド・パラメーター
    • JavaScript:文字列・数字と四則演算、文字列連結
    • JavaScript:変数の扱い
    • JavaScript:オブジェクトとインスタンス
    • JavaScript:Dateオブジェクトを使ってプログラムを仕上げよう
  6. イベントドリブンな、ストップウォッチプログラムを作成しよう
    • HTML/CSS:画面の見た目を作成しよう
    • JavaScript:getElementByIdとプロパティで要素を書き換えよう
    • JavaScript:if構文で条件に沿ったプログラムを作ろう
    • JavaScript:function(関数)定義をしよう
    • JavaScript:イベントドリブンなプログラムを作成しよう
    • JavaScript:setIntervalで定期的に実行されるプログラムを作ろう
    • JavaScript:変数のスコープを理解しよう
    • JavaScript:秒数から、分と時を計算しよう
    • JavaScript:thisを使って、STOPボタンを実装しよう
  7. Ajax通信でフォトライブラリーを作成しよう
    • HTML/CSS:ページを形作っていこう1 - position: fixed
    • HTML/CSS:ページを形作っていこう2 - position: relative, absolute
    • JavaScript:JSONデータを配列で操ろう
    • JavaScript:createElementと appendChildで HTML要素を作ろう
    • JavaScript:for構文で繰り返し処理をしよう
    • 【補足】利用した画像ファイルは次のレクチャーでも利用してください
    • JavaScript:Ajax通信を行なおう
    • JavaScript:Ajax通信で受信したデータを処理しよう - 論理演算子
    • JavaScript:画面を仕上げよう
  8. JavaScriptライブラリーを利用しよう
    • jQuery:jQueryを使ってみよう
    • jQuery:Ajax通信を行なってプログラムを仕上げよう
    • Vue.js:Vue.jsを使ってみよう
    • Vue.js:Vue.jsで画面を作り上げよう
    

【JavaScript&CSS】ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

【JavaScript&CSS】ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)
発売日 2019/12/16
(4.6)

19.5 total hours
基礎を終えた方に最適!基礎レベルから一気にプロレベルへ!JavaScript、CSSの基礎~実践までを最短で学習。世界が変わる19時間。

「基礎レベルの事はわかるようになったけど、どうやってプロが作成するような本格的なサイトを組み立てていけばいいの!?」

「CSSやJSの基本的な文法や書き方は習得した。で、次は何を学べばいいの?」

「コードを整理するためにはどのように記載したらいいの?」

「もう一歩高いレベルの事を学びたい。」

「基本的な文法はなんとなく知っているけど、その先どのようにして成長していけばよいのかわからない?」


そんな悩みを持った方に最適のコースです。


私がまだ駆け出しエンジニアだった頃、基本的な文法を学んだ段階でまず思ったことは、

「で、どうやってこれで本格的なWEBサイトを組み立てていけばいいの?」

ということでした。


書籍やインターネットを探してみても、簡単なサイトを作りながら本当に基礎的な部分を教えているものばかりで、

もう一歩上のレベルの事を説明してくれるものは見つかりませんでした。


「どういった知識が必要なのか?どのようにして本格的なサイトを組み立てていくのか?何を覚える必要があって、何を覚えなくていいのか?」


私が初学者の時にはそんなことを思っていました。


今になって思うと随分遠回りをしたと思います。

今だと一瞬でできることでも、どのようにして実現すればよいのかがわからない状態では、
全く適切でない方法で1週間くらいかかって開発を行っていた時もありました。


「誰か実践的な書き方や方法を教えてくれないかな~。」


当時の私はそんな風に思っていました。


「こちらのコースでは今の私が当時の私に伝えたい、CSSとJavaScriptの知識を凝縮しました。」


WEB開発では覚えることがたくさんあります。

一方、皆さんの時間は有限でとても貴重なものです。


馬鹿正直に使わないHTMLタグを覚える必要はありませんし、すべてのCSSのスタイルについて覚える必要はありません。もちろん、JavaScriptの関数やメソッドについても同様です。


それよりも、もっと根本的なところで、「なぜ、そのような動きになるのか?」「なぜそのように実装するのか?」「どういったところに気を付けて学んでいけばよいのか?」について、学んでいきましょう。


「なぜそうするのか?」がわかっていれば、状況に応じて自分で最善の解決法を実装がでるようになります。そして、基礎を固めましょう。CSS、JavaScriptの基礎がわかっているとWEB開発が何倍も楽になります。また、新しくJavaScriptフレームワークやCSSフレームワークを使う際にも、学習効率は何倍にもなるでしょう。


こちらのコースは基本的な事を学んだレベルのWEB開発者をプロレベルまで一気に引き上げます。

  • もし、あなたが体系的にJavaScript、CSSの基礎について学びたいのであれば、こちらのコースを是非受けてみてください。

  • もし、あなたがCSS、JavaScriptの実装が思い通りにいかず、悩んでいるのであれば是非こちらのコースを是非受けてみてください。

  • もし、あなたがCSS、JavaScriptの実践的な記述方法からコードの最適化について学びたいのであれば、こちらのコースを是非受けてみてください。

  • もし、あなたがCSS、JavaScriptの中級者レベルに最短でなりたいのであればこちらのコースを是非受けてみてください。


19時間のコースを終えた時、あなたにはこれまでと違う世界が見えているはずです。


**こちらのコースでは以下の内容については扱いませんのでご承知おきください**

  • サーバーとの通信やサーバーへのデータリクエストの方法については扱いません。

  • JavaScriptを使ったフォームのチェックや非同期通信については扱いません。

  • サーバー側の実装(バックエンド開発)については扱いません。

  • JSフレームワーク(ReactやVue)やCSSフレームワーク(Bootstrap等)を使った実装については基本的に扱いません。

    ※一部、JSライブラリを使用します。

  • こちらのコースではES moduleを使ったJavaScriptの整理は行いません。
    WebpackでのJSファイルのバンドルも行いません。
    ※こちらのコースではJavaScriptのコード整理にclassを使用しますので、私が別で出しているWebpackのコースを参考にして、こちらのコースで作成した成果物のバンドルを是非試してみてください。

  • こちらのコースではIE11へのブラウザ対応は行っていません。最新の記述方法をお教えしていますので、IE11ではうまく動かないことをご了承ください。(IE11は脆弱性への対応も遅く、Microsoftもサポートを停止しているため、使わないことを推奨しております。)


↓全て表示↑少なく表示
 
Users Voice
実務を始めたくらいの中級者向け。CSSの意外と知られていない技を細かくレクチャーしていただき、良い勉強になった。JavaScriptについては勉強不足だったこともありついていくのがやっとだった。 受講することでレベルアップを肌で感じられた。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • コース紹介
    • コース受講の準備を行おう Part.1
    • コース受講の準備を行おう Part.2
    • プロジェクトの構成とコースの進め方
    • Udemyでの学習方法のアドバイス
  2. 超初心者の方はここからスタート
    • HTMLとは?HTMLの概要と文法について
    • HTMLのこれだけは知っておいて!インライン要素とブロック要素の使い分け
    • CSSとは?CSSの概要と文法について
    • CSSのこれだけは知っておいて!詳細度について
  3. コード記述の効率化を学ぼう
    • 【Tips】コードの自動補完を使おう
    • 【Tips】Visual Studio Codeのショートカットを使おう
  4. CSSの基礎から始めよう(Transition編)
    • 【導入】セクション紹介
    • 【丁寧に解説】まずはボタンを作りながら、CSSプロパティーを設定してみよう!
    • Transitionプロパティーの使い方を学ぼう(ボタンにホバーアクションを追加!!)
    • 【Sass】CSSをSassで記述してみよう!
    • 【Tips】Chromeの開発ツールの使い方について学ぼう
    • 【おさらい】CSSセレクターとSassネスティング
    • SassからCSSへの変換がうまくいかない時の対処法
    • Live Sass Compilerが重いと思ったときの対処法
    • ホバーで影ができるボタンを作ってみよう
    • 【演習】色々なエフェクトのボタンを作ってみよう
    • 【解答】色々なエフェクトのボタンを作ってみよう
    • Transformプロパティーの使い方をマスターしよう
    • PositionとZ-indexをマスターして思い通りのレイアウトを組もう!!
    • Transform, Position, Z-indexの復習!背景色がスライドするボタンを作ってみよう!
    • ::before?::after?疑似要素を使って無駄な記述を減らそう!
    • タイミングファンクション(a.k.a easing-function)でアニメーションをオサレにしよう!
    • 【発展】3Dアニメーションでより豊かな表現方法を身に着けよう
    • 【発展】【演習】3Dアニメーション ~ キュービックのボタンを作成してみよう
    • HTML要素を思った通りに配置するレイアウト方法まとめ
    • 【参考】開発ツールでの編集のローカルファイルへの自動反映方法
    • セクション修了!お疲れ様です!
  5. CSSを極めよう(Animation編)
    • 【導入】セクション紹介
    • 【簡単!】アニメーションを使って簡単なローダーを作ってみましょう!
    • 【文法】AnimationとKeyframesの文法を学ぼう!
    • 【Sass】@Mixinを使った一歩上のSassコーディング!!
    • 【Tips】疑似セレクターを使ってみよう!nth-childのハマりやすい罠とは!?
    • 【Sass】@for文で一歩上のSassコーディング!!
    • 【演習】Animationで色んなローダーを作ってみよう
    • 【解答 Part. 1】Animationで色んなローダーを作ってみよう
    • 【解答 Part. 2】Animationで色んなローダーを作ってみよう
    • 【実践】よく巷で見かけるオサレなやつ!メニューアイコンを作ってみよう!!
    • 【実践】オサレな文字列のアニメーションを作ってみよう!!
    • 【Sass】@Each文で配列をループ!フェードインアニメーションをサクッと作ってみよう!
    • 【Tips】今時の画像の表示方法まとめ ~ <img srcset>, <picture>, background-imageの使い分け
    • 【実践】画像にオサレなカバースライドアニメーションを適用してみよう!!
    • 【実践】画像にオサレなホバーアニメーションを適用してみよう!!
    • 【Tips】Background-imageを画像タグのようにアスペクト比を保ちながら表示する小技
    • 【Tips】アニメーションに最適なプロパティー
    • セクション修了!お疲れ様です!
  6. JavaScriptの基礎を固めよう!
    • 【導入】JavaScriptとは?
    • 【文法編】変数の宣言方法とデータ型について学ぼう!
    • 【文法編】関数の定義と使い方!
    • 【文法編】メソッドとプロパティーについて学ぼう!
    • 【文法編】配列の使い方をマスターしよう!
    • 【文法編】オブジェクトを使ってデータを管理しよう!
    • 【文法編】ループの記述方法基礎
    • 【文法編】ループの記述方法(for inとfor of)
    • 【文法編】ループの記述方法(実践)
    • 【文法編】if文と判定処理の正しい記述方法について学ぼう!
    • 【文法編】アロー関数を使って省略記法をマスターしよう!
    • 【文法編】コールバック関数をマスターしよう!
    • 【文法編】コールバック関数とループ処理
    • 【文法編】配列とforEachメソッド
    • 【文法編】配列とreduceメソッド
    • 【文法編】reduce関数を作ってみよう
    • 【DOM編】JavaScriptでHTML参照・更新!セレクターAPIを学ぼう!
    • 【DOM編】画面に機能を追加!イベントリスナーでイベントを登録!
    • 【DOM編】超基礎!画面初期化時にコードを実行!DOMContentLoadedとLoadの違いについて学ぼう!
    • 【DOM編】【演習】文字列をHTMLタグに分割してみよう!!
    • 【レベルアップ】Classを使ったコードの整理方法!!クラスでコードの再利用性を高めよう!
    • 【レベルアップ】thisを学んでクラスやオブジェクトを変幻自在に操ろう!!
    • 【おさらい】Classとオブジェクト
    • 【おさらい】thisとオブジェクト
    • 【おさらい】thisとbindの関係
    • 【おさらい】TextAnimationクラスをもう一度見てみよう。
    • 【レベルアップ】クラス継承でコードを有効利用しよう!!不要なコードは書かないようにしましょう!
    • セクション修了!お疲れ様です!
  7. JavaScriptのより実践的な記述について学ぼう!
    • 【導入】セクション紹介
    • 【Tips】スクロール検知の達人!IntersectionObserverを学ぼう!
    • 【実践】文字アニメーションをスクロールに合わせて発動しよう!
    • 【レベルアップ】スクロール監視クラスを作成してコードの最適化を行おう!
    • 【実践】スライドアニメーションをスクロールに合わせて発動しよう!
    • 【実践】クラスの記述に慣れよう!スマホメニューの作成 Part. 1!!
    • 【レベルアップ】BEMでCSSを記述してみよう!スマホメニューの作成 Part. 2!!
    • 【実践】スマホメニューを完成させよう!
    • 【実践】ページローダーでイライラ解消!ページローダーの作り方!
    • 【ライブラリ導入編】ヒーロースライダーでページをオサレにしよう!
    • 【実践編 Part.1】ヒーロースライダーでページをオサレにしよう!
    • 【実践編 Part.2】ヒーロースライダーでページをオサレにしよう!
    • 【実践編 Part.3】ヒーロースライダーでページをオサレにしよう!
    • セクション修了!お疲れ様です!
  8. Webサイト作成(序)
    • 【導入】セクション紹介
    • 【スマホ対応】レスポンシブデザインとは?スマホでも見やすいサイトを作るために!
    • 【スマホ対応】レスポンシブデザインの基礎を学ぼう!メディアクエリとビューポートについて学ぼう!
    • 【スマホ対応】モバイルファーストCSSの実装方法を学ぼう!
    • ヒーロースライダーの組み込みから始めて行こう!
    • 【Tips】最初にやっておくべきノーマライズとは?|マルチブラウザ対応
    • 【Tips】Webフォントでデバイス間の表示を統一しよう!
    • 【Tips】サイト表示に統一感を!共通クラスで記述を最小限に効果を最大限に!
  9. Webサイト作成(完)
    • あともう少しです!後半戦も頑張っていきましょう!
    • 【実装開始!】まずは以前作成したモジュールを移行してこよう!
    • スマホ画面から作成していこう!(Houseセクションの作成 Part.1)
    • Flexboxで超簡単にレスポンシブ画面を実装しよう!(Houseセクションの作成 Part.2)
    • 【復習】Flexboxを使ったレスポンシブ画面の実装の復習!!(Popularセクションの作成)
    • 【実践】Flexboxを使ったレスポンシブ画面の実装(Travelセクションの作成)
    • 【実践】Z-indexと疑似要素を使った実践的な記述方法について学ぼう!
    • 【実践】Flexboxでフッター作成!
    • 【ちょっと休憩】emとremについて
    • 【実践】ヘッダーを作ろう!Part. 1!
    • 【実践】ヘッダーを作ろう!Part. 2!
    • 【実践】サイドバーを作成しよう
    • 【実践】ベースデザインを完成しよう
    • 【実践】ページローダー追加
    • 【いよいよ完成へ!】JavaScriptを整理しよう!Part. 1
    • 【いよいよ完成へ!】JavaScriptを整理しよう!Part. 2
    • 【完】サイトを完成させよう
  10. インターネットに公開してみよう
    • インターネット公開前の準備(リリース準備をしよう)
    • インターネットにWebサイトを公開しよう
  11. さいごに
    • [ボーナスレクチャー]大変お疲れ様でした!
 
Preview Video
   

ウェブ開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ!

ウェブ開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ!
発売日 2017/11/25
(4.4)

25 total hours
カフェのウェブサイト制作やフォトギャラリーの制作、Ruby on Rails を使ったタスク管理アプリ開発、 MySQL、Bootstrap、AWS Cloud9、GitなどWeb開発に必要な様々なスキルを1つのコースで沢山学ぼう!

プログラミングを学んで、ITエンジニアを目指そう!

このコースは、プログラミング初心者の方がプログラミングを1から学び、ITエンジニアを目指すためののコースです。

HTML, CSS, Bootstrap, JavaScript, MySQL, Ruby, Ruby on Rails, AWS Cloud9, GitGitHubを用いたWebアプリケーション開発の方法を総合的に学べます20時間の大型コースでお得に学べます。

☆☆コースの内容をしっかりと確認した上で受講をいただけるように、無料プレビューを60分公開しております。ぜひご覧ください!!☆☆

IT人材は、2030年に最大78万人不足すると経済産業省から発表がされました。

現在、ITエンジニアの転職市場は売り手市場です。また、自らWebアプリケーション開発ができるようになり、素早くアイディアを形にできれば、システム開発の費用が削減できて、起業への挑戦もハードルが下がります。

基本的なWebページの(HTML, CSS)の構築方法を学習したあと、画面サイズによって動的にレイアウトが変わるモバイルフレンドリーでレスポンシブ対応のWebサイトの作り方を学習します(Bootstrap)。

その後に、プログラミングを学習します。主にブラウザ側で動作させるJavaScriptと、サーバー側で動かすRubyを学習します。

よく使う機能が用意されていて、高速に開発が行えるWebアプリケーションフレームの使い方を学習します。スタートアップ企業でもよく使われるフレームワークを使用します(Ruby on Rails)。

Webアプリケーションを開発を行う上でキーポイントとなるデータを体系的に扱うデータベースの使い方を、学習します(MySQL)。

開発環境構築も丁寧に手順を追って説明します(AWS Cloud9)。

私は約10年の豊富なエンジニア経験があるとともに、初心者向けのプログラミング勉強会の講師や、エンジニア志望の大学生向けインターン講師、大手ITスクールでのティーチング・アシスタント経験があるのが強みです。ベテランになるにつれて、初心者のころに困っていたことを忘れてしまうものですが、初心者の時によくつまずく箇所が、分かっているので講座では丁寧な解説をしています。

皆さんの今後の自己実現のためのお役に立てるコースとなれば幸いです。
それでは、皆さんとコースの中でお会いできることを楽しみにしております。


想定する受講生

  • 実務未経験からITエンジニアに転職したいですか?

  • 自らWebアプリケーションを開発して公開できるようになりたいですか?

  • 駆け出しのWeb開発者の方でさらにスキルアップしたいですか?

⇒ あなたの答えが1つ以上YESなら、これはまさにあなたが探しているコースです!


※Web開発初心者向けの講座です。実務経験豊富なエンジニアの方にとっては、物足りない可能性がありますので、ご注意ください。

※ カリキュラムのアップデートを随時実施しています。旧版のレクチャーについては、サポートのため一定期間掲載しています。


利用ソフトウェアとバージョン

下記を使用してWebアプリケーション開発を学習します。

  • HTML5 ・・・Webページの文章を構造化して記述

  • CSS3・・・Webページの見た目を整える

  • JavaScript (ES5)・・・Webページを動的に操作することができるプログラミング言語

  • Bootstrap4 ・・・よく使うWebぺージのデザインが簡単に設定できるCSSフレームワーク

  • MySQL 5.7・・・データベース

  • Ruby 2.5・・・サーバ側で動かすプログラミング言語

  • Ruby on Rails 5・・・Webアプリケーションを高速で開発するためのフレームワーク(現時点ではver6系での動作確認はしておりません)

  • AWS Cloud9・・・アマゾン ウェブサービスが提供するWebブラウザで動作開発環境

  • Git 2.13・・・ソースコードのバージョン管理

  • Visual Studio Code 1.x,  Atom 1.x・・・テキストエディタ

  • Google Chrome ・・・Webブラウザ

学習環境について

  • パソコン(Mac または Windows)が必要。

  • 動画内ではmacOSを使用。Windows環境での学習については補足説明。

  • インストールして使うアプリケーションとして、Webブラウザ Google Chromeとテキストエディタ Visual Studio Code(レクチャーによってはAtom)を使います。MacでもWindowsでもOK。無料。

  • 開発環境には、AWS Cloud9というブラウザでWeb開発が行えるアマゾンのサービスを利用。無料枠で1年間学習可能。

  • アマゾン ウェブ サービスのアカウント作成が必要で、メールアドレス、クレジットカード、電話番号の用意が必要(認証のためクレジットカード登録が必要ですが、無料枠内で学習すれば課金発生しません)

  • GitHubアカウント(無料プラン)

更新履歴

  • 2021/1/22 セクションリニューアル「CSS入門」

  • 2020/9/26 セクションリニューアル「実践:ウェブサイトのコーディング」

  • 2020/6/2 セクションリニューアル「HTML入門」「HTMLステップアップ」

  • 2019/6/25 「Atomの設定 不可視文字」 Windows版Atomの操作について補足

  • 2019/6/6 フォントオーサム公式サイトの仕様変更に対応

  • 2019/4/2 AWS請求アラートのUI変更(設定→Billling設定)に対応

  • 2019/1/29 「Rubyのバージョン管理 1」rvmの設定手順を一部変更

  • 2019/1/17 「AWS Cloud9による開発環境構築」セクション テキストエディタの設定レクチャーをアップデート

  • 2019/1/5 「AWS Cloud9による開発環境構築」セクションの、RVMインストール手順を修正

  • 2018/11/06 「HTML入門」セクションのコードの文字が小さい問題を修正

  • 2018/8/28 セクション8 Bootstrap 4入門の「ナビゲーションバー」 class指定について補足

  • 2018/8/8 実践:Webサイトのコーディング「CSSによるスタイルの設定 2」補足テロップ追加

  • 2018/6/15 レクチャー新規追加「JavaScriptのエラーを自力で解決するための方法」

  • 2018/5/22 動画アップデート 「コース紹介動画」

  • 2018/5/16 レクチャー新規追加 「リモートリポジトリからプル」

  • 2018/4/25 誤植修正 イントロダクション - Ruby入門

  • 2018/4/2  レクチャー新規追加「ビデオ速度の変更」

  • 2018/2/16 セクションを新規追加「Git/Git Hub入門」


↓全て表示↑少なく表示
 
Users Voice
オリエンテーションが丁寧なので、オンライン学習が初めてでもわかりやすかったです。 コース内容の見方の説明が役に立ちました。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. コース概要
    • コース紹介
    • 受講オリエンテーション
    • 補足:受講オリエンテーション
    • 学習の進め方
    • macOS Catalina環境でZipファイルが解凍できない場合
  2. フロントエンド開発概容
    • イントロダクション -フロントエンド開発概容-
    • インターネット入門
    • フロントエンド開発で重要な3要素
    • Google Chromeのインストール
    • テキストエディタについて
    • 【macOS】Visual Studio Codeのインストール
    • 【Windows】Visual Studio Codeのインストール
  3. 新HTML入門
    • イントロダクション - HTML入門
    • HTMLの歴史
    • HTMLの基本構文
    • HTML文書の基本構造
    • 補足:自動生成されるmeta要素について
    • 【macOS】はじめてのHTML
    • 【Windows】はじめてのHTML
    • 技術ドキュメント MDN
    • HTML文書のインデントと改行
    • 【macOS】Visual Studio Codeの設定
    • 【Windows】Visual Studio Codeの設定
    • よくあるHTMLの記述間違い
    • 補足:構文チェック
    • 構文チェック
    • 演習:HTMLのエラーを取り除く
    • 演習回答:HTMLのエラーを取り除く
    • よくあるご質問:要素の書き順
    • HTMLのコメント
    • 改行
    • 区切り線
    • リスト
    • 入れ子になったリスト
    • 演習:リスト
    • 演習解答:リスト
    • 説明リスト
    • 見出し
    • 属性と画像の表示
    • リンク
    • 強調
    • 著作権表記
    • 情報のグループ化
    • span要素
    • 演習 : HTML基礎
    • 演習回答 : HTML基礎
  4. 新HTMLステップアップ編
    • イントロダクション - HTMLステップアップ
    • はじめてのテーブル
    • 行と列の覚え方
    • ヘッダーのあるテーブル
    • thead、tbody、tfootがあるテーブル
    • キャプション
    • セルの結合
    • 演習 : テーブル
    • 演習回答:テーブル
    • フォーム概要
    • はじめてのフォーム
    • お問い合わせフォームの制作① - 単一行のテキスト入力欄
    • お問い合わせフォームの制作② - プルダウンメニュー
    • お問い合わせフォームの制作③ - ラジオボタン
    • お問い合わせフォームの制作④ - テキストエリア
    • お問い合わせフォームの制作⑤ - チェックボックス
    • お問い合わせフォームの制作⑥ - 送信ボタン
    • お問い合わせフォームの制作⑦ - ラベル
    • フォームバリデーション
    • 演習:フォーム
    • 演習回答:フォーム
  5. 新・CSS入門
    • イントロダクション - CSS入門
    • CSSの基本をマスターしよう
    • はじめてのCSSを書いてみよう
    • コメントアウトをしよう
    • 色の指定ができるようになろう
    • 背景を指定しよう
    • ボックスモデルの基本を理解しよう
    • マージンを指定しよう
    • マージンの相殺について理解しよう①
    • マージンの相殺について理解しよう②
    • パディングを設定しよう
    • ボーダーを設定しよう
    • ボックスの横幅と高さを指定しよう
    • マージンとパディングの違いを学ぼう
    • 3つのセレクターを使えるようになろう
    • 結合子を使ったセレクタを指定しよう
    • 複数のセレクタを指定しよう
    • リンクで使用する疑似クラスを指定しよう
    • フォントを指定しよう
    • ウェブフォントを利用しよう
    • テキストに様々なスタイルを設定しよう
  6. 実践:ウェブサイトのコーディング
    • イントロダクション - 実践:新ウェブサイトのコーディング
    • よくあるご質問(必ずご確認ください)
    • ファイルの作成
    • HTMLによるマークアップ①
    • HTMLによるマークアップ②
    • HTMLによるマークアップ③
    • CSSによるスタイルの設定①
    • CSSによるスタイルの設定②
    • CSSによるスタイルの設定③
    • CSSによるスタイルの設定④
    • レスポンシブ対応
    • 画像の設定
    • メタデータの設定
    • よくあるご質問 その2(本セクション)
  7. Bootstrap 4入門
    • イントロダクション - Bootstrap 4入門 -
    • テキストエディタについて
    • Bootstrapとは
    • 【重要】補足情報(Bootstrapの読み込み方法のアップデートについて)
    • はじめてのBootstrap 1
    • はじめてのBootstrap 2
    • ナビゲーションバー
    • グリッドシステム 1
    • グリッドシステム 2
    • グリッドシステム 3
    • グリッドシステム 4
    • 実践:フォトギャラリーの制作 1
    • 実践:フォトギャラリーの制作 2
    • 実践:フォトギャラリーの制作 3
    • 補足:フォントオーサム公式サイトについて
    • 実践:フォトギャラリーの制作 4 フォントオーサムの導入
    • 実践:フォトギャラリーの制作 5 仕上げ
  8. JavaScript入門
    • イントロダクション - JavaScript入門 -
    • JavaScriptの歴史
    • JavaScriptの開発環境構築
    • はじめてのJavaScript
    • JavaScriptのエラーを自力で解決するための方法
    • コメント
    • 演算
    • 変数
    • インクリメントとデクリメント
    • 条件分岐
    • 条件分岐 if / else
    • 条件分岐 if / if else / else
    • 条件分岐 switch
    • 演習:テーマパークの入場料計算
    • 演習回答:テーマパークの入場料計算
    • 繰り返し処理とは
    • 繰り返し処理 for
    • 繰り返し処理 while
    • 繰り返し処理 do while
    • 演習:繰り返し処理
    • 演習回答:繰り返し処理
    • 配列
    • 連想配列
    • 演習:配列を使ったテストの点数の集計
    • 演習回答:配列を使ったテストの点数の集計
    • 関数とは
    • function命令
    • 関数リテラル
    • Functionコンストラクタ
    • 演習:関数
    • 演習回答:関数
  9. JavaScript DOM操作
    • イントロダクション - JavaScript DOM操作 -
    • DOMとは
    • IDをキーに要素を取得
    • タグ名をキーに要素を取得
    • name属性をキーに要素を取得
    • class属性をキーに要素を取得
    • ノードを追加
    • 補足:ノードを追加
    • ノードの置換
    • ノードの削除
    • 演習 : DOM操作
    • 演習回答:DOM操作
    • 補足:演習回答:DOM操作
  10. JavaScript イベントとイベントハンドラ
    • イベントとイベントハンドラを関連付ける方法
    • 開始タグの中で関連付ける方法
    • プロパティで関連付ける方法
    • loadイベント
    • addEventListener
    • 演習 : イベントとイベントハンドラ
    • 演習回答 : イベントとイベントハンドラ
  11. AWS Cloud9による開発環境構築
    • イントロダクション - AWS Cloud9による開発環境構築 -
    • AWSの無料利用枠について
    • !!!【重要】よくあるご質問!!!
    • AWS利用時の注意事項 !!必ず確認してください!!
    • AWSアカウント作成
    • IAMの設定
    • 無料利用枠の使用のアラートの受信設定
    • 【重要】プラットフォーム選択について
    • Cloud9のセットアップ
    • Cloud9の画面説明
    • 補足:AWS Cloud9のテキストエディタの設定について
    • 新・Rubyのバージョン管理1
    • Rubyのバージョン管理 2
    • Rubyのバージョン管理 3
  12. Ruby入門
    • イントロダクション - Ruby 入門 -
    • Rubyとは
    • 動作確認環境について
 
Preview Video
   

【最新2021】HTML5、CSS3をマスターして、未経験からWEBデザイン・エンジニアを目指す 実践マスターコース

【最新2021】HTML5、CSS3をマスターして、未経験からWEBデザイン・エンジニアを目指す 実践マスターコース
発売日 2020/07/21
(4.4)

17.5 total hours
最新のHTML5、CSS3サイトを、現在主流のCSS Grid Layoutとスマホや、タブレットにも対応するレスポンシブ WEBサイト制作技術を駆使して、手を動かしてページを制作する実践コースです。

このコースは最新のHTML5とCSS3を基礎から完全にマスターすることを目的に作られた講座です。WEBサイトの制作ははじめてという初心者の方から、中級以上の方の学び直しやトレーニングにも役立つよう、ひとつひとつ詳しく、丁寧に説明しています。

特に理論や原理だけでなく、実際にいくつものページを制作し、ひとつひとつ機能を確実に身につけられるよう実践的なコーディングにも多くの時間を使い、即戦的なスキルが身につけられるよう構成されたコースです。


初心者にも分かりやすいコース構成

コーディングは初めてという方でも、確実にHTML5とCSS3の技術を身につけ、WEBサイトを公開することができます。すべてのセクションで理論だけでなく実際に手を動かしてコードを書く演習が行われるので、初心者でも実践的な技術が身につきます。


最新のCSS Grid LayoutとResponsive WEB Designが学べる

WEB制作は日進月歩で変化しています。少し前までは主流であった技術が明日には陳腐化します。このコースでは最新のCSS Gridによるレイアウト技術と、あらゆるデバイス機器に対応するレスポンシブページ制作技術が身につけられます。


最新HTML5とCSS3のすべてが確実に学べる

  • HTML5とCSS3のほぼすべての機能を詳しく、分かりやすく解説しています。

  • CSS Gridのスキルが確実に身につきます。

  • レスポンシブWEBであらゆるデバイス機器に対応するレスポンシブページを作る力が身につきます。

  • ありきたりの解説書とちがい、実際の作品制作を通して実践的なスキルを身につけられます。

  • 初心者の方にも分かる、誤解のない説明

  • きちんと基礎から体系的に学びなおしたい方にも最適です。


学習内容
12のセクション、125本のレクチャーを合計17時間半のビデオで解説しています。長時間のコースですが、充実した内容で挫折させません。

各セクションにはそのセクションの学習で使用する練習素材がすべて添付されているので、すぐに学習がはじめられます。学習内容はすべて理論の説明と実践的なコーディングが並行して行われ、基礎から確実な力が身につけられます。



↓全て表示↑少なく表示
 
Users Voice
ありがとうございました。 グリッドシステムについて学べたことはもちろんですが、説明がとても丁寧で分かりやすく、一緒に手を動かすことによって、コーディングを体系的に学ぶことができました。 CSSはカオスになりやすいと思いますが、一つ一つ順番にコードを書いて行くことによって解消されることとか、どの様にやったら良いか、などのポイントも盛り込まれていてすごく勉強になりました。 また、コーディングする際の考え方なども理論的な説明で、自分に足りなかった物を補充することができたので感謝です。 本当に有難うございます。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. WEBサイトのしくみ
    • 準備と基礎知識
    • サイトとWEBサーバー
    • HTML文書の編集
    • CSSファイルの役割
    • CSSの中身
    • HTMLとCSSの関係
  2. HTMLとCSSの基礎
    • エディターの準備
    • タグと要素
    • HTMLの書き方(1)
    • HTML文書の書き方(2)
    • CSSの書き方
    • HTMLとCSSの関連付け
    • その他のCSSプロパティ
    • ボックスモデル
  3. htmlとCSSの文法
    • 制作の準備
    • HTMLの定型
    • HTMLコードの記述
    • id属性とclass属性
    • 新しいタグ
    • .containerのCSS設定
    • 仕上げと完成
    • セレクターの書き方
  4. CSS Grid Layoutの基本
    • 学習の準備
    • HTMLのコード
    • CSSの設定 (1)
    • CSSの設定 (2)
    • HTMLのコード
    • CSSのコード (1)
    • CSSのコード (2)
    • 少し進んだグリッドレイアウト
    • HTMLのコード
    • レイアウトの簡略化
  5. iPadPro サイズページの制作
    • 概要
    • ページレイアウト
    • HTMLのコード
    • HTMLのコード(2)
    • .containerのCSS
    • headerのGrid Layout
    • .mainのCSS設定
    • SNSとfooterのCSS設定
    • headerの詳細設定(1)
    • headerの詳細設定(2)
    • メインビジュアルのCSS
    • 写真の均等配置
    • 記事本文のCSS
    • SNSのCSS
    • footerのCSS
    • リンクの設定(1)
    • リンクの設定(2)
    • WEBフォントの準備
    • WEBフォントの適用
  6. iPhoneサイズページの制作
    • 概要
    • Wireframeの準備
    • サイトの全体像
    • containerの設定
    • 各要素の設定(1)
    • 各要素の設定(2)
    • 仕上げ
  7. レスポンシブWEBデザイン
    • レスポンシブWEBデザインの概要
    • レスポンシブの理論
    • メディアクエリの役割
    • HTMLの記述
    • iPhoneサイズのCSS
    • iPadのCSS
    • PCサイズのCSS
    • Fluid Grid(1) HTML
    • Fluid Grid(2) CSS
    • Fluid Grid(3) CSS
    • Fluid Image(1) HTML
    • Fluid Image(2) CSS
    • Fluid Image(3) CSS
  8. Mejiroサイトのレスポンシブ化
    • このセクションでやること
    • iPhoneサイズのCSS設定(1)
    • iPhoneサイズのCSS設定(2)
    • iPhoneサイズの完成
    • iPadサイズのCSS設定(1)
    • iPadサイズのCSS設定(2)
    • iPadサイズのCSS設定(3)
    • iPadサイズのCSS設定(4)
    • iPadサイズの仕上げ
    • PCサイズの仕上げ
  9. indexページの制作(1)
    • サイトの構成
    • indexページの内容
    • html, CSSファイルの準備
    • XDを使った画像の書きだし(1)
    • XDを使った画像の書きだし(2)
    • HTMLへの原稿入力
    • navのHTMLとCSSコード
    • nav ulとliのCSS設定
    • 「最新の目撃情報」のHTML
    • 最新の目撃情報のCSS(1)
    • 最新の目撃情報のCSS(2)
    • 「野鳥観察会」のHTML
    • 「野鳥観察会のお知らせ」CSS(1)
    • 「観察会のお知らせ」CSS(2)
    • iPadサイズの設定(1)
    • iPadサイズの設定(2)
    • iPadサイズの設定(3)
    • 「観察記録」html入力
    • 「観察記録」CSS設定(1)
    • 「観察記録」CSS設定(2)
  10. indexページの制作(2)
    • HTMLソースの準備
    • HTMLソースの準備(2)
    • CSS Stylesheet (1)
    • CSS Stylesheet (2)
    • CSS Stylesheet (3)
    • チェックと修正
  11. contactページの制作
    • 送信機能
    • サイトの準備
    • htmlのコーディング
    • CSS stylesheet
    • 送信のための部品
    • 送信用部品の配置
    • formタグの属性設定
    • inputタグの属性設定
    • textareaの設定
    • iPadサイズの設定
  12. 野鳥観察会ページの制作
    • ページ内容の確認
    • htmlのコーディング(1)
    • htmlのコーディング(2)
    • iPhoneのCSS (1)
    • iPhoneのCSS (2)
    • iPadのCSS
    • リンクの設定 (1)
    • リンクの設定 (2)
 
Preview Video
   

実践Webサイトコーディング講座 | HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみよう

実践Webサイトコーディング講座 | HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみよう
発売日 2015/10/16
(4.2)

9 total hours
HTMLとCSSの基礎がわかっている方が、実践的なWebサイトコーディングを身につけるコースです。

HTMLとCSSの基礎がわかっている方が、実践的なWebサイトコーディングを身につけるコースです

実際の3つのWebサイトを初級・中級・上級と段階を踏んで作りながら、実践的なWebサイトコーディングのスキルが身につきます。

1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


★こんな人におすすめ★

  • 基礎的なHTMLとCSSの知識はあるが、実際のWebサイト制作は自信のない方
  • より実践的なコーディングのスキルを身に着けたい方


★特徴★

  • 90以上、9時間以上の充実したコース
  • 1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供
  • 5分程度の動画が90レッスン以上 充実した内容ですが、無理せず学べる


★内容★

①【初心者向け】クリニックサイトのマークアップ(1)

実践Webデザインの【初心者向け】クリニックのWebサイト〜トップページ編〜の章で作成した、仮想のクリニックを紹介するWebサイトを、1からマークアップしていきます。 シンプルなデザインなので、マークアップもあまり複雑ではないため、初心者向けの章です。 初めてWebサイトをマークアップする方にオススメです。


【初心者向け】クリニックサイトのマークアップ(2)

実践Webデザインの【初心者向け】クリニックのWebサイト〜トップページ編〜の章で作成した、仮想のクリニックを紹介するWebサイトを、1からマークアップしていきます。 画像タグを利用してメイン画像を表示させるところから、floatを駆使してボックスを横並びにするなど、幅広くHTMLとCSSを利用していきます。 【初心者向け】クリニックサイトのマークアップ(1) の続きの章になりますので、初めてご覧になる方はまず前の章から取り組んでください。


【中級者向け】美容院のWEBサイト(1)〜トップページ編〜

実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、1からマークアップする方法を学びます。 シャドウや背景画像等の少し複雑なスタイルを使用しますので、やや中級者向けの章です。 完成版のファイルを一度見てみて、不安な方はまず「【初心者向け】クリニックサイトのマークアップ」から取り組んでみてください。


【中級者向け】美容院のWEBサイト(2)〜トップページ編〜

実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、1からマークアップする方法を学びます。 マウスホバーでリンクに下線をつけるなど、操作性も意識したマークアップ方法を学びます。 【中級者向け】美容院のWEBサイト(1)〜トップページ編〜の続きの章になります。


【中級者向け】美容院のWEBサイト(3)〜トップページ編〜

実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、1からマークアップする方法を学びます。 要素ないからはみ出た部分をスクロールできる新着窓の作成など、覚えておくと便利なマークアップ方法も学びます。 【中級者向け】美容院のWEBサイト(2)〜トップページ編〜の続きの章になります。


⑥【中級者向け】美容院のWEBサイト(4)〜下層ページ編〜

実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、1からマークアップする方法を学びます。 作成したトップページのファイルを複製して、下層ページをマークアップします。 同じデザインやレイアウトで、コンテンツのみ違うページをマークアップする際は、ファイルを複製して必要な部分のみを変更した方が作業が楽になります。 【中級者向け】美容院のWEBサイト(3)〜トップページ編〜の続きの章になります。


【中級者向け】美容院のWEBサイト(5)〜下層ページ編〜

実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、1からマークアップする方法を学びます。 inputタグを利用した、お問い合わせフォームを作成する方法を学びます。CSSを利用して、入力しやすいようにデザインを反映させていきましょう。 【中級者向け】美容院のWEBサイト(4)〜トップページ編〜の続きの章になります。


【上級者向け】Webマガジンサイトのマークアップ(1)

実践Webサイトデザインの、【上級者向け】Webメディアで作成したWebメディアを、 HTMLとCSSを使って1からコーディングしていきます。 縦に長いコンテンツ量の多いサイトになりますので、上級者向けの章になっています。 HTMLやCSSは、一文字でも違うと画面が真っ白になったり、エラーになってしまうので、繊細な作業を行う必要があります。 なるべくタイプミス等しないように注意してください。


【上級者向け】Webマガジンサイトのマークアップ(2)

実践Webサイトデザインの、【上級者向け】Webメディアで作成したWebメディアを、 HTMLとCSSを使って1からコーディングしていきます。 さまざまなHTMLタグ、CSSプロパティを駆使して、デザインをそのまま反映させるようなマークアップ方法を学びます。 【上級者向け】Webマガジンサイトのマークアップ(1)の続きの章になります。


【上級者向け】Webマガジンサイトのマークアップ(3)

実践Webサイトデザインの、【上級者向け】Webメディアで作成したWebメディアを、 HTMLとCSSを使って1からコーディングしていきます。 背景画像を利用して、なるべくページの読み込み速度が早くなるよう心がけてマークアップしていきます。 【上級者向け】Webマガジンサイトのマークアップ(2)の続きの章になります。


【上級者向け】Webマガジンサイトのマークアップ(4)

様々なコンテンツを提供するWebマガジンサイトをマークアップする方法を学びます。 縦に長い、コンテンツ量の多いサイトのマークアップは、些細なミスが命取りの上級者向けです。 Webメディアに必要なページネーションや、フッターを作成していきます。 10.【上級者向け】Webマガジンサイトのマークアップ(3) の続きの章になっていますので、初めてこの章をご覧になる方はまず前の章から取り組んでください。



↓全て表示↑少なく表示
 
Users Voice
Webサイトのコーディングを実践することで知識の定着させることができる講座。 HTMLとCSSの基礎が固まってきたことを実感してきたころ、そろそろ実践的な知識を身に着けたいと思い受講しました。 Webサイトのコーディングを数をこなすことで身に着けるというコンセプトで知識が定着した実感があります。 とてもいい講座でした。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. 【初心者向け】クリニックサイトのマークアップ(1)
    • 第1回:サイト情報を設定するmetaタグを入力してみよう
    • 第2回:レイアウトのためのタグを追加してみよう
    • 第3回:コメントアウトでわかりやすいhtmlを書いてみよう
    • 第4回:横幅と縦幅を設定しよう(1)
    • 第4回:横幅と縦幅を設定しよう(2)
    • 第5回:floatで2カラムレイアウトを組んでみよう
    • 第6回:marginでサイト全体を中央に寄せてみよう
    • 第7回:ロゴを配置してみよう
    • 第8回:ナビゲーションをマークアップしてみよう
    • 第9回:floatを使ってロゴとナビを横並びにしてみよう
  2. 【初心者向け】クリニックサイトのマークアップ(2)
    • 第10回:メイン画像を表示させてみよう
    • 第11回:リストタグを使ってバナーを作ってみよう
    • 第12回:背景画像を利用したバナーを作ってみよう(1)
    • 第12回:背景画像を利用したバナーを作ってみよう(2)
    • 第12回:背景画像を利用したバナーを作ってみよう(3)
    • 第13回:お知らせの見出しと一覧をマークアップしよう
    • 第14回:floatを使ってdtとddを横並びにしよう
    • 第15回:擬似クラスを使って奇数行に背景の色を適応させよう
    • 第16回:フッターに必要なタグを記述してみよう
    • 第17回:フッターに必要なCSSを記述してみよう
  3. 【中級者向け】美容院のWEBサイト(1)〜トップページ編〜
    • 第1回:HTMLファイルを新規作成、タイトルを設定しよう
    • 第2回:CSSファイルを新規作成、読み込ませてみよう
    • 第3回:ヘッダーのレイアウトを作ってみよう
    • 第4回:リセットCSSを読み込んでみよう
    • 第5回:コンテンツのレイアウトを組もう
    • 第6回:横幅100%のフッターを作成しよう
    • 第7回:marginを使ってサイト全体の余白を調節しよう
    • 第8回:見出しタグを使ってロゴをマークアップしよう
    • 第9回:背景画像を使ってロゴのアイコンを表示させよう
  4. 【中級者向け】美容院のWEBサイト(2)〜トップページ編〜
    • 第10回:余白を調整してロゴを完成させよう
    • 第11回:ナビゲーションをマークアップしよう
    • 第12回:マウスホバーで下線がつくリンクを作ろう(1)
    • 第12回:マウスホバーで下線がつくリンクを作ろう(2)
    • 第13回:横並びのナビゲーションを作ろう
    • 第14回:ナビゲーションの位置を調整しよう
    • 第15回:positionを使って右上にバナーを配置しよう
    • 第16回:背景に画像を設定しよう
    • 第17回:影のついたメイン画像を作成してみよう
  5. 【中級者向け】美容院のWEBサイト(3)〜トップページ編〜
    • 第18回:新着情報一覧の背景を作成してみよう
    • 第19回:新着情報一覧の文字をデザインしてみよう
    • 第20回:overflowを使ってスクロール窓を作ろう
    • 第21回:背景画像を利用したバナーを作ろう
    • 第22回:class名を利用してボックスに影をつけよう
    • 第23回:バナーの文字の位置や大きさを調整しよう
    • 最終回:フッターを作成しよう
  6. 【中級者向け】美容院のWEBサイト(4)〜下層ページ編〜
    • 第1回:下層ページ用にファイルを複製しよう
    • 第2回:メニュー一覧ページの見出しを作ろう
    • 第3回:リストタグを使ってメニュー一覧を記述しよう
    • 第4回:メニュー一覧のデザインを調整しよう
    • 第5回:ファイルの複製と見出しの修正を行おう
    • 第6回:注意文のデザインを調整しよう
    • 第7回:テーブルタグを使ってフォームを作成しよう
    • 第8回:フォームを複製して完成させよう
    • 第9回:チェックボックスを作成してみよう
  7. 【中級者向け】美容院のWEBサイト(5)〜下層ページ編〜
    • 第10回:フォームのラベルをデザインしてみよう
    • 第11回:入力欄に関するCSSをかけてみよう(1)
    • 第11回:入力欄に関するCSSをかけてみよう(2)
    • 第12回:送信ボタンにCSSをかけてみよう
  8. 【上級者向け】Webマガジンサイトのマークアップ(1)
    • 第1回:必要なHTMLとCSSファイルを新規作成しよう
    • 第2回:スタイルシートを読み込んでみよう
    • 第3回:ヘッダーのレイアウトを組もう(1)
    • 第3回:ヘッダーのレイアウトを組もう(2)
    • 第4回:ロゴとナビゲーションをマークアップしよう
    • 第5回:横並びのロゴとナビゲーションを作成しよう
    • 第6回:ピックアップ記事のレイアウトを組もう
    • 第7回:ピックアップ記事のHTMLを書いてみよう
    • 第8回:ピックアップ記事のCSSを書いてみよう(1)
  9. 【上級者向け】Webマガジンサイトのマークアップ(2)
    • 第8回:ピックアップ記事のCSSを書いてみよう(2)
    • 第9回:背景画像を利用した見出しを作ろう
    • 第10回:ランキング一覧のHTMLを記述しよう
    • 第11回:ランキング一覧のCSSを記述しよう(1)
    • 第11回:ランキング一覧のCSSを記述しよう(2)
    • 第11回:ランキング一覧のCSSを記述しよう(3)
    • 第12回:floatでコンテンツのレイアウトを組もう(1)
    • 第12回:floatでコンテンツのレイアウトを組もう(2)
    • 第13回:サイドバーを作成しよう(1)
  10. 【上級者向け】Webマガジンサイトのマークアップ(3)
    • 第13回:サイドバーを作成しよう(2)
    • 第13回:サイドバーを作成しよう(3)
    • 第14回:背景画像を利用した見出しを作ろう
    • 第15回:定義型リストで記事一覧をマークアップしよう
    • 第15回:記事一覧に対してCSSを記述しよう(1)
    • 第15回:記事一覧に対してCSSを記述しよう(2)
    • 第15回:記事一覧に対してCSSを記述しよう(3)
    • 第15回:記事一覧に対してCSSを記述しよう(4)
    • 第16回:ページネーションをマークアップしよう(1)
  11. 【上級者向け】Webマガジンサイトのマークアップ(4)
    • 第16回:ページネーションをマークアップしよう(2)
    • 第16回:ページネーションをマークアップしよう(3)
    • 第17回:フッターをマークアップしよう(1)
    • 第17回:フッターをマークアップしよう(2)
    • 第17回:フッターをマークアップしよう(3)
    • [チャレンジ]NESTschool公式サイトをマークアップしてみよう
 
Preview Video
   

Udemyで無料で学べるHTML/CSS講座一覧

以下の講座は無料で学習が可能。

無料コースでは、質問ができない、学習した証の修了証書が発行されない、といった違いがありますが、動画コンテンツはすべて利用可能。

有料講座ほどの内容の幅はないですが、動画学習の取っ掛かりとしてまずこちらを試してみるのもおすすめです。

[HTML/CSS]未経験から最速でフロントエンジニアになるためのHTML/CSS入門

[HTML/CSS]未経験から最速でフロントエンジニアになるためのHTML/CSS入門
発売日 2020/08/08
(4)

4.5 total hours
Web制作に関わる人なら誰でも必要なHTMLとCSSの知識と技術を最速で学びませんか?実務で使う技術のほとんどをこれ1本で学べます。

Web制作を行うために必要なHTML/CSSの知識とコーディング方法を最速で学ぶ講座です。


全7回のカリキュラム(約4.5時間)でHTML/CSSの基礎を満遍なく学習することが可能です。

  • 講義はアウトプットイメージ実際のコーディングを見せるという形で進んでいきます。

  • コーディングを解説する途中で、重要事項など覚えていただきたい必須技術について詳しく解説していきます。

  • 全ての講義の最後に演習問題が入っており、自学自習で復習ができるようになっています。


講義に出てくる範囲の技術をすべて押さえれば、Web制作に最低限必要なHTML/CSSのコーディングを学べるようにしてあります。裏を返せば、この範囲のことを全て習熟すれば、ほとんどのWeb制作案件(LP制作・HP制作など)に対応できるように必要な技術をかなり網羅しています(JavaScriptを用いた高度なアニメーションやレスポンシブデザインなどは除く)。


是非、手を動かしながら動画を見て、HTML/CSSの基礎技術をマスターしましょう!(かなりの範囲を網羅しているので分量が多いですが笑)。


↓全て表示↑少なく表示
 
レクチャー内容
  1. オリエンテーション
    • オリエンテーション
  2. HTMLを書いてみよう
    • HTMLを書いてみよう
  3. CSSを書いてみよう
    • CSSの概要と外部参照の方法
    • CSSを用いて箱の色や形を装飾する
    • CSSを用いて文字の大きさや色を装飾する
    • CSSを用いて箱を正しく配置・余白を設定する
  4. HTML/CSSに慣れよう
    • HTMLでテーブルを作成する
    • テーブルの枠線を2重線から1重線に変更する
    • テーブルの各セルの書式を設定する
    • テーブル内の画像サイズを調整し、特定の行や列のみに装飾を加える
  5. ページ遷移のあるサイトを作ってみる
    • HTMLで目次ページを作成する
    • 目次ページのデザインを調整する
    • リンク先のページを作成し、デザインを調整する
    • 目次ページとリンク先のページをリンクさせる
  6. 横並びの配置方法を学ぶ
    • inline-blockを使ってヘッダーメニューを横並びにする
    • flexboxを使ってヘッダーメニューを横並びにする
    • floatを使ってフッターを横並びにする
  7. 全体のレイアウト方法を学ぶ
    • 全体のレイアウト方法を学ぶ
  8. その他頻出パーツを覚えよう
    • その他頻出パーツ①〜④
    • その他頻出パーツ⑤〜⑧
    • その他頻出パーツ⑨〜⑩
    • その他頻出パーツ⑪〜⑫
        

関連:HTML/CSSを本でも学ぼう

UdemyのHTML/CSS講座は上述したとおり、HTML/CSSの基礎からjQueryやVue.jsを使った実用等まで、詳しく・幅広く学べる非常にパフォーマンスの高い学習法。

ただ、リファレンスとしては動画だと見返しづらい側面もありますので、書籍も併用しながら学習すると良いかと思います。

HTML/CSSの参考書は以下で紹介しています。合わせて参照ください。

いじょうでっす。

コメント

タイトルとURLをコピーしました