【動画で学習】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)
総評価数 5984件
2
(4.5)
総評価数 2731件
3
(4.4)
総評価数 3975件
4
(4.4)
総評価数 234件
5
(4.2)
総評価数 1158件
6
(4.2)
総評価数 763件
7
(4.5)
総評価数 170件
8
(4.5)
総評価数 324件
9
Nextjs + Tailwind CSS + Django REST Framework で学ぶモダンReact開発
発売日 2020/12/23
受講者 266人
通常 24,000円
新規 1,610円
(4.6)
総評価数 36件
10
70以上のレッスンで、基礎からしっかり学べる! HTML5完全マスターコース...
発売日 2015/10/16
受講者 2,002人
通常 9,600円
新規 1,820円
(4)
総評価数 336件
11
(4.2)
総評価数 223件
12
(4.3)
総評価数 151件
13
(4.4)
総評価数 64件
14
JavaScript+HTML:Electronでつくるローカルアプリ実例講座 for Windows...
発売日 2017/04/14
受講者 802人
通常 10,200円
新規 1,890円
(2.9)
総評価数 101件
15
(4.2)
総評価数 16件
16
(4.1)
総評価数 186件
17
(4.3)
総評価数 75件
18
Bootstrap3+Dreamweaver(CC2018)+HTML5+CSS3 レスポンシブWEBデザイン実践コース...
発売日 2018/02/15
受講者 1,412人
通常 12,000円
新規 1,890円
(4.4)
総評価数 254件
19
(3.4)
総評価数 96件
20
(4.8)
総評価数 10件
21
初心者向けHTML & CSS基礎講座
発売日 2018/04/05
受講者 94人
通常 2,400円
新規 1,680円
(3.5)
総評価数 23件
22
初めての人の「HTML5」入門
発売日 2015/08/26
受講者 431人
通常 3,000円
新規 1,680円
(4.4)
総評価数 94件
23
(2.9)
総評価数 29件
24
(4)
総評価数 78件
25
誰でもわかる HTML基礎&CSS基礎
発売日 2018/04/26
受講者 192人
通常 21,000円
新規 1,610円
(3.9)
総評価数 22件
26
HTMLやCSSをサクサク書こう! Emmet基礎講座
発売日 2016/10/24
受講者 288人
通常 4,200円
新規 1,890円
(4.6)
総評価数 48件
27
(4.3)
総評価数 20件
28
誰でもわかる HTML5
発売日 2015/10/09
受講者 71人
通常 4,800円
新規 1,610円
(4.2)
総評価数 19件
29
Webの新しいデザイン「CSS3」入門
発売日 2015/10/02
受講者 205人
通常 3,000円
新規 1,750円
(4.5)
総評価数 26件
30
HTMLやCSSをどんどん書こう! Brackets基礎講座
発売日 2016/09/08
受講者 124人
通常 3,000円
新規 1,680円
(4.2)
総評価数 29件
31
(4.4)
総評価数 7件
32
(4.1)
総評価数 6件
33
(3.4)
総評価数 4件
34
(3.1)
総評価数 4件
35
[HTML/CSS]未経験から最速でフロントエンジニアになるためのHTML/CSS入門...
発売日 2020/08/08
受講者 8人
通常 5,400円
新規 1,610円
(4)
総評価数 1件
36
5日で覚える!HTML/CSS【超入門】
発売日 2020/06/29
受講者 2人
通常 2,400円
新規 1,610円
(0)
総評価数 0件
 

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
知識0から初めてプログラミング学習を始めた所ですので、他との比較は分かりませんが、聞き取りやすい話し方をされている講師です。 初めてでもコース内容を全て動作表示させることが出来て良かったです。 (参考: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.5)

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
丁寧な説明でわかりやすかったです。 SCSSの記述方法などを学ぶために本コースを受講したのですが、SCSSの使い方だけでなく、JSについての解説もかなり丁寧にされておりJSの勉強にもなりました。 またjQueryではなく、JSを用いていたので、かなり参考になりました。 逆に悪かった点ですと、動画内で音声にばらつきがあったことが気になりました。 (動画内で声が高くなったり低くなったりする場面がありました) また、これは完全に個人の問題だと思いますが、ヘッドホンをつけて視聴していたのですが、鼻をすする音など雑音が気になりました。 (参考: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への変換がうまくいかない時の対処法
    • ホバーで影ができるボタンを作ってみよう
    • 【演習】色々なエフェクトのボタンを作ってみよう
    • 【解答】色々なエフェクトのボタンを作ってみよう
    • 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文書の基本構造
    • 【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によるスタイルの設定④
    • レスポンシブ対応
    • 画像の設定
    • メタデータの設定
    • よくあるご質問(本セクション)
  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とは
    • 動作確認環境について
    • はじめてのRubyプログラミング
    • コメント
 
Preview Video
   

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

【最新2020】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
独学で始めて4ヶ月が過ぎました。模写コーディングをいくつか挑戦し、できるようになりましたが、基礎の部分をしっかり学びたくこちらの講座を受講しています。グリッドレイアウトが苦手だったのですが、理屈がわかると楽しくなりました。今はまだ折り返し地点なのですが、この後の講座も楽しみです。先生のやさしい話し方がとても心地いいです。 (参考: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
説明が聞き取りやすく、どうしてデザインが崩れるのか、変更が反映されないのかという解説がわかりやすい。 しかし、コピペのソースがどこにあるのかわからなかったり、説明と実際に入力しているピクセル数が違ったりということがしばしばあり、混乱することも。 それから、初学者向けなので仕方がないのかもしれないが、boxsizing、sass、flexboxなどのもっと簡単にコーディングできる要素についても紹介があるとよかった。 (参考: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講座一覧

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

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

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

HTML5+CSS3  手を動かしてマスターする WEBデザイン/プログラミング動画講座

HTML5+CSS3  手を動かしてマスターする WEBデザイン/プログラミング動画講座
発売日 2016/10/24
(4.2)

10.5 total hours
最新のHTML5とCSS3を駆使してWEB業界で活躍するスキルを身につけよう

 この講座はhtml5とCSS3を使ってWEBサイトページを制作するために必要なことを学ぶことに特化した講座です。 全編を手を動かして作品を制作しながら解説しているので、理論や機能を単独で学ぶ講座のように、途中で集中力を切らして飽きることがありません。

最新のHTML5とCSS3でホームページサイトを作る力を身につけよう

・WEBページ制作に必要な知識はすべて基本からていねいに分かりやすく説明しているので、これだけでサイト作成のスキルを身につけられます。

・ 将来役立つかもしれないけれど今は必要はないという知識は含んでいません。実践を重視した講座です。

・「実際に手を動かしてコードを書き」、ひとつのサイトを制作することを通して身につけます。 

・解説はすべて動画で行い、現役のデザイナーがページを制作する工程をマウスの動きひとつまで収録しています。

 ・ナレーション付きでわかりやすく解説しています。

・必要な画像素材など作業に必要な素材はすべて添付されています。

・仕事で必要なことだけをOJTで集中的に学ぶ講座です。


WEB業界で活躍できるスキルを確実に身につけるコース

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

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

学習内容

10のセクション、84本のビデオ、合計10.5時間の講座で集中して学べます。


↓全て表示↑少なく表示
 
Users Voice
HTMLとCSSについては初めて学んだのですが、ホームページを構造的に理解することができ、タブとCSSの役割も理解することが出来ました。学んだ知識とスキルで勤めている会社の業務の効率化を図るためポータルサイトを作成しました。社内で公開したところ評判がよく、早速成果につなげることが出来ました。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. Section1:WEBサイトのしくみ
    • はじめに 準備と基礎知識
    • サイトとウエブサーバー
    • html文書の編集方法
    • CSSについて
    • CSSの中身
    • htmlとcssの関係
  2. htmlとCSSの基礎知識
    • エディターの準備
    • htmlとCSSの実際
    • タグの書き方(1)
    • タグの書き方(2)
    • CSSの説明
    • CSSをhtmlに適用する
  3. Test_Siteの制作
    • HTMLの構造
    • head要素
    • body要素
  4. トップページの制作
    • index.htmlの構造
    • bodyの設定
    • containerの配置
    • containerのCSS設定
    • containerの中央配置
    • class(クラス)とid
  5. コンテンツの制作
    • bodyの仕上げ(1)
    • bodyの仕上げ(2)
    • フォントの設定
    • header, main, footerの配置
    • header, main, footerのCSS設定
    • headerの仕上げ
    • Logo_areaのCSS設定
    • Logo_areaの仕上げ
    • Logo_areaのリンク設定
    • バナー画像の配置
    • Global_Naviの設定(1)
    • Global_Naviの設定(2)
    • Global_Naviの設定(3)
    • Global_Naviの設定(4)
    • パスの指定方法
  6. Side_naviの制作
    • 画像と要素の配置
    • Side_navi, Main_box, Banner_boxのCSS設定
    • なぜ横一列に配置されない?
    • Side_navi ul, liの配置
    • Side_navi ul, liのCSS
    • ロールオーバーのhtml設定
    • ロールオーバーのCSS設定
    • トップ以外のボタンのhtml設定
    • トップ以外のボタンのCSS設定
    • スキマはどこから?
  7. Main_boxの制作
    • 内容の検討
    • テキストの挿入
    • テキストのマークアップ
    • MainBox_itemのCSS設定
    • MainBox_itemの仕上げ
    • 新着情報の設定(1)
    • 新着情報の設定(2)
    • 新着情報の設定(3)
    • Banner_boxの制作
    • footerの制作
  8. corporate.htmlの制作
    • ページの概要
    • MainBox_subの配置とCSS設定
    • Subpage_Titleの設定
    • Corporate_titleの設定
    • tableの設定(1)
    • tableの設定(2)
    • tableの設定(3)
    • Side_naviの設定
  9. modelhouse.htmlの制作
    • ページの概要
    • ページの準備
    • MainBox_itemの設定
    • Item_titleの設定
    • Item_box, Item_textの設定
    • Side_naviの設定
  10. お問合せformページの制作
    • ページの準備
    • ページ内容の検討
    • ワーヤーフレームの検討
    • p要素の設定
    • CSS3でグラデーションを設定
    • labelとinput要素の配置
    • input要素のCSS設定
    • CSS3によるシャドウの設定
    • メールアドレス入力部品の設定
    • 郵便番号入力部品の設定
    • ラジオボタンの設定
    • チェックボックスの設定
    • プルダウンメニューの設定
    • 送信とリセットボタンの設定
    • リンク先urlの設定
 
Preview Video
       

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

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

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

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

いじょうでっす。

コメント

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