レバテックフリーランスのサイトに当サイトが紹介されました!

【動画で学習】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
ちゃんと学ぶ、HTML/CSS + JavaScript
発売日 2017/08/29
受講者 72,696人
通常 27,800円
現在 1,500円
(4.6)
総評価数 13513件
2
(4.4)
総評価数 6608件
3
(4.6)
総評価数 1519件
4
(4.2)
総評価数 863件
5
(4.4)
総評価数 677件
6
(4.3)
総評価数 7748件
7
(4.6)
総評価数 318件
8
(4.6)
総評価数 1992件
9
(4.1)
総評価数 387件
10
(4.3)
総評価数 47件
11
(4.2)
総評価数 489件
12
(4.6)
総評価数 202件
13
(4.4)
総評価数 35件
14
(4.1)
総評価数 1591件
15
(4)
総評価数 239件
16
(4.4)
総評価数 24件
17
(4.3)
総評価数 401件
18
(4.6)
総評価数 47件
19
(4.5)
総評価数 15件
20
JavaScriptとHTMLで「レトロ風RPG」を作ろう 全コード解説
発売日 2021/10/31
受講者 1,110人
通常 8,000円
現在 1,500円
(4.2)
総評価数 112件
21
JavaScriptとHTMLで「タワーディフェンス」を作ろう 全コード解説...
発売日 2021/11/19
受講者 403人
通常 8,000円
現在 1,300円
(4.3)
総評価数 35件
22
(4.4)
総評価数 585件
23
チャート式問題集の用に学ぶ React・TypeScript・Tailwind CSS
発売日 2024/03/17
受講者 337人
通常 6,200円
現在 6,200円
(4.2)
総評価数 30件
24
(4.5)
総評価数 754件
25
(3.9)
総評価数 416件
26
Python Django3 + HTML5 CSS3 実践コース 画像付きブログシステムを10時間で制作...
発売日 2021/02/23
受講者 924人
通常 20,000円
現在 20,000円
(4.4)
総評価数 94件
27
(4)
総評価数 86件
28
NEXT JSでイケてるホームページ制作!tailwindcssを駆使します(2023年)...
発売日 2023/11/27
受講者 86人
通常 4,800円
現在 1,300円
(4.3)
総評価数 12件
29
Nextjs + Tailwind CSS + Django REST Framework で学ぶモダンReact開発
発売日 2020/12/23
受講者 4,715人
通常 27,800円
現在 1,500円
(4.2)
総評価数 593件
30
(4.4)
総評価数 128件
31
(4.1)
総評価数 216件
32
【作りながら学ぶ】Python入門 & HTML,CSS,JavaScript超入門
発売日 2022/10/06
受講者 523人
通常 2,600円
現在 2,600円
(4.3)
総評価数 55件
33
(3.6)
総評価数 445件
34
(4.7)
総評価数 247件
35
(4.1)
総評価数 26件
36
【初心者向け】つまずかないWEB制作/開発(HTML/CSS, JavaScript, PHP)...
発売日 2022/04/20
受講者 120人
通常 19,800円
現在 1,600円
(4.4)
総評価数 14件
37
HTML・CSS・JavaScript ウェブサイト作成 & GitHub Pages 入門
発売日 2022/10/23
受講者 133人
通常 27,800円
現在 1,500円
(4.5)
総評価数 17件
38
(4.1)
総評価数 295件
39
(3.4)
総評価数 424件
40
(4.3)
総評価数 87件
41
(3.2)
総評価数 121件
42
初めての人の「HTML5」入門
発売日 2015/08/26
受講者 453人
通常 3,000円
現在 2,100円
(4)
総評価数 103件
43
(4.4)
総評価数 64件
44
Bootstrap3+Dreamweaver(CC2018)+HTML5+CSS3 レスポンシブWEBデザイン実践コース...
発売日 2018/02/15
受講者 1,953人
通常 13,800円
現在 13,800円
(4.3)
総評価数 360件
45
(4.1)
総評価数 16件
46
(4.5)
総評価数 15件
47
Webの新しいデザイン「CSS3」入門
発売日 2015/10/02
受講者 215人
通常 3,000円
現在 2,100円
(4.7)
総評価数 28件
48
誰でもわかる HTML5
発売日 2015/10/09
受講者 78人
通常 4,800円
現在 3,120円
(4.5)
総評価数 23件
49
JavaScript+HTML:Electronでつくるローカルアプリ実例講座 for Windows...
発売日 2017/04/14
受講者 1,254人
通常 10,000円
現在 1,800円
(3.7)
総評価数 132件
50
(4.4)
総評価数 48件
51
誰でもわかる HTML基礎&CSS基礎
発売日 2018/04/26
受講者 256人
通常 23,800円
現在 1,300円
(3.7)
総評価数 42件
52
HTML5プロフェッショナル 認定試験 レベル2 模擬問題集
発売日 2021/03/31
受講者 185人
通常 3,000円
現在 1,500円
(3.8)
総評価数 26件
53
70以上のレッスンで、基礎からしっかり学べる! HTML5完全マスターコース...
発売日 2015/10/16
受講者 2,456人
通常 10,000円
現在 1,500円
(3.9)
総評価数 441件
54
まるごとどっぷりHTML
発売日 2019/08/05
受講者 193人
通常 3,000円
現在 1,500円
(4.6)
総評価数 58件
55
(3.8)
総評価数 1314件
56
(3.2)
総評価数 33件
57
[HTML/CSS]未経験から最速でフロントエンジニアになるためのHTML/CSS入門...
発売日 2020/08/08
受講者 491人
通常 5,600円
現在 1,300円
(4.2)
総評価数 96件
58
Atomic Designで考えるコンポーネント設計とCSS設計
発売日 2020/04/25
受講者 867人
通常 27,800円
現在 1,500円
(3.7)
総評価数 88件
59
初心者向けHTML & CSS基礎講座
発売日 2018/04/05
受講者 218人
通常 2,600円
現在 1,300円
(4.1)
総評価数 54件
60
まるごとどっぷりCSS
発売日 2021/03/04
受講者 195人
通常 3,000円
現在 1,300円
(4.7)
総評価数 40件
61
【Nuxt3】2時間でできるNuxt.js入門(Vue3, Naive UI, Tailwind CSS, pinia)...
発売日 2024/06/20
受講者 56人
通常 10,000円
現在 1,300円
(3.2)
総評価数 9件
62
(4.4)
総評価数 8件
63
(4.3)
総評価数 8件
64
html、css、javascript 入門 フロントエンド初心者からマスタークラスへの道...
発売日 2022/08/16
受講者 48人
通常 27,800円
現在 27,800円
(3.8)
総評価数 8件
65
(4.3)
総評価数 7件
66
(4)
総評価数 7件
67
(5)
総評価数 6件
68
(3.8)
総評価数 6件
69
(2.4)
総評価数 5件
70
エンジニアじゃない人のためのHTML/CSS
発売日 2024/08/30
受講者 27人
通常 2,600円
現在 1,300円
(4.2)
総評価数 2件
71
最初の一歩はこの講座から: HTMLとCSSで作るWebページの初歩
発売日 2024/09/12
受講者 94人
通常 9,800円
現在 1,300円
(5)
総評価数 1件
72
HTMLとCSSとJavaScriptでプロフィールを作成してみよう
発売日 2024/04/30
受講者 3人
通常 5,600円
現在 1,300円
(0)
総評価数 0件
 

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

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

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

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

ちゃんと学ぶ、HTML/CSS + JavaScript

ちゃんと学ぶ、HTML/CSS + JavaScript
発売日 2017/08/29
(4.6)

19 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
AI自動補完が邪魔だった。AIの自動補完が入るたびに「これも自動補完されているのでこれを使いましょう」と説明するのも授業と関係ないのでノイズに感じた。時代なのかもしれないが、AI補完機能に関する話は別に置いておいて、愚直に一文字ずつ打ってほしかった。 (参考:Udemy)

↓全て表示 ↑少なく表示
・資格勉強(HTML/CSSプロフェッショナル )に役立ちます。 ・基本を丁寧に学べました。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • Udemyでの受講について
    • Web開発環境を整えよう(macOS)
    • Web開発環境を整えよう(Windows)
    • エディタの設定を調整しよう
  2. シンプルなHTML文書を作ってHTMLの基本を学ぼう
    • HTMLファイルを作成しよう
    • HTMLの入れ子構造 - ulタグ
    • HTMLの基本的なタグを入れよう - DOCTYPE
    • 補足:Cursor Tabが使えなくなった場合
    • HTMLの基本タグを理解しよう
    • HTMLタグの属性について理解しよう
    • 終了タグがない「空要素」
    • CSSを書こう
    • CSSの内部参照
    • CSSの外部参照で別ファイルにしよう
    • 文書にヘッダーをつけよう - header
    • 「文字参照」でコピーライトマークを入れよう
    • リセットCSSでブラウザ標準のCSSを上書きしよう
    • ファイルパスを理解して外部ファイルを読み込もう
    • @import構文でリセットCSSを読み込もう
    • HTML、CSSにコメントを書こう
    • カラーコードを理解して色を指定しよう
    • margin, paddingで余白を設定しよう
    • CSSのショートハンドで短く設定しよう
    • CSSのセレクタを複数設定しよう
    • Google Chromeのデベロッパーツールを利用しよう
    • divタグでレイアウトを調整しよう
    • class属性でグループ分けしよう
    • 汎用的なクラスを利用しよう
    • 子孫セレクタで要素を指定しよう
    • CSSの「詳細度」とは
    • ファイルを仕上げよう
    • 詳細解説:カラーコード①
    • 詳細解説:カラーコード②
    • 詳細解説:カラーコード③
  3. Flexboxでナビゲーションを作ろう
    • displayプロパティで表示状態を制御しよう
    • Flexboxにして、横並びにしよう
    • justify-contentプロパティで表示位置を調整しよう
    • メニューにリンクを張ろう
    • 疑似クラスで、マウスのロールオーバー時に色を変更しよう
    • 詳細解説:フレックスコンテナのプロパティ①
    • 詳細解説:フレックスコンテナのプロパティ②
    • 詳細解説:フレックスアイテムのプロパティ
  4. グリッドレイアウトでYouTube風画面を作ろう
    • HTMLを準備しよう
    • CSSを準備しよう
    • グリッドレイアウトで画面を構成しよう
    • メディアクエリーでレスポンシブWebデザインにしよう
    • ビューポートとは
    • 詳細解説:グリッドレイアウトについて
    • 詳細解説:repeat関数を使った指定
    • 詳細解説:frという単位について
    • 詳細解説:autoという値と、mixmax関数
    • 詳細解説:位置調整用のプロパティについて
    • 詳細解説:セルをまたぐグリッド
    • 詳細解説:grid-areaを使ったグリッドレイアウト
    • 詳細解説:サブグリッド
  5. CSSの単位について詳しく知ろう
    • 絶対単位と相対単位
    • ピクセル(px)
    • 相対単位(%)
    • rem
    • その他の相対単位
    • 論理的単位とは
  6. 装飾されたボタンを作りながら装飾系CSSを知ろう
    • linear-gradientでグラデーションをかけよう
    • border-radiusで角丸にしよう
    • transition, transformでアニメーションをつけよう
    • グラデーションプロパティを詳しく知ろう
    • その他のグラデーションプロパティ
    • transition, transformプロパティを詳しく知ろう
  7. 入会フォームを作りながらフォームパーツのHTMLを知ろう
    • HTML、CSSを準備しよう
    • テキストフィールド
    • 送信ボタン
    • 必須項目に設定しよう
    • メールアドレス入力欄
    • ラジオボタン
    • ラジオボタン②
    • チェックボックス
    • ドロップダウンリスト
    • テキストフィールド
    • フォームのmethod属性とは
    • inputタグのtype属性
    • ラジオボタンを使うときの注意点
    • テキストエリアを使うときの注意点
    • ボタンを使うときの注意点
  8. CSSのセレクターについて詳しく知ろう
    • 基本のセレクタ
    • 階層セレクタ
    • 属性セレクタ
    • 疑似クラス
    • 疑似要素
  9. 補足講義
    • CSSの詳細度とは
    • Webにおけるフォントの扱い
    • Webフォントを使おう
  10. JavaScript入門:JavaScriptの基本を知ろう
    • サンプルファイルについて
    • JavaScriptで計算結果を表示しよう - document.write
    • JavaScriptのルールを知ろう
    • バグの発生とデバッグ作業をしよう
    • さまざまな計算をしよう - 算術演算子
    • データ型について知ろう
    • 文字列と数字をつないで計算式を表示しよう - 文字列連結
    • プログラム内にコメントを書こう
    • 警告ウィンドウを表示しよう - window.alert
    • 変数・定数を知ろう
    • 代入演算子について知ろう
    • ウィンドウのタイトルを書き換えよう - プロパティ
    • ユーザーの入れた金額の税込金額を求めよう - window.prompt
    • データ型を変換しよう
    • 計算機を作ろう
  11. JavaScript入門:オブジェクト指向プログラミングを知ろう
    • 今日の日付を表示しよう - Dateオブジェクト
    • 小数を切り捨て、切り上げ、四捨五入をしよう - Mathオブジェクトと静的メソッド
    • 関数を作ろう
    • サイコロを振るプログラムを作ってみよう
  12. JavaScript入門:HTMLを操作しよう
    • JavaScriptでHTMLを書き換えよう - DOM
    • ボタンのクリックに反応しよう - イベント
    • イベント定義を無名関数で書こう
    • フォームパーツを復習しよう
    • テキストフィールドの内容を受け取ろう
    • テキストフィールドに入力されているかを確認しよう - if
    • 比較演算子について知ろう
    • 複数の条件を繋げる論理演算子について知ろう
    • 1から100までの数字を表示しよう - for
    • サイコロで1が出るまで繰り返そう - while
    • 少なくとも一回は実行される do while構文を知ろう
    • サイコロで1が出たら終わりにしよう - break
    • 都道府県の情報を画面に表示しよう
    • for of構文で繰り返そう
    • 都道府県にそれぞれのキーをつけて管理しよう - 連想配列
    • 開発者ツールに表示しよう - console.log
    • 配列操作のメソッドを知ろう
    • 都道府県を地域で分けて管理しよう - 多次元配列
    • ID属性以外の方法で要素を取得しよう - querySelector
    • 各種フォームパーツから値を取得しよう①
    • 各種フォームパーツから値を取得しよう②
    • パスワードを生成するツールを作成しよう
  13. JavaScript入門:クラス宣言でオリジナルのオブジェクトを作成しよう
    • 商品管理クラスを宣言しよう
    • オリジナルのメソッドを定義しよう
    • ゲッター・セッターでプロパティを守ろう
    • コンストラクタでクラスの初期設定をしよう
    • 子クラスを定義してクラスを分けよう
    • 年齢計算プログラムを作成しよう
    • プログラムを外部ファイル化しよう
  14. 【旧講座】入会フォームを HTML/CSSで作成しよう
    • ここから先のレクチャーについて
    • HTMLファイルを作ってみよう
    • HTMLタグを書いてみよう
    • 「属性」でHTMLタグを調整しよう
    • パスワード入力欄を作ろう
    • HTMLの基本タグを挿入しよう
    • (補足) lang属性について
    • HTMLのheadタグに文字コードやタイトルを挿入しよう
    • タグの入れ子構造と、空要素の書き方
    • CSSを書いてみよう
    • Webで利用する単位
    • CSSを内部参照で書こう
    • CSSを外部参照で書こう
    • ファイルのパスについて知ろう
    • sanitize.cssでブラウザーごとのCSSの差異をなくそう
    • サニタイズとリセットの違いを知ろう
    • CSSの優先順位を知ろう
    • @importでCSSを読み込もう
    • divタグでレイアウトを調整しよう
    • Webで色を指定するカラーコードを知ろう
    • marginプロパティで余白を調整しよう
    • borderプロパティで枠線を引こう
    • paddingプロパティで内側の余白を調整しよう
    • テキスト入力フィールドのスタイルを整えよう
    • ボタンのスタイルを調整しよう
    • テキストフィールドにラベルを設定しよう
    • 必須項目ラベルを追加しよう
    • 入会申し込みフォームを仕上げよう
  15. 【旧講座】レスポンシブWebデザインで、スマホ対応のサイトを作ろう
    • CDアルバムの紹介ページを作ろう
    • HTMLの基本タグを作成しよう
    • セクショニングコンテンツでエリアを分けよう
    • CSSでスタイルを整えよう
    • 子孫型セレクターで要素を指定しよう
    • imgタグで画像を入れ込もう
    • Webで使える画像の種類
    • floatプロパティで画像と文章を回り込ませよう
    • Flexible Boxで柔軟なレイアウトをしよう
    • ol, liタグでリストを作ろう
    • aタグでリンクを設置しよう
    • CSS Gridでグリッドレイアウトをしよう
    • 収録曲リストのスタイルを整えよう
    • 文字参照でコピーライトを挿入しよう
    • Webフォントでフォントを変更しよう
    • メディアクエリーでスマホ向けレイアウトを作ろう
    • max-widthプロパティで画面幅に沿うリキッドレイアウトにしよう
    • 全体のスタイルを整えて仕上げよう
   

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

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

26 total hours
Ruby on Rails7/MySQL/Bootstrap/AWS Cloud9/Git/GitHub等ウェブ開発に必要な様々なスキルを沢山学ぼう!カフェのウェブサイト、フォトギャラリー、ポートフォリオサイト、タスク管理アプリ等に挑戦!

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

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

想定する受講生

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

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

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

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


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


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


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

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

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

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

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

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

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

私は約10年の豊富なエンジニア経験があるとともに、初心者向けのプログラミング勉強会の講師や、エンジニア志望の大学生向けインターン講師、があるのが強みです。初心者の時によくつまずく箇所が分かっているので、講座では丁寧な解説をしています。

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


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

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

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

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

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

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

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

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

  • Ruby on Rails 7・・・Webアプリケーションを高速で開発するためのフレームワーク

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

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

  • GitHub・・・Gitによるソースコード管理を行えるウェブサービス

  • Visual Studio Code ・・・テキストエディタ

  • Google Chrome ・・・ウェブブラウザ


学習環境について

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

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

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

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

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

  • GitHub 無料プラン


Q&Aコーナーのご利用について

  • 本コースの内容を超えるご質問にはお答えできませんので、あらかじめご了承ください。

  • コース内で紹介する動作確認済みのサンプルコード以外の動作については、サポート対象外とさせていただいております。

  • ご意見・ご要望や、コンテンツのリクエストは、コース内で紹介する専用のフォームにてお知らせいただけると幸いです。


コースにご満足いただけない場合は?

  • 受講するか迷っていますか?30日以内返金保証制度があるため安心です(Udemy ウェブサイトよりコースをご購入の場合)


旧版のコンテンツについて

  • 学習中の方が困らないように、一定期間動画を視聴いただけるようにしていますが、メンテナンスとサポート(Q&A)は終了しています。使用バージョンが古くメンテナンスが困難なため、一定期間経過後に廃止します。


補足

  • ウェブ開発初心者向けの講座です。実務経験豊富なITエンジニアの方にとっては、物足りない可能性があります。

  • セクション「実践:ECサイトのコーディングをしよう」は、コースの難易度調整のために、β版のコンテンツとして試験的に公開中です。予告無く公開中止とする場合があります。

  • セクション「Rubyの開発環境構築をしよう」は、別のUdemyコース「はじめてのRuby on Rails入門-RubyとRailsを基礎から学びウェブアプリケーションをネットに公開しよう」とコンテンツを共用している部分があります。


更新履歴

  • 2023/5/31 レクチャー「IAMユーザーを作成しよう」を最新情報へアップデート

  • 2022/12/19 セクションリニューアル「新・Git / GitHub入門 - ソースコードのバージョン管理をしよう」

  • 2022/12/14 新規セクション試験公開「実践:ECサイトのコーディングをしよう」

  • 2022/11/9 新規セクション追加「CSSグリッドレイアウトでタイル状のレイアウトを作成しよう」

  • 2022/8/4 セクションリニューアル「MySQL入門」

  • 2022/7/4 セクションリニューアル「JavaScript入門」(ES5 → ES2015・ES6以降へ)

  • 2022/5/24 新規セクション追加「Flexboxの基本を習得しよう」

  • 2022/3/3 新規セクション追加「ウェブ開発の概要を知ろう」

  • 2022/3/1 セクションリニューアル 「Ruby on Rails」関連(Ruby on Rails7  へ対応。旧:Ruby on Rails 5)

  • 2022/3/1 動作確認済みのRubyバージョンをv3.0.2へ変更(旧:v2.5.0)

  • 2022/3/1 セクションリニューアル 「Rubyの開発環境構築をしよう」

  • 2021/12/22【β版・試験的公開】ポートフォリオサイト - 作品紹介サイトを制作しよう

  • 2021/10/07 HTMLの基本 のVisual Studio Codeのemmet設定のUI変更に対応(macOS, Windows)

  • 2021/5/28  セクションリニューアル「Bootstrap5でフォトギャラリーを制作しよう」

  • 2021/5/20 セクションリニューアル「Bootstrap」※Bootstrap5 対応

  • 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回のレクチャーの時間も長くないので助かります。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. コース概要
    • コース紹介
  2. ウェブ開発の概要を知ろう
    • ウェブ開発関連の用語を知ろう
    • ウェブ開発入門の学習の流れを知ろう
  3. 開発環境を準備しよう
    • Google Chromeをインストールしよう
    • テキストエディタについて
    • 補足:拡張機能の競合について
    • 【macOS】Visual Studio Codeのインストール
    • 【Windows】Visual Studio Codeのインストール
    • 【よくあるご質問】Visual Studio Codeのメニューを 日本語化する方法と英語化する方法
  4. HTMLの基本を習得しよう
    • イントロダクション - HTML入門
    • 受講オリエンテーション
    • 補足:Q&A対応に関するガイドライン
    • HTMLの歴史
    • HTMLの基本構文
    • HTML文書の基本構造
    • 補足:自動生成されるmeta要素について
    • サンプルコードについて
    • 補足:Q&Aでコードを共有する場合について
    • 【macOS】はじめてのHTML
    • 【Windows】はじめてのHTML
    • 技術ドキュメント MDN
    • HTML文書のインデントと改行
    • 【macOS】Visual Studio Codeの設定
    • 【Windows】Visual Studio Codeの設定
    • よくあるHTMLの記述間違い
    • 補足:構文チェック
    • 構文チェック
    • 演習:HTMLのエラーを取り除く
    • 演習回答:HTMLのエラーを取り除く
    • よくあるご質問:要素の書き順
    • HTMLのコメント
    • 改行
    • 区切り線
    • リスト
    • 入れ子になったリスト
    • 演習:リスト
    • 演習解答:リスト
    • 説明リスト
    • 見出し
    • よくあるご質問:画像のダウンロード方法と配置方法について
    • 属性と画像の表示
    • リンク
    • 強調
    • 著作権表記
    • 情報のグループ化
    • span要素
    • 演習 : HTML基礎
    • 演習回答 : HTML基礎
    • コンテンツリクエスト募集中!
  5. HTMLステップアップ編
    • イントロダクション - HTMLステップアップ
    • 再掲:サンプルコードについて
    • 補足:はじめてのテーブル
    • はじめてのテーブル
    • 行と列の覚え方
    • ヘッダーのあるテーブル
    • thead、tbody、tfootがあるテーブル
    • キャプション
    • セルの結合
    • 演習 : テーブル
    • 演習回答:テーブル
    • フォーム概要
    • はじめてのフォーム
    • お問い合わせフォームの制作① - 単一行のテキスト入力欄
    • お問い合わせフォームの制作② - プルダウンメニュー
    • お問い合わせフォームの制作③ - ラジオボタン
    • お問い合わせフォームの制作④ - テキストエリア
    • お問い合わせフォームの制作⑤ - チェックボックス
    • お問い合わせフォームの制作⑥ - 送信ボタン
    • お問い合わせフォームの制作⑦ - ラベル
    • フォームバリデーション
    • 演習:フォーム
    • 演習回答:フォーム
  6. CSSの基本を習得しよう
    • イントロダクション - CSS入門
    • 再掲:サンプルコードについて
    • CSSの基本をマスターしよう
    • はじめてのCSSを書いてみよう
    • コメントアウトをしよう
    • 色の指定ができるようになろう
    • 背景を指定しよう
    • ボックスモデルの基本を理解しよう
    • マージンを指定しよう
    • 補足:マージンの相殺について理解しよう①
    • マージンの相殺について理解しよう①
    • マージンの相殺について理解しよう②
    • パディングを設定しよう
    • ボーダーを設定しよう
    • ボックスの横幅と高さを指定しよう
    • マージンとパディングの違いを学ぼう
    • 3つのセレクターを使えるようになろう
    • 結合子を使ったセレクタを指定しよう
    • 複数のセレクタを指定しよう
    • リンクで使用する疑似クラスを指定しよう
    • フォントを指定しよう
    • ウェブフォントを利用しよう
    • テキストに様々なスタイルを設定しよう
  7. Flexboxの基本を習得しよう
    • Flexboxとは?
    • 再掲:サンプルコードについて
    • Flexboxの基本的な書き方を知ろう
    • flex-directionプロパティで、子要素の並ぶ向きを指定しよう。
    • flex-wrapプロパティで、子要素の折り返しを指定しよう。
    • justify-contentプロパティで、子要素の水平方向の揃えを指定しよう。
    • align-itemsプロパティで、子要素の垂直方向の揃えを指定しよう。
    • align-contentプロパティで、子要素を複数行にした時の揃えを指定しよう。
    • flex-flowプロパティで、flex-directionとflex-wrapをまとめて指定してみよう。
    • セクションまとめ - Flexboxの基本を習得しよう
  8. CSSグリッドレイアウトでタイル状のレイアウトを作成しよう
    • イントロダクション - CSSグリッドレイアウトとは?
    • 再掲:サンプルコードについて
    • CSSグリッドレイアウトの基本的な書き方
    • grid-template-columnsプロパティで、横の並びについての指定をしよう
    • grid-template-rowsプロパティで、縦の並びについて指定をしよう
    • gapプロパティで、余白を指定しよう
    • repeat関数で繰返しの指定をしよう
    • minmax()で、最小値、最大値を指定しよう
    • auto-fit/auto-fillで繰返しの数値を指定しよう
  9. ポートフォリオサイト - 作品紹介サイトを制作しよう
    • イントロダクション-ポートフォリオ作品紹介サイト
    • 再掲:サンプルコードについて
    • ファイルの作成
    • HTMLのマークアップ①
    • HTMLのマークアップ②
    • HTMLのマークアップ③
    • HTMLのマークアップ④
    • HTMLのマークアップ⑤
    • CSSによるスタイル設定①
    • CSSによるスタイル設定②
    • CSSによるスタイル設定③
    • CSSによるスタイル設定④
    • CSSによるスタイル設定⑤
    • ファビコンを設定しよう
  10. 実践:ウェブサイトのコーディングにチャレンジしよう
    • イントロダクション - 実践:新ウェブサイトのコーディング
    • よくあるご質問(必ずご確認ください)
    • 再掲:サンプルコードについて
    • ファイルの作成
    • HTMLによるマークアップ①
    • よくあるご質問:ダミー画像が表示されない場合について
    • HTMLによるマークアップ②
    • HTMLによるマークアップ③
    • CSSによるスタイルの設定①
    • 【重要】アップデート情報:CSSによるスタイルの設定②
    • CSSによるスタイルの設定②
    • CSSによるスタイルの設定③
    • CSSによるスタイルの設定④
    • レスポンシブ対応
    • 画像の設定
    • メタデータの設定
    • よくあるご質問 その2(本セクション)
  11. 【β版・試験公開中】実践:ECサイトのコーディングをしよう
    • 補足:β版・試験公開中について
    • 【β版・試験公開中】イントロダクション - 実践:ECサイトのコーディングをしよう
    • 【β版・試験公開中】課題を確認しよう
    • 【β版・試験公開中】フォルダとファイルの準備
    • 【β版・試験公開中】【解説】フォルダとファイルの準備
    • 【β版・試験公開中】htmlやcssの準備をしよう
    • 【β版・試験公開中】【解説】htmlやcssの準備をしよう
    • 【β版・試験公開中】htmlの全体のレイアウトを作成しよう
    • 再掲:サンプルコードについて
    • 【β版・試験公開中】【解説】htmlの全体のレイアウトを作成しよう
    • 【β版・試験公開中】headerをマークアップしよう
    • 【β版・試験公開中】【解説】headerをマークアップしよう
    • 【β版・試験公開中】mainエリアをマークアップしよう
    • 【β版・試験公開中】【解説】mainエリアをマークアップしよう
    • 【β版・試験公開中】footerエリアをマークアップしよう
    • 【β版・試験公開中】【解説】footerエリアをマークアップしよう
    • 【β版・試験公開中】全体に共通のスタイルをあてよう
    • 【β版・試験公開中】【解説】全体に共通のスタイルをあてよう
    • 補足:AdobeXDのデザインスペックの確認方法について
    • 【β版・試験公開中】headerのスタイルをあてよう
    • 【β版・試験公開中】【解説】headerのスタイルをあてよう
    • 【β版・試験公開中】main visualエリアのスタイルをあてよう
    • 【β版・試験公開中】【解説】main visualエリアのスタイルをあてよう
    • 【β版・試験公開中】goodsエリアのスタイルをあてよう
    • 【β版・試験公開中】【解説】goodsエリアのスタイルをあてよう
    • 【β版・試験公開中】footerエリアのスタイルをあてよう
    • 【β版・試験公開中】【解説】footerエリアのスタイルをあてよう
    • 【β版・試験公開中】レスポンシブに対応させよう
    • 【β版・試験公開中】【解説】レスポンシブに対応させよう
  12. Bootstrap5の基本を習得しよう
    • イントロダクション-Bootstrap5
    • 再掲:サンプルコードについて
    • Bootstrapとは
    • はじめてのBootstrap
    • はじめてのBootstrap-ボタン
    • はじめてのBootstrap-ナビゲーション①
    • はじめてのBootstrap-ナビゲーション②
    • はじめてのBootstrap-グリッドシステム①
    • はじめてのBootstrap-グリッドシステム②
    • はじめてのBootstrap-グリッドシステム③
    • はじめてのBootstrap-グリッドシステム④
    • はじめてのBootstrap-グリッドシステム⑤
    • はじめてのBootstrap-ジャンボトロン・フォーム
 
Preview Video
   

【HTML,CSS,JS,PHP,Git,Docker】プログラミング初心者OK! ゼロからわかるWebシステム開発

【HTML,CSS,JS,PHP,Git,Docker】プログラミング初心者OK! ゼロからわかるWebシステム開発
発売日 2021/07/26
(4.6)

23.5 total hours
わかりやす〜い図で解説!知識ゼロから一気にWebアプリ開発をマスター【HTML/CSS/JavaScript/PHP/AWS EC2/独自ドメイン&SSL/TLS/Git/Docker/Laravel/WebAPI/Webhook】

Web開発のスキルを身につけて、エンジニアとして開発を楽しんでみませんか?

Web開発を行うには、
特定のプログラミング言語だけではなく、数多くの周辺知識が必要なため、
それらを一つずつ学習していくと、情報の収集/取捨にたくさんの時間がかかります。

もし、どこから学ぶべきか迷っているなら、当コースがおすすめです。

また、一つのプログラミング言語を学んでみたものの、
応用する方法がわからなかった方にもおすすめ
します。

当コースでは、
実際にアプリケーションを開発しながら
Web開発で必要になる知識やスキルを一気通貫で学習することができるため、
当コース1本で一連の知識や技術が身につきます。

もちろん初学者でも安心してご受講いただけるように、
図も多く利用しており、理解の助けになるよう工夫もしていますので、
ご安心ください!


コースの概要は以下のとおりです。

-----------------------------------------

STEP1 : Webシステムの概要を理解する

まずは、手始めに私達が学習する対象の概念について理解するところから始めます。
学習対象がどんなものなのかを理解し、目的をしっかりと明確にしていきます。


STEP2 : 開発環境を整える

ここで、コース中で利用するものについて大まかにお話します。
その上で次のステップからすぐ利用することになる開発のための道具を整えます。


STEP3 : Webシステムを公開する

当コースで一番大きな部分です。

ここでWeb開発における基本的なパーツを一つずつ理解して、実装をしていきます。
STEP3が完了したら、Webページがインターネット上で独自ドメインで公開できている状態になります。
HTML / CSS / JavaScript / PHP / EC2 など、一つずつおさえていきましょう。

プログラミング初心者でもわかるように、図も多用していますので、
論理的に考えることが苦手、という方でも安心して進めていただけます。


STEP4 : ファイルを効率よく管理する

このSTEPでは、ファイルを効率的に管理するために
バージョン管理システムのGitと、Gitのホスティングサービスの中では一番利用者の多いGithubを学びます。

Web開発をしていると、たくさんのファイルを作成・更新しなければならないため、
開発効率を上げるため、ここでGitの概念を学び、
そして実際に操作をしながらGitのスキルを身に付けていきましょう。


STEP5 : 先人が作った機能を利用して開発を加速させる

世界中には数多くのエンジニアが、様々なツールを公開しています。

ここでは、公開されているツールやオープンソースソフトウェアを活用して開発を更に加速させていきます。
それらを利用するための環境構築もかんたんに行えるようにDockerというツールを利用します。
Dockerは昨今のWeb開発現場では利用されるケースも増えてきたので押さえておきたいテクノロジーの一つです。

よりかんたんに開発環境を作成できるようになったら
Webフレームワークを活用し、Webアプリケーションを作成していきましょう。


STEP6 : 他のサービスと自分のプログラムを連携させる

最後のステップでは、他のサービスをプログラミングで操作できるWebAPIについて学びます。
ここで、APIの概念、そして他のサービスとの連携を学び、アイデア次第で様々なことができるようになります。
またWebhookを学ぶとそのアイデアの可能性も更に広がるでしょう。

一番最後に腕試しとして、一つ課題があるのでぜひチャレンジしてみてください。

ここまでやりきったあなたならきっとできるはず!!

-----------------------------------------


それでは、コース内でお会いできることを楽しみにしております!


↓全て表示↑少なく表示
 
Users Voice
説明がゆっくりだったので、聞き取りやすかった。 ブラウザを用いて学んだ内容を確認する作業もよかった。 (参考:Udemy)

↓全て表示 ↑少なく表示
現状の説明を聞いているとわかりやすく丁寧な物腰での説明方法だから (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • コース紹介
    • はじめに
    • 講師紹介
    • 全体の流れ
  2. STEP1. Webシステムの概要を理解する
    • Webシステムとは?
    • クライアントの役割
    • サーバーの役割
    • まとめ - Webシステムの概要を理解する
  3. STEP2. 開発環境を整える
    • 概要説明 - 開発環境を整える
    • VSCodeインストール(macOS用)
    • VSCodeインストール(Windows用)
    • 【資料】開発お助け資料のダウンロード
  4. STEP3.1~3 【HTML/CSS】Webページを作ってみよう - 自分でWebシステムを公開する
    • HTMLとは
    • CSSとは
    • 概要説明 - Webページを作ってみよう
    • VSCodeの基礎的な操作方法
    • HTMLのサンプルを作ってみよう
    • HTMLでコンテンツを作ってみよう
    • Quizコンテンツの提案とMarkdownの紹介
    • CSSファイルの準備
    • フォントの指定
    • レイアウト調整
    • レイアウト調整2
    • レイアウト調整3
    • 文字の装飾
    • 擬似クラスを使った装飾
    • まとめ - Webページを作ってみよう
    • HTML / CSS 実装までのサンプルコードについて
  5. STEP3.4 【JavaScript】Webページに動きを与えてみよう(JavaScript編) - 自分でWebシステムを公開する
    • 概要説明 - Webページに動きを与えてみよう(JavaScript編)
    • JavaScriptの実行方法
    • 変数 - JavaScript 基礎
    • 配列 - JavaScript 基礎
    • オブジェクト - JavaScript 基礎
    • 関数 - JavaScript 基礎
    • 条件分岐 - JavaScript 基礎
    • JavaScriptでHTMLを操作するときの準備 - JavaScriptでHTMLの操作
    • HTMLの要素をJavaScriptで操作する - JavaScriptでHTMLの操作
    • イベントの設定 - JavaScriptでHTMLの操作
    • QuizアプリをJavaScriptで実装 その1
    • QuizアプリをJavaScriptで実装 その2
    • QuizアプリをJavaScriptで実装 その3
    • QuizアプリをJavaScriptで実装 その4
    • まとめ - Webページに動きを与えてみよう(JavaScript編)
    • JavaScript 実装までのサンプルコードについて
  6. STEP3.5 【AWS EC2 / NGINX】Webサーバーを作ってみよう - 自分でWebシステムを公開する
    • 概要説明 - Webサーバーを作ってみよう
    • これからやること - Webサーバーを作ってみよう
    • AWSの料金体系について
    • AWSのアカウント作成
    • AWSアカウントのセキュリティ強化
    • Amazon EC2とは?
    • EC2基本操作(起動)
    • EC2基本操作(停止・終了・再作成)
    • Terminal(ターミナル)の概要
    • ターミナルの準備(macOS用)
    • ターミナルの準備(Windows用)
    • 準備 - Terminal(ターミナル)基本操作
    • 練習1(pwd ls cd)- Terminal(ターミナル)基本操作
    • 練習2(touch mkdir cp)- Terminal(ターミナル)基本操作
    • 練習3(mv rm) - Terminal(ターミナル)基本操作
    • まとめ - Terminal(ターミナル)基本操作
    • Terminal(ターミナル)でファイルを準備(macOS用)
    • Terminal(ターミナル)でファイルを準備(Windows用)
    • 作業の流れを確認 - Webサーバーを作ってみよう
    • 【お知らせ】amzon-linux-extras コマンドが利用できなくなった件について
    • EC2にログイン - Webサーバーを作ってみよう
    • EC2にファイルをアップロード・ダウンロード - Webサーバーを作ってみよう
    • NGINXをインストール - Webサーバーを作ってみよう
    • NGINXの設定ファイルを更新 - Webサーバーを作ってみよう
    • ファイルのアップロード・動作確認 - Webサーバーを作ってみよう
    • まとめ - Webサーバーを作ってみよう
  7. STEP3.6. 【PHP】Webページに動きを与えてみよう(PHP編) - 自分でWebシステムを公開する
    • 概要説明 - Webページに動きを与えてみよう(PHP編)
    • PHPのインストール(macOS用)その1 brew インストール
    • PHPのインストール(macOS用)その2 php インストール
    • PHPのインストール(Windows用)
    • PHPコマンドを使って基礎を理解する
    • Quizのテンプレートファイルを準備(その1)
    • Quizのテンプレートファイルを準備(その2)
    • PHPの基本文法(その1)
    • PHPの基本文法(その2)
    • Quizをテンプレートで出力できるように実装する
    • PHPでファイルの操作 - Quizのコンテンツをファイルで管理する
    • CSVファイルの作成 - Quizのコンテンツをファイルで管理する
    • CSVファイルをPHPから読み込む - Quizのコンテンツをファイルで管理する
    • CSVから取得したデータの出力 - Quizのコンテンツをファイルで管理する
    • セキュリティ対策 - Quizのコンテンツをファイルで管理する
    • コードの整理 - Quizのコンテンツをファイルで管理する
    • GETやPOSTの基礎 - クライアントから送信されてきたデータを処理する
    • PHPのエラーについて(php.ini を変更して画面上にエラーを表示させる方法)
    • Quizの問題をURLパラメータで切り替え - クライアントから送信されてきたデータを処理する
    • Quizの解答チェックをPHPで実装 - クライアントから送信されてきたデータを処理する
    • 概要説明 - JSでリクエスト処理を実装
    • Quizの解答チェックをするリクエストを送信
    • JSでレスポンスを処理する
    • エラーレスポンスを実装
    • テンプレート読み込み処理を整理 - Quiz一覧の実装
    • Quizアプリを完成させる - Quiz一覧の実装
    • まとめ - Webページに動きを与えてみよう(PHP編)
    • PHP 実装までのサンプルコードについて
  8. STEP3.7~8 【AWS EC2 / php-fpm】WebサーバーをPHPが動く環境にする - 自分でWebシステムを公開する
    • 概要説明
    • EC2 に php をインストールする方法について
    • サーバーにPHPをインストール
    • NGINXとphp-fpmの通信の方法について(UNIXドメインソケット)
    • NGINXとphp-fpmの設定を確認
    • NGINXとphp-fpmの動きについて解説
    • vimの操作練習
    • php-fpmの設定ファイルを書き換え
    • まとめ - WebサーバーをPHPが動く環境にする
    • WebサーバーでQuizアプリを確認 - Webサーバーの動作確認
    • まとめ - Webサーバーの動作確認
  9. STEP3.9. 【DNS / SSL/TLS / AWS ALB&Route53&ACM】独自ドメインの取得と設定 - 自分でWebシステムを公開する
    • ドメインとサーバーとIPアドレス
    • 固定IPの設定
    • ドメイン取得
    • 概要説明 - SSL/TLS設定
    • SSL証明書を発行(ACM設定) - SSL/TLS設定
    • ALBの設定(その1) 概要説明 - SSL/TLS設定
    • ALBの設定(その2) ターゲットグループの作成 - SSL/TLS設定
    • ALBの設定(その3) セキュリティグループの作成 - SSL/TLS設定
    • ALBの設定(その4) ALBの作成と動作確認 - SSL/TLS設定
    • DNSの設定変更 - SSL/TLS設定
    • まとめ - 独自ドメインの取得と設定
  10. STEP3. まとめ - 自分でWebシステムを公開する
    • 各リソースの後片付け
    • まとめ - STEP3全体
  11. STEP4. 【Git / Github】ファイルを効率よく管理する
    • 概要説明 - ファイルを効率よく管理する
    • ファイルの管理方法について考える - ファイルを効率よく管理する
    • 概要説明 - GitとGithub
    • Gitのインストール(macOS用) - GitとGithub
    • Gitのインストール(Windows用) - GitとGithub
    • GitHub登録 - GitとGithub
    • GitHubの接続設定 - GitとGithub
    • 概要説明 - GitとGitHubでバージョン管理してみよう
    • 変更内容を記録する方法(コミット)に慣れる(概要説明) - GitとGitHubでバージョン管理してみよう
    • 変更内容を記録する方法(コミット)に慣れる(実践) - GitとGitHubでバージョン管理してみよう
    • ブランチ操作に慣れる(概要説明) - GitとGitHubでバージョン管理してみよう
    • ブランチ操作に慣れる(実践) - GitとGitHubでバージョン管理してみよう
    • コンフリクト(衝突)を解消する(概要説明) - GitとGitHubでバージョン管理してみよう
    • コンフリクト(衝突)を解消する(実践) - GitとGitHubでバージョン管理してみよう
    • コンフリクト(衝突)を解消する(補足説明) - GitとGitHubでバージョン管理してみよう
    • リポジトリの操作に慣れる(概要説明) - GitとGitHubでバージョン管理してみよう
    • リポジトリの操作に慣れる(実践) - GitとGitHubでバージョン管理してみよう
    • 「GitHubFlow」で、快適Gitライフ!(概要説明) - GitとGitHubでバージョン管理してみよう
    • 「GitHubFlow」で、快適Gitライフ!(実践) - GitとGitHubでバージョン管理してみよう
    • Sourcetree紹介
    • まとめ - ファイルを効率よく管理する
  12. STEP5.1~3 【Docker】開発環境を整える - 先人が作った機能を利用して開発を加速させる
    • 概要説明 - 先人が作った機能を利用して開発を加速させる
    • OSSとは - 先人が作った機能を利用して開発を加速させる
    • 概要説明 - 開発環境を整える
    • 開発環境について - 開発環境を整える
    • Dockerの概要説明 - 開発環境を整える
    • コンテナのステータスについて - 開発環境を整える
    • DockerDesktopのインストール(macOS用) - 開発環境を整える
    • DockerDesktopのインストール(Windows用) - 開発環境を整える
    • イメージを取得/確認/削除 - DockerでNGINXを動かす
    • コンテナを作成/起動/停止/削除 - DockerでNGINXを動かす
    • イメージを作成 - DockerでNGINXを動かす
    • コンテナの詳しい操作 - DockerでNGINXを動かす
    • docker-composeについて- DockerでNGINXを動かす
    • 概要説明 - WordPressを動かしてみよう
    • 実践1 - WordPressを動かしてみよう
    • 実践2 - WordPressを動かしてみよう
  13. STEP5.4~6 【Laravel】Laravelを使ってみよう - 先人が作った機能を利用して開発を加速させる
    • Webフレームワークとは
    • 概要説明 - Laravelを使ってみよう
    • LaravelのサンプルプロジェクトをDockerで動かす - Laravelを使ってみよう
    • 概要説明 - LaravelでQuiz管理アプリをつくってみよう
    • 環境準備 / 起動 / 停止
    • Laravelを利用する際にインストールしておきたいVSCodeの拡張
    • routeとblade基礎(Viewの実装)
    • 各ページのテンプレートを作成(Viewの実装)
    • 削除ボタンの実装(Viewの実装)
    • リンクの修正(Viewの実装)
    • Controllerの作成(Controllerの実装)
    • 入力データのバリデーション(Controllerの実装)
    • ローカリゼーション(日本語化)(Controllerの実装)
    • DB基本(Modelの実装)
    • Laravelでテーブル作成(Modelの実装)
    • Modelクラスを使ったデータ操作(保存)(Modelの実装)
    • Modelクラスを使ったデータ操作(参照)(Modelの実装)
    • Modelクラスを使ったデータ操作(削除)(Modelの実装)
    • まとめ - Laravelを使ってみよう
    • まとめ - 先人が作った機能を利用して開発を加速させる
  14. STEP6.1~2 【WebAPI】 LINEボットを作ってみよう - 他のサービスと自分のプログラムを連携させる
    • 概要説明 - 他のサービスと自分のプログラムを連携させる
    • APIとは? - 他のサービスと自分のプログラムを連携させる
    • 概要説明 - LINEボットを作ってみよう
    • 全体構成 - LINEボットを作ってみよう
    • LINEDevelopers登録と設定(開発ドキュメントの確認)
    • LINEDevelopers登録と設定(開発者登録とチャネル設定)
    • 環境作成(実装1)
 
Preview Video
   

WEBデザイン講座 Level0《対象:ゼロから始める超初心者の方》HTML と CSS に必要な基礎知識を学習します。

WEBデザイン講座 Level0《対象:ゼロから始める超初心者の方》HTML と CSS に必要な基礎知識を学習します。
発売日 2020/01/15
(4.2)

5 total hours
HTML や CSS の基礎とコーディングの流れを学習しながら、講師と共にシンプルなWEBページを完成させます。なお【超】基礎部分の学習となるため、HTMLやCSSに関する知識が全くない方や基礎固めをしたい(復習をしたい)方にお勧めします。

▼ご注意ください

storeGが公開している講座は、講師によるナレーションではなく、全てプロのナレーターによるナレーションを採用しています。
そのため、ナレーションにこだわりがある方は、ひとまず無料視聴動画をご確認いただき、受講をご検討いただければ幸いです


  • 新着情報

    • [new] 特典動画を追加しました!

      ※シリーズWEBデザイン講座共通の特典動画となります。

      WEBデザイナーの仕事は将来、AIに奪われるのか?について、気になっている方も多いのではないかと思います。そのような疑問に対する答えとなるような動画を作成しましたので、是非、ご視聴ください!

    • Udemyのシステムにより自動で生成された字幕が表示されるようになりました。
      ※字幕内容は自動生成のため、正しい日本語に置き換わっていない部分があります。予めご了承ください。

    • 特典動画の内容をアップデートしました。

      • GoogleChromeのインストールと起動

      • Bracketsのインストールと起動

      • Bracketsの画面構成とテーマ

      • テーマの追加・変更・削除

      • 拡張機能の追加

    • 5月になりましたので旧レクチャー動画を非公開にし、若干の動画修正を行いました。

    • エディタソフトの Brackets が復活!
      ※詳細については、【重要】エディタ ※初心者の方は必ずお読みください のレクチャーをご確認ください。

    • 大幅アップデートのお知らせ

      【基本セクション】WEBページを作成する【1】のセクションが、HTML編とCSS編に分かれ
      ・WEBページの作成【1】HTML編

      ・WEBページの作成【2】CSS編
      の2セクションになり、レクチャー数が約2倍に増えました
      ※学習途中の方に関しましては、4月末まで旧レクチャー動画も公開しておきますので、その間までご視聴いただければ幸いです。

      詳細については、【最新版】講座内容と学習の進め方のテキストレクチャーをご確認ください。

    • 本講座のサポートについてのレクチャーを追加しました。


    • 特典セクションに以下のレクチャーを追加しました。

      • Visual Studio Code のインストール

      • テーマの変更

      • ファイルの保存と設定

      • リアルタイムプレビュー

    • Bracketsがインストールできなくなったため、かわりのエディタについての説明を追加しました。
      詳細は、カリキュラムの「【重要】エディタとは ※初心者の方は必ずお読みください」をご確認ください。

    • 本講座の動画で使用しているエディタ「Bracketsの提供終了」に関するアナウンスを追加しました。
      ※2021年3月1日より、本講座で使用しているエディタ「Brackets」のインストールができなくなり、サポートも9月1日をもって終了すると提供元のAdobeがアナウンスしました。


  1. 本講座の特徴
    本講座では、最初に「HTMLが生まれた背景」や「HTMLの特徴」を学習することで、「なぜHTMLはタグを使用するのか?」といった基礎概念から、HTMLを理解できるように構成されています。
    そのため、講師から説明された要素やタグなどを単に書き写して記述(コーディング)するだけではなく、その意味を理解した上で、HTMLのコーディングをはじめることができます。

    注意

    本講座は別講座である「WEBデザイナーになりたい人のための【WEBデザイン入門講座】」のカリキュラムより、HTML&CSS入門セクションの一部を抜粋し、【演習セクション】を追加した講座となっていますので、コース内容に重複したレクチャーがあることを、あらかじめご了承ください。

  2. 対象と目標

    本講座は、WEB制作に必要なHTMLとCSSのコーディングをゼロから学びたい【超】初心者の方を対象に、シンプルなWEBページを作成するうえで最低限必要な要素とプロパティを基礎からしっかりと学習し、入門レベルをクリアすることを目標としています。

    そのため、すでにHTMLやCSSを学習済みの方にとっては、物足りない講座となるかと思いますので、カリキュラムなどをご確認いただいた上で、ご受講をご検討いただければ幸いです。

  3. 30日間の返金保証

    ご購入から30日以内であれば、「期待通りではなかった」、「思っていたようなコースではなかった」など、理由を問わず返金可能となっていますので、安心してご受講いただけます。


ナレーション・BGMほか

  • ナレーション 竹中 さやか

  • BGM YOU (storeG)

イラストなど

  • designed by freepik .com


↓全て表示↑少なく表示
 
Users Voice
1操作事に止めて、ソースを確認しながら、ゆっくり進めることで理解が深まった。基礎的な部分を学び直せてよかったです。 (参考:Udemy)

↓全て表示 ↑少なく表示
初心者にも丁寧でわかりやすかった。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • 【PV】本講座のレベルと学習内容がわかる!※シリーズ講座の紹介
    • シリーズ WEBデザイン講座 ※オススメの受講方法について
    • 【動画編】シリーズ WEBデザイン講座 ※オススメの受講方法について
    • 【最新版】講座内容と学習の進め方
    • Udemyの動画視聴画面の説明 【PC編】(無料サンプル動画)
    • 字幕について※システムによる自動生成
    • 【重要】本講座のQ&Aサポートについて
  2. 【導入セクション】基礎知識の学習
    • 1.ホームページってなに?
    • 2.WEBページの構成
    • 3.HTMLが生まれた背景
    • 4.HTMLの特徴
    • 5.HTML文書作成のルール
    • 6.基本的なファイル構成
  3. 【基本セクション】WEBページの作成【1】HTML編
    • 教材のダウンロード
    • 【重要】エディタ ※初心者の方は必ずお読みください
    • 1.基本のHTML①
    • 2.基本のHTML②
    • 3.HTMLをコーディング(記述)する際のルール
    • 4.<body>要素①
    • 【サンプルソース】銀河鉄道の夜
    • 5.HTML要素の調べ方
    • 6.<body>要素②
    • 【サンプルソース】HTML編【完成版】
  4. 【基本セクション】WEBページの作成【2】CSS編
    • 1.基本のCSS① CSSとは
    • 2.CSSプロパティの調べ方
    • 3.基本のCSS② 色を変更する
    • 4.ボックスモデル
    • 5.ブロックボックスとインラインボックス①
    • 6.ブロックボックスとインラインボックス②
    • 7.基本のCSS③ paddingプロパティ
    • 8.基本のCSS④ widthプロパティ
    • 9.<style>要素に記述する①
    • 10.<style>要素に記述する②
    • 11.CSSファイルに記述する
    • 12.基本のCSS⑤ リンクのスタイル①
    • 【サンプルソース】CSS編【途中版】
    • 13.基本のCSS⑤ リンクのスタイル②
    • 14.基本のCSS⑥ ブロックボックスを中央揃えにする
    • 15.marginとpadding を使い分ける方法
    • 16.marginとpaddingの指定方法
    • 17.基本のCSS⑦ インラインボックスのスタイル
    • 18.基本のCSS⑧ 罫線(水平線)を追加する
    • 19.基本のCSS⑨ 箇条書きリストとFlexbox①
    • 19.基本のCSS⑨ 箇条書きリストとFlexbox②
    • 【サンプルソース】CSS編【完成版】
    • 【特典】CSS作成のルール
  5. 【演習セクション】WEBページの作成【3】
    • 0.教材のダウンロード ※画像ファイルなど
    • 1.WEBページの作成【2】コーディング前の準備1
    • 2.WEBページの作成【2】コーディング前の準備2
    • 3.WEBページの作成【2】ロゴ画像
    • 4.WEBページの作成【2】ナビゲーションメニュー
    • 5.WEBページの作成【2】ヒーローイメージ
    • 6.WEBページの作成【2】画像を横並びで表示させる(HTML編)
    • 7.WEBページの作成【2】画像を横並びで表示させる(CSS編)
    • 8.WEBページの作成【2】ダミーコンテンツとコピーライト
    • 【サンプルソース】完成版
  6. 【特典 1 】 ※シリーズWEBデザイン講座共通の特典動画となります。
    • 1.WEBデザイナーの仕事は将来、AIに奪われるのか?【1】
    • 2.WEBデザイナーの仕事は将来、AIに奪われるのか?【2】
    • 3.WEBデザイナーの仕事は将来、AIに奪われるのか?【3】
    • 4.WEBデザイナーの仕事は将来、AIに奪われるのか?【4】
    • 5.WEBデザイナーの仕事は将来、AIに奪われるのか?【5】
    • 6.WEBデザイナーの仕事は将来、AIに奪われるのか?【6】
  7. 【特典 2 】
    • 特典レクチャーについて
    • GoogleChromeのインストールと起動 ≪new≫
    • 【Brackets】インストールと起動 ≪new≫
    • 【Brackets】画面構成とテーマ ≪new≫
    • 【Brackets】テーマの追加・変更・削除 ≪new≫
    • 【Brackets】拡張機能の追加 ≪new≫
    • 【Brackets】拡張機能の説明
    • 【VScode】インストール
    • 【VScode】テーマの変更
    • 【VScode】ファイルの保存と設定
    • 【VScode】リアルタイムプレビュー※拡張機能
  8. おわりに
    • コース修了おめでとうございます
    • ボーナスレクチャー
   

【HTMLとCSS】ルールをしっかりマスター。初心者でも3時間後にはWEBサイトが編集できる基礎知識が身につく実践型講座

【HTMLとCSS】ルールをしっかりマスター。初心者でも3時間後にはWEBサイトが編集できる基礎知識が身につく実践型講座
発売日 2020/04/21
(4.4)

3 total hours
WordPressなどのCMSも編集できるようになるHTML,CSSルールの基礎知識。自分で編集できる、デザイナーやコーダーと打ち合わせも理解できる。WEBデザイナー、ディレクター、プロデューサー、コーダーを目指す人向け基礎知識です。

講座は日本語の動画ですが、テキストは日本語と英語を用意しました。

英語テキストも日本語テキストとページを合わせていますので日本語が分からなくても動画を見ながらテキストを読み込めば理解できるようにしています。

日本では3000人以上が受講し、5段階評価で4.4の高評価をいただいている講座です。


The course videos are in Japanese, but the text is available in both Japanese and English.

The English text is on the same page as the Japanese text, so even if you don't understand Japanese, you can understand by watching the videos and reading the text.

Over 3,000 people in Japan have taken the course, and it has received an excellent rating of 4.4 out of 5.


仕事の幅を広げるためにも今はHTML,CSSの基本知識が必要だと思っています。

HTMLが最初できたときの〈タグ〉の役割、後から登場した〈スタイル〉の機能と役割のルールがどのように進化し、便利な〈スタイル〉が誕生したのか、〈タグ〉が増えた意味を知ると将来どのように進化しても理解しやすくなります。

講師をしていて受講者の殆どが就職してからホームページの編集などの仕事が増え、基本が分かっていないし、先輩も教えてくれない。

そんな環境でコードの編集を任されている人が多く、基礎知識を学びに受講されています。

いきなりHTML5.0とCSS3.0からお勉強するのではなく、HTMLの〈タグ〉の役割、〈スタイル〉の機能と役割の基礎的なルールを最初に学ぶと、最新が理解しやすくなります。

プログラマーもフロントエンドはHTML,CSSで出来ているので、HTML,CSSの基本知識を学びに受講に来られました。

対面セミナーですと地域や時間が決まってしまうため、時間も場所も気にせず学べられるオンライン講座を作りました。

初めてでも3時間でHTML,CSSが加速度的に編集出来るようになるオンラインスタディプログラム。

自分はWEBデザイナーやコーダーを目指さない方も、WEBデザイン、コーダーと話をする、依頼する時、HTMLの仕組みや編集の基礎知識があるのと無いのでは打ち合わせ内容がぜんぜん違ってきます。

HTMLコードや仕組みのことが分かっていれば依頼者に説明する時やデザイナーやコーダーに依頼する時もポイントが分かってきます。

仕事の段取りも見えてきます。

ホームページを持っていない会社はほとんど無いので、HTMLの基礎知識があると絶対に仕事の幅が広がります。

WEBデザイナーやコーダーを目指していない方も、WEB関連の仕事に携わる方は基礎知識として知っているべき内容です。

HTMLを全部理解して最初からホームページを作れるようになるためには経験と毎日コードを編集するような環境ではないと身につきませんが、基礎を知っていればちょっとした変更や編集は出来るようになります。

社内にHTMLの基礎知識を分かっている人が必ず一人以上いる状況が今後の会社では必ず必要になってきます。

今、求められている基礎知識だと思っています。

ぜひ、スキルアップ、就職・転職時に有利になるHTML,CSS基礎知識を学んでください。


I think that basic knowledge of HTML and CSS is necessary now to broaden the scope of work.

If you know the role of <tags> when HTML was first created, how the functions and roles of <styles> that appeared later evolved, and the meaning of the increase in <tags>, it will be easier to understand how it will evolve in the future.

As a lecturer, most of the students have more work such as editing websites after getting a job, and they don't understand the basics, and their seniors don't teach them.

Many people are in charge of editing code in such an environment, and they take this course to learn the basics.

Instead of starting with HTML5.0 and CSS3.0, it is easier to understand the latest if you first learn the roles of HTML <tags> and the basic rules of the functions and roles of <styles>.

Programmers also come to learn the basics of HTML and CSS, because the front end is made of HTML and CSS.

Since face-to-face seminars are limited by location and time, I created an online course that can be learned regardless of time or place.

An online study program that allows beginners to rapidly edit HTML and CSS in just 3 hours.

Even if you are not aiming to be a web designer or coder, when talking to or requesting web design or coders, the content of the meeting will be completely different depending on whether or not you have basic knowledge of HTML structure and editing.

If you understand HTML code and how it works, you will know the key points when explaining to clients or when requesting designers or coders.

You will also be able to see the work process.

There are almost no companies that do not have a website, so having basic knowledge of HTML will definitely expand the range of work you can do.

Even if you are not aiming to be a web designer or coder, this is something that anyone involved in web-related work should know as basic knowledge.

In order to fully understand HTML and be able to create a website from scratch, you will need experience and an environment where you edit code every day, but if you know the basics, you will be able to make small changes and edits.

In the future, companies will definitely need at least one person in the company who understands the basics of HTML.

I think this is the basic knowledge that is needed now.

Please learn the basics of HTML and CSS to improve your skills and give you an advantage when looking for a job or changing jobs.


【講座の概要】

  • 実際にWEB講師を経験して、現在のWEBスクールの教え方に疑問があり、HTML,CSSの基礎知識は3時間で教えられると思いメソッドを開発。

  • さらに、基本が理解できれば加速度的に編集できるようになる勉強法をメソッドにしました。

  • HTMLの誕生から、どのように考えられてコードが作られてきたかを知ることで構造や役割が分かりやすくなってきます。

  • これが短時間で加速度的に編集できるようになる当方の「メソッド」です。

  • 〈タグ〉やスタイルをそのまま覚えるのではなく、どうしてこのような〈タグ〉やスタイルが設定されたのか理由が分かると、どのように進化してきたかが分かるので、今後、どんなに便利になって行っても理屈が分かるので対応出来るようになります。

  • 対面の少人数セミナーで500人以上教えてきて95%以上の受講生が理解し編集できるようになったセミナーのオンライン講座。

  • 他のHTML,CSS講座と違うところは、進化を理解して、現状を知り、今後にも対応出来る知識が身につけられることです。しかも短時間で。

  • 料理で言えば調理方法を教えるのではなく、なぜこの材料を使うかの理由、その材料の特性、その特性を料理でどのように活かすと栄養と美味しさの両立ができるのか、考えられる料理法など学びながら調理すれば、目的の料理を作るだけでなく様々な料理が作れるようになる。それと同じようになぜ〈タグ〉やスタイルの記述が出来るようになったのか、どのように活用していけるのかが分かると編集が楽しくなって来ます。

  • WordPressなどのCMSが人気ですが、ホームページはHTMLとCSSのコードでできているので、基礎的な知識がないと編集で躓きます。

  • 様々なCMSが登場している昨今。優れたCMSであってもカスタマイズするにはHTML,CSSの基本が分かっていないとできません。

  • CMSも何が便利な機能になっているのか、HTML,CSSの成り立ち、構造が分かってくるといろいろなCSSも便利なところが色々違っていることが分かってきますので、どのようなCMSを使うと、自分の求めているホームページを作るのに便利かが分かるようになっています。

  • 本や学校では基礎的な説明や解説が不足していて消化不良のまま現在のHTML5,CSS3を教えてしまうので、基礎から解説し理解できればあ今後の進化も分かりやすい。

本講座は、独学では何日もかかって基本が理解できない人でも、実際にコーディングを学んだ経験から、躓くポイントをしっかり捉えてしっかり基本を身につけられる講座です。自分でスキルアップしていく方法も学べます。


たった3時間ですが、中身が詰まっています。

HTML,CSSの教本等で学んだことがある人は本で理解できなかったところが分かりスッキリするでしょう。

初めての人はテキストエディターへのコピペでうまく行かないかもしれません。(間違っても気づきにくい)

でも、知識とともに実践でコーディングを進めながら理解できる部分が沢山ある講座です。


[Course Overview]

  • As an actual web instructor, I had doubts about the teaching methods used by current web schools, and developed a method that I thought could teach the basics of HTML and CSS in 3 hours.

  • Furthermore, I created a method that allows you to learn how to edit at an accelerated rate once you understand the basics.

  • By knowing how HTML has been thought about and how code has been created since its birth, you can easily understand its structure and role.

  • This is my "method" that allows you to edit at an accelerated rate in a short amount of time.

  • Instead of memorizing the tags and styles as they are, if you understand why these tags and styles were set, you will understand how they have evolved, and you will be able to handle them no matter how convenient they become in the future because you will understand the logic behind them.

  • This is an online seminar that I have taught to over 500 people in small-group seminars in person, and over 95% of the students have been able to understand and edit.

  • What makes this seminar different from other HTML and CSS courses is that you can understand the evolution, learn the current situation, and acquire the knowledge to handle the future. And in a short amount of time.

  • In the case of cooking, instead of teaching cooking methods, you can learn why certain ingredients are used, the characteristics of those ingredients, how to use those characteristics in cooking to achieve both nutrition and deliciousness, and possible cooking methods while cooking, and you will be able to make not only the desired dish but also a variety of dishes. In the same way, editing becomes more fun when you understand why tags and style descriptions have become possible and how to use them.

  • CMS such as WordPress are popular, but websites are made of HTML and CSS code, so if you don't have basic knowledge, you will have trouble editing.

  • Nowadays, various CMSs have appeared. Even with a good CMS, you cannot customize it unless you understand the basics of HTML and CSS.

  • Once you understand what the useful functions of a CMS are, and the origins and structure of HTML and CSS, you will understand that various CSSs have different useful points, so you will be able to understand which CMS is useful for creating the website you want.

  • In books and schools, basic explanations and commentary are lacking, and current HTML5 and CSS3 are taught without being fully digested, so if you can explain and understand the basics, it will be easier to understand future evolutions.

This course is for people who cannot understand the basics by themselves after spending days on it, but you can learn the basics by grasping the stumbling points from the experience of actually learning coding. You can also learn how to improve your skills on your own.

It's only 3 hours, but it's packed with content.

If you have studied HTML and CSS textbooks, you will understand the parts that you couldn't understand in books and feel refreshed.

If you are a beginner, you may not be able to copy and paste into a text editor. (It's hard to notice if you make a mistake)

However, this course has a lot of parts that you can understand as you proceed with coding in practice along with knowledge.


【今までの対面セミナーの受講者の方々】

  • WEBデザインスクールに通っているけど基本が分からない(学校では基本的な知識を教えてくれない)

  • ホームページを自分で作れるようになりたい

  • プログラマーがHTML,CSSの基本を学びに来る場合もある

  • DTPデザイナーがWEBの両方が出来るように勉強したい

  • ネット通販会社に入ってコーディングをやっているが基本的なことが分かっていない

  • 外部のデザイン会社に依頼しているが、簡単な編集が出来るようにしたい

  • WordPressで作ってあるサイトを編集できるようになりたい

  • WEBコーディングやデザイナーになって、副業、独立したい

  • 就職してからWEB関連の仕事が増えたので基本的なことを知っていたい

[Participants of past in-person seminars]

  • I'm attending a web design school but I don't understand the basics (schools don't teach basic knowledge)

  • I want to be able to make my own homepage

  • Programmers sometimes come to learn the basics of HTML and CSS

  • DTP designers want to learn so they can do both web design

  • I work at an online mail order company and do coding but I don't understand the basics

  • I outsource to an external design company but I want to be able to do simple editing

  • I want to be able to edit sites made with WordPress

  • I want to become a web coder or designer and do side work or become independent

  • I've had more web-related work since I started working so I want to know the basics


↓全て表示↑少なく表示
 
Users Voice
HTMLの基本と短時間で整理習得するのに大変役に立ちました。ありがとうございました。 (参考:Udemy)

↓全て表示 ↑少なく表示
基本的な理解をすることができました (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. ~編集始める前の下準備~
    • Acrobat Reader,Chromeのダウンロード案内 - Acrobat Reader, Chrome download instructions
    • 学んでいくステップを説明- Explain the steps to learning
    • テキスト(PDF)とVS codeのダウンロードと設定 - Download and set up the text (PDF) and VS code
  2. ~HTMLとは何か?について学ぶ~
    • テキストエディターアプリを入手(VS code) - Get a text editor app (VS code)
    • 拡張子.html書類とはどんなものか - What is a .html document?
    • html書類の保存形式 ~文字コード~ について - About the saving format of html documents ~charset~
  3. ~HTML書類の記述の仕方について学ぶ ~
    • HTML記述について - About HTML
    • HTMLの基本構造(書式形式)について - About the basic structure of HTML (formatting)
    • HTML基本構造を作成 - Create the basic HTML structure
    • <body>へのデータ入力 - Entering data into the <body>
    • <head>へのデータ入力 - Entering data into the <head>
  4. ~HTMLで初期に設定されたタグについて学ぶ~
    • タグの機能について
    • 見出しタグ<h>について
    • 本文タグ<p>について
    • コメントアウトタグについて
    • 枠が作れるタグ<div>について
    • 表を作れる<table><tr><th><td>タグについて
    • 箇条書きを作れる<ul><ol><li>タグについて
    • 横に並ぶ<ul>タグについての設定方法
    • 定義リストタグ<dl><dt><dd>について
    • 画像配置タグ<img>について
    • リンク設定タグ<a>について
    • タグについての勉強の仕方
  5. ~タグにスタイルを設定する記述方法について学ぶ~
    • Fontのスタイルを設定してみよう
    • ブロックレベルへのスタイル設定
    • 余白(マージン,パディング,ボーダー)のスタイル設定
    • ページ全体のスタイル設定
    • 各タグのスタイル記述をHTML内にまとめて記述する方法
  6. ~CSS書類の作り方、読み込み方を学ぶ~
    • スタイルだけを記述したCSS書類の作成
    • スタイルを変更する
    • 新しい名称のスタイルの作成・追加
  7. ~CSSの編集の基本的操作~
    • コンテンツを入れ替えてタグのスタイルを追加
    • スタイルをHTMLに設定する基本的操作
  8. ~リセットCSS~
    • スタイルを持っているタグのスタイルをリセットする
  9. ~ブラウザー機能を活用する~
    • ブラウザーChromeの「検証」機能を使ってみる
  10. ~加速度的にHTML,CSSが編集できるようになる方法~
    • これからのWEBコーディングのスキルアップ方法
 
Preview Video
   

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

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

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

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

初心者の文系にもできた!1日で必要なことだけ覚える超初心者向けの速習HTML・CSS講座

初心者の文系にもできた!1日で必要なことだけ覚える超初心者向けの速習HTML・CSS講座
発売日 2020/09/23
(4)

1 total hour
文系でも出来る超初心者向けに1日で覚える速習HTML・CSS講座

この講座はプログラミンで学習する際にデザイン部分に必要なhtml5とCSS3を使ってWEBサイトページを制作するために必要なことを1日で速習するために特化した講座です。実際に手を動かして学習しながら解説しているので、理論や機能を単独で学ぶ講座のように、途中で集中力を切らして飽きることがありません。


この後に続く学習の

  • PHP

  • WordPress

  • Bootstrap

  • Ruby on Rails

これらをデザインするのに必要な基礎学習内容になっています。

本格的にHTML/CSSを学習しなくても、ある程度の流れをつかむことが出来る内容になっています。

今は必要はないという知識は含んでいません。実践を重視した講座です。



▼この講座にむいている人

このHTML/CSS速習を学習しただけでは完全に理解は出来ませんが、

  • これからPHPやWordPress、Ruby on RailsやBootstrapを学習する人

  • 何から学習していいかわからない人

  • HTML/CSSの構造がどうか分からない人

  • 何年も前にやったけど思い出したい人

  • 挫折しかけたけど学習しなおしたい人

  • プログラミングメインの方

  • 何から学習していいかわからない方

  • HTML/CSSを1日で学習したい方

そのような方にむいています。


この講座はHTML/CSSの速習講座になっておりますので、凄く細かい説明は御座いませんが

代わりにプログラミングする上でデザイン部分を1日で学習することができます。



▼この講座にむいてない人

  • 懇切丁寧に全部知りたい人

  • デザインメインの人

はこの講座では物足りないと思います。


▼プログラミングメインで1日でなんとか概要を把握したい人向けの講座です。

ですが、しっかりと必要なことは埋め込まれているので安心です。



↓全て表示↑少なく表示
 
レクチャー内容
  1. HTML/CSS 1日で覚える速習講座
    • はじめに エディタやIDEの準備
    • HTML/CSS講座 座学
    • 見出し段落リンクリストの説明1
    • 見出し段落リンクリストの説明2
    • CSS文字の色大きさクラス
    • 作ってみようヘッダーフッターコンテンツ
    • HTML/CSS演習問題1
    • HTML/CSS演習問題2
  2. ボーナスレクチャー
    • ボーナスレクチャー:記事でも学習する
   

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

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

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

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

いじょうでっす。

コメント

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