[Web開発フルスタックコース] HTML&CSS基礎

Name: [Web開発フルスタックコース] HTML&CSS基礎
Rating: 4.9 (111 reviews)

本講義は、フルスタックWeb開発者養成のための「Web開発フルスタックコース」講義シリーズのHTML&CSSに関する講義です。この講義を通じて、Web開発の骨組みであるHTMLと、Webを美しく彩るCSSについて理解を深めることができます。

（4.9）受講レビュー 111件

受講生 5,389名

難易度入門

受講期間 無制限

realprogrammers

HTML/CSS

学習した受講者のレビュー

4.9

5.0

157350

100% 受講後に作成

html、cssエンドプレート王...大ヒットこれは1つです。

5.0

강부열

100% 受講後に作成

とても素敵な無料講義ありがとうございます。

5.0

T parkkk

33% 受講後に作成

講師様が本当に実務的な蜂蜜チップまで詳しく説明していただきたいと思っていた様子に感動しました！

受講後に得られること

HTML基本タグ
グローバル属性とローカル属性
セマンティックタグ
フォント、リスト、色、表のスタイリング
レイアウトデザイン
レスポンシブウェブ

読みやすいウェブ、速いウェブ実装のための基礎！
HTML & CSSを本格的に学んでみましょう ✨

✅ この講義は[フルスタックWeb開発者ロードマップ]シリーズの講義です。

本講義は、フルスタックWeb開発者養成のための[Web開発フルスタックコース]講義シリーズの中で、HTML&CSSについて扱う基礎講義です。
ウェブ開発フルスタックコースは、HTML&CSS → バニラJavaScript → Bootstrap → Vue.js → データベース → Node.js → ポートフォリオまで、フルスタックウェブ開発のための全過程を含んでいます。
Web開発フルスタックコースをすべて受講すれば、皆さんはWeb開発の基礎だけでなく、実務にすぐ適用できる技術を習得することになります。

HTML/CSSとは何ですか？

HTML5 & CSS3

Webを構成する根幹技術であるHTMLとCSSは、すべてを繋ぐために誕生した言語です。

HTMLはHyper Text Markup Languageの略称です。Hyper、Text、Markup、Languageという4つの単語で構成されています。これらの単語の中で最も重要なのはHyperです。HTMLを理解するための最も重要なヒントをハイパーリンク（Hyperlink）から得ることができるからです。

紙の時代の文字ではなく、ウェブブラウザやワードのような文書作成ツールにおいて、皆さんはハイパーリンクという機能を通じて動画、音楽、写真、ファイル、文章などの特定の場所を繋ぐことができます。ハイパーリンクは、文書内であらゆる形式の資料を連結し、指し示すことができる参照の輪です。初期のウェブに<a>タグのようなハイパーリンクの機能を持つタグがあったということは、実に驚くべきことです。ウェブを構成する根幹技術であるHTMLは、結局のところすべてを繋ぐために誕生したと言えるでしょう。

Hyperは「超越」という意味を持ち、Textは「文字」を意味します。つまりHyper Textは、文字と文字、文章と文章、文書と文書が互いに有機的に連結され、疎通することができる、一般的な文字を超越した文字であるといえます。

HTMLは、このようなHyper Textをマークアップ（Markup）できる言語（Language）です。ここでマークアップとは、文書の内容以外にも文書の書式、構造などを表現するための情報です。HTMLはこのようなマークアップ情報を表現できる言語であり、ウェブの骨組みに該当します。

一方、CSS(Cascading Style Sheets)は、HTMLという骨組みに素敵な服を着せるデザインを担当する言語です。CSSを通じて、ウェブのレイアウト、色、フォント、サイズなどのデザインを適用できるようになります。

HTML&CSS、なぜ学ぶ必要があるのでしょうか？

HTML/CSSを学ばずにはWeb開発者になることはできません。

読みやすいウェブとそうでないウェブについて考えたことはありますか？私たちは毎日、本、テレビ、雑誌、ブログなど、数多くの文章を読みながら生きています。しかし、ある文章は読みやすく、ある文章はなかなか頭に入ってきません。ウェブ開発者が作成したコードも同様です。人の目には見えませんが、検索エンジンやスクリーンリーダーのようなソフトウェアを通じて読み取られます。検索エンジンやスクリーンリーダーは、ウェブページを通じて目に見えないウェブを構成するコードを解析し、私たちが開発したウェブページを解釈します。ソフトウェアが正しく読み取り、理解できるコードを書くためにはどうすればよいでしょうか？そして、それはなぜ重要なのでしょうか？

読みやすい文章を書くコツは、「簡潔明瞭に」書くことです。開発者が作成するコードも同様です。マークアップを作成する際、不要なタグは取り除き、ページを構成するために必要なタグだけで構造をシンプルにしなければなりません。

今日、ウェブは使いやすいだけでなく、速くなければなりません。Googleの研究によると、ウェブページの読み込みに5秒以上かかると、訪問者がページを離脱する可能性が90%増加するといいます。ブラウザのレンダリングプロセスを理解し、ページ内で使用するリソースを最適化することで、読みやすいだけでなく速いウェブを提供しなければなりません。そのため、優れたウェブを開発するには、ウェブを構成する根本的な言語であるHTMLとCSSの基礎をしっかりと築く必要があります。

この講義の特徴！

_{分かりやすく丁寧に}

_{実務応用中心}

_{サンプルコードまで！}

Web開発のライフサイクルを理解できるように教えます。
HTMLとは何かを理解します。
HTMLを構成する各タグの正確な使い方を学ぶことができます。
モバイルユーザーや視覚障害者に配慮したタグの作成方法を習得します。
CSSの基礎構文をすべて習得することになります。
レイアウトを作成するためのCSSを学び、レスポンシブWebを実装できるようになります。
すべてのサンプルコードはGitHubを通じて提供されます。

何を学びますか？

_VSCode

_HTML/CSS

_Node.js

開発IDEツールとしてはVisual Studio Code（ビジュアルスタジオコード）を使用します。Visual Studio Codeを利用した開発方法や、便利な拡張機能について学ぶことができます。
Node.jsをインストールし、Node.jsとは何かを学ぶことができます。
ウェブに対する理解と、ウェブ開発のための企画から開発およびテストまでの全過程を知ることができます。
HTMLの基本タグをすべて学びます。
HTMLタグのグローバル属性とローカル属性について学びます。
セマンティックタグを理解し、意味に合ったタグを使用できるようになります。
CSSを通じて、色、フォント、リスト、表などのスタイリング方法を学ぶことができます。
レイアウトを作成するためのCSSを習得し、レスポンシブウェブを実装できるようになります。

_{HTMLの基本構造および基本要素}

_{レイアウトを作成するためのCSS}

この講義を作った人は
誰でしょうか？

開発者の品格

ソフトウェア技術を通じて世界に良い影響を与えたい24年目のソフトウェア開発者。
知識を分かち合うことが好きで、常に新しい技術を習得することを楽しんでいます。

国内外60社を超えるグローバル企業のERPシステムを構築するコンサルタントおよび開発者として活動し、自ら開発したソフトウェアを国内はもちろん海外の有数企業に販売した経験も持っています。ITスタートアップの代表取締役でもあります。

開発者としてだけでなく、UXコンサルタント、時にはビジネスコンサルタントとして働きながら、アプリケーションやサービス開発における企画から開発までの全過程において数多くの経験を積んできました。現在は20年を超える実務経験をもとに、後輩たちに本当に必要な技術、本当に正しい知識を伝えるという使命感を持ち、知識を共有する活動を行っています。

もっと詳しく見てみましょう。

YouTube「開発者の品格」チャンネルを通じて、200本以上の役立つ講義動画を提供しています。
'バニラJavaScript'、'Vue.jsプロジェクト投入一週間前'、'Node.jsプロジェクト投入一週間前'、'開発者になるために必ず知っておくべきIT用語'、‘デザインシンキングを超えてプログラミングシンキングへ’、'The Essentials of Smart Contract Development for Solidity Developers'、'私はまだ子供たちにコーディングを教えていません'の著者です。
オライリーの'初めてのTypeScript'を翻訳した訳者です。

[Web開発フルスタックコース] シリーズまとめ

こんな方に
おすすめです

学習対象は
誰でしょう？

Web開発者になりたい人
コーディングを初めて始める人
HTMLを学びたい人
CSSを学びたい人

前提知識、
必要でしょうか？

事前知識なしで、誰でも受講できます。

こんにちは
realprogrammersです。

11,250

受講生

267

受講レビュー

152

回答

4.9

講座評価

講座

ソフトウェア技術を通じて世界に良い影響を与えたい、24年目のソフトウェア開発者。
知識を共有することが好きで、常に新しい技術を学ぶことを楽しんでいます。

開発者としてだけでなく、UXコンサルタント、時にはビジネスコンサルタントとして働きながら、アプリケーションやサービス開発における企画から開発までの全工程において数多くの経験を積んできました。現在は20年を超える実務経験をもとに、後輩たちに本当に必要な技術、本当に正しい知識を伝えるという使命感を持ち、知識共有の活動に取り組んでいます。

YouTubeの「開発者の品格」チャンネルを通じて、200本以上の有益な講義動画を提供しています。
'バニラJavaScript'、'Vue.jsプロジェクト投入一週間前'、'Node.jsプロジェクト投入一週間前'、'開発者になるために必ず知っておくべきIT用語'、'デザインシンキングを超えてプログラミングシンキングへ'、'The Essentials of Smart Contract Development for Solidity Developers'、'私はまだ子供たちにコーディングを教えていません'の著者です。
オライリーの『プログラミングTypeScript』を翻訳した訳者です。

(現)株式会社ザ・グレイト代表取締役
(現)株式会社サンシュア CTO
(現)株式会社リターンバリュー CTO
(現)パンインパクトコリア有限会社技術専門委員

メール - seungwon.go@gmail.com

カリキュラム

全体

33件 ∙ (14時間 46分)

講座資料（こうぎしりょう）:

授業資料

セクション 1．HTML

16件 ∙ (6時間 57分)

1. Webの理解とWeb開発ライフサイクル
21:06
2. 開発環境の構成
15:04
3. HTML基本構造と基本要素
55:37
4. グローバル属性とローカル属性
42:19
5. style プロパティ
11:54
6. 意味に合ったタグを使う
33:27
7. リストタグ
10:58
8. テーブルタグ
19:36
9. form要素
59:32
10. input要素の主な属性
21:22
11. その他フォーム要素
24:35
12. フォームタグ
21:44
13. iframe
21:49
14. ビデオとオーディオ
20:24
15. mapタグ
22:50
16. セマンティックタグ
15:20

セクション 2．CSS

17件 ∙ (7時間 48分)

17. CSSとは
15:02
18. CSSセレクタ
01:11:00
19. CSSの適用方法
19:36
20. 色の適用方法
22:50
21. テキストスタイリング
24:55
22. フォントスタイリング
41:14
23. リストスタイリング
12:56
24. リンクとカーソルスタイリング
22:27
25. テーブルスタイリング
08:01
26. CSSボックスモデルと要素のサイズ
26:08
27. Background スタイリング
13:34
28. Border スタイリング
13:56
29. HTML要素の位置の定義
32:09
30. オーバーフロー
13:58
31. レイアウトを作成するためのCSS
51:10
32. レスポンシブウェブ
53:31
33. [特典]ブラウザレンダリングの最適化
26:10

講座掲載日: 2023/04/10

最終更新日: 2023/04/11

受講レビュー

全体

111件

4.9

111件の受講レビュー

157350
受講レビュー 1
∙
平均評価 5.0
2023/04/22
5
100% 受講後に作成
html、cssエンドプレート王...大ヒットこれは1つです。
noenvy118206
受講レビュー 1
∙
平均評価 5.0
2023/06/09
5
33% 受講後に作成
講師様が本当に実務的な蜂蜜チップまで詳しく説明していただきたいと思っていた様子に感動しました！
booyeal7907
受講レビュー 2
∙
平均評価 5.0
2023/06/19
5
100% 受講後に作成
とても素敵な無料講義ありがとうございます。
devkuka
受講レビュー 314
∙
平均評価 5.0
2023/04/15
5
6% 受講後に作成
Web開発の基礎から詳細に教えてくれてたくさん助けてくれました。ありがとうございます！
chldbwls12316785
受講レビュー 9
∙
平均評価 5.0
2024/08/11
5
100% 受講後に作成
久しぶりに復習しながら講義を聞きましたが、もっとよく学びます。良い講義ありがとうございます。

realprogrammersの他の講座

知識共有者の他の講座を見てみましょう！

【ウェブ開発フルスタックコース】ポートフォリオ - 製品販売ミニウェブアプリ開発

realprogrammers

本講義は、フルスタックWeb開発者養成のための「Web開発フルスタックコース」講義シリーズの最終編であるポートフォリオ向けプロジェクト開発に関する講義です。「Web開発フルスタックコース」で学んだすべての内容を総合し、実際のWebアプリケーションを開発しながら学んだ内容を理解し、基本となる機能を直接適用してみることができます。

初級

Portfolio, Web Application

【ウェブ開発フルスタックコース】ポートフォリオ - 製品販売ミニウェブアプリ開発

realprogrammers

[Web開発フルスタックコース] Node.jsプロジェクト投入1週間前 - 基礎から実務まで

realprogrammers

この講義は、フルスタックWeb開発者を育成するための[Web開発フルスタックコース]講義シリーズのバックエンド部分についての講義です。この講義は、講師の著書<Node.jsプロジェクト投入一週間前>の内容に基づいて作られた講義です。

初級

Node.js, MySQL, Express

[Web開発フルスタックコース] Node.jsプロジェクト投入1週間前 - 基礎から実務まで

realprogrammers

[Web開発フルスタックコース] Netflixとニンジン市場の分析を通じて学ぶデータベースの基礎

realprogrammers

このレッスンは、フルスタックWeb開発者を育成するための[Web開発フルスタックコース]レッスンシリーズのデータベースの基礎に関するレッスンです。このレッスンは、Netflixとニンジン市場を分析しながらデータベースの設計を理解するプロセスです。基本的なデータベース設計原理とSQLを学ぶための基礎講義です。

入門

DBMS/RDBMS, MySQL, SQL

[Web開発フルスタックコース] Netflixとニンジン市場の分析を通じて学ぶデータベースの基礎

realprogrammers

【ウェブ開発フルスタックコース】Vue.jsプロジェクト投入1週間前 - 基礎から実務まで

realprogrammers

本講義は、フルスタックウェブ開発者養成のための「ウェブ開発フルスタックコース」講義シリーズのフロントエンド部分についての講義です。この講義は、講師の著書 <Vue.js プロジェクト投入一週間前>の内容に基づいて作られた講義です。

初級

Vue.js

【ウェブ開発フルスタックコース】Vue.jsプロジェクト投入1週間前 - 基礎から実務まで

realprogrammers

[Web開発フルスタックコース]ブートストラップ基礎

realprogrammers

この講義は、フルスタックWeb開発者を育成するための[Web開発フルスタックコース]講義シリーズのブートストラップの基礎についての講義です。ブートストラップの基礎を学び、高品質のレスポンシブウェブをすばやく構築する方法を学びます。

初級

Bootstrap

[Web開発フルスタックコース]ブートストラップ基礎

realprogrammers

【ウェブ開発フルスタックコース】純粋なJavaScriptの基礎から実務まで

realprogrammers

この講義は、フルスタックWeb開発者を育成するための[Web開発フルスタックコース]講義シリーズのうち、JavaScriptに関する講義です。この講義は、知識共有者の著書＆lt;バニラJavaScript＆gt;の内容に基づいて作られた講義です。

初級

JavaScript, vanilla-javascript

【ウェブ開発フルスタックコース】純粋なJavaScriptの基礎から実務まで

realprogrammers

JavaScriptを正しく学びますか？

realprogrammers

JavaScriptを正しく学びたい初心者のための最も堅実な基礎講義です。この講義ではJavaScriptという言語を理解するための出発点となり、フロントエンド（Vue、React、Angular）開発者、サーバー（Node.js）開発者になるための基礎を完璧に準備できます。

初級

JavaScript, ES6, HTML/CSS

JavaScriptを正しく学びますか？

realprogrammers

似ている講座

同じ分野の他の講座を見てみましょう！

[ウェブ開発入門] 一人でも開発するHTMLとCSS with ニンジンマーケット

mjcoding

必須の概念とともにHTML/CSSを自らよく活用するための講義です。

入門

HTML/CSS

[ウェブ開発入門] 一人でも開発するHTMLとCSS with ニンジンマーケット

mjcoding

初心者でも作れるスクロールインタラクション。第1回 JavaScript

ggangcoding162118

特定のサイトを模倣するだけの講義ではなく、知識共有者が共有するスクロールインタラクションのノウハウや、基本的な要素をしっかり学んだ上で、国内企業で広く使用されている UI スクロールインタラクションのさまざまなテクニックやモーションなどを学び、作成します。

初級

HTML/CSS, JavaScript, jQuery

初心者でも作れるスクロールインタラクション。第1回 JavaScript

ggangcoding162118

リベホワイトのCSS3基礎実務 - 2024

rebehayan

CSS 実務20年以上のキャリアをベースにしたCSS基礎講義へようこそ！このレッスンは、Webパブリッシャーとフロントエンド開発者に成長するための第一歩を踏み出すために準備されました。

入門

HTML/CSS, nesting, css3

リベホワイトのCSS3基礎実務 - 2024

rebehayan

コーディングのコーディング基礎とWebフルスタックの開発

jocoding

コーディング1位 YouTubeのジョコーディングの本番圧縮！簡単で楽しいWebフルスタック開発講義

入門

HTML/CSS, JavaScript, Node.js

コーディングのコーディング基礎とWebフルスタックの開発

jocoding

簡単に学び、ポートフォリオにするレスポンシブWeb！ #雪花水

lizb

簡単に作るレスポンシブWebワーキングポートフォリオ！

初級

HTML/CSS, Responsive Web, Clone Coding

簡単に学び、ポートフォリオにするレスポンシブWeb！ #雪花水

lizb

[2024]リベホワイトのHTML基礎実務

rebehayan

HTML基礎文法を扱う講義です。様々な事例のミッションが存在し、実務から利用可能な最新文法までお知らせします。

入門

HTML/CSS, nvda

[2024]リベホワイトのHTML基礎実務

rebehayan

1. ウェブ開発基礎 [HTML, CSS]

vmproductor0202

こんにちは、Webページの枠組みを作成するHTMLとWebページを飾るCSS講義を用意しました。ウェブ開発に先立ち、最も基礎に該当し、初心者の方々も簡単に学べるように準備しました。

入門

HTML/CSS, Java, spring-framework

1. ウェブ開発基礎 [HTML, CSS]

vmproductor0202

ウェブデザイン開発技能士 [2025年] 実技全体 (カカオトーク質問可能)

dunopi

全国合格率60%のうち、うちのクラスの合格率は90%！試験の要求事項を把握すれば可能です。実技書は買わないで。難しいです。

初級

HTML/CSS, jQuery

ウェブデザイン開発技能士 [2025年] 実技全体 (カカオトーク質問可能)

dunopi

2024 html/css 基礎タンタン超スピード頑強コース

jyoung

html/css初心者入門者を対象に基礎をしっかり固め、もちろんレスポンシブレイアウト作成の実践を学ぶことができます。

入門

HTML/CSS, Flex, css3

2024 html/css 基礎タンタン超スピード頑強コース

jyoung

フルスタックのための堅実なフロントエンドブートキャンプ (HTML, CSS, バニラJavaScript + ES6) [フルスタック Part2]

funcoding

実務で実際にWebサービスを開発した経験をもとに、入門者が実際に商用化も可能なレベルのWebとアプリサービスを開発することを目標とするフルスタックシリーズ講座です。そのためのPart2講座として、多様な技術が存在するフロントエンド技術の中で、レスポンシブ、互換性まで考慮した最新のHTML5、CSS3、バニラJavaScript + ES6をすべてしっかりと整理する講座です。

入門

HTML/CSS, JavaScript, ES6

フルスタックのための堅実なフロントエンドブートキャンプ (HTML, CSS, バニラJavaScript + ES6) [フルスタック Part2]

funcoding

「1万時間の法則」ウェブページ制作する

jejucoding

済州コーディングベースキャンプの無料講義が帰ってきました！！一緒に「1万時間の法則」サービスを作って、Githubへのデプロイまでやってみましょう！！ :) 何も分からないですって？大丈夫です。この講義にすべて準備されています！

入門

HTML/CSS, JavaScript, VSCode

「1万時間の法則」ウェブページ制作する

jejucoding

Webデザイン機能士実技B-3タイプhtml+css

dunopi

認定試験でなくても練習するのに良い例です。 Webデザイン機能会社実技B-3タイプを千天～～ヒットしてみてください

初級

HTML/CSS

Webデザイン機能士実技B-3タイプhtml+css

dunopi

Webゲームを作って学ぶインタラクティブWeb！ JAVASCRIPT

ggangcoding162118

Webゲームも作って、フロントエンドWeb開発スキルも学ぶ1席3組授業！

初級

Interactive Web, JavaScript, HTML/CSS

Webゲームを作って学ぶインタラクティブWeb！ JAVASCRIPT

ggangcoding162118

模倣しながら学ぶ Web アプリケーションの作成

Egoing Lee

このコースでは、Web 開発の大きな流れを習得するために、Web サイトを完成させるための全体的な Web 技術を学びます。

入門

HTML/CSS, PHP

模倣しながら学ぶ Web アプリケーションの作成

Egoing Lee

実務中心のHTML5可視化プログラミング

antfellow77251

データを加工して表の形で表現することもできますが、最も重要なのは、データを人間が一目で分かるように表現することです。

初級

HTML/CSS

実務中心のHTML5可視化プログラミング

antfellow77251

【2026年出題基準】ウェブデザイン技能検定実技試験完全ガイド

codingworks

ウェブデザイン開発技能士（旧ウェブデザイン技能士）出題基準（2025.1.1 ～ 2027.12.31）まで施行される出題基準に正確に合わせたウェブデザイン技能士実技試験の内容に最適化されている実技試験専門講義として、HTML+CSS+JQUERYパブリッシング、コーディングワークスのウェブデザイン開発技能士実技試験講義は一味違います。 2026年ウェブデザイン開発技能士のすべての試験タイプ（A, B, C, D, E, Fタイプ）を完璧に制作した授業動画がすべて反映されています。

入門

HTML/CSS, jQuery, Web Design

【2026年出題基準】ウェブデザイン技能検定実技試験完全ガイド

codingworks

パブリッシャー就職ガチ実践ガイド(PDF)

codingworks

パブリッシャー就職のための真のガイド電子書籍（PDF）で、効率的なパブリッシング学習方法、質の高いパブリッシング講義や教え方の手際が良い講師を見極める眼、新人でありながら経験者のようにパブリッシングするコツ、望ましいコーディング習慣と原則、個人ポートフォリオサイトの制作方法、デザイナーや開発者との協業のコツ、パブリッシャーとして知っておくべき必須サイト、フォトショップUIデザインの実力向上など、パブリッシャー就職のために必ず知っておくべきHTML+CSS+JQUERYパブリッシングの基礎を詳細にお伝えします。また、国費支援パブリッシャー課程についても詳しく説明します。

入門

HTML/CSS

パブリッシャー就職ガチ実践ガイド(PDF)

codingworks

Figma デザインからパブリッシングまで

Michael Kwon

デザイナーと開発者のためのオールインワン講座！新しいUI3を反映

初級

HTML/CSS, Figma

Figma デザインからパブリッシングまで

Michael Kwon

ウェブデザイン機能士資格証明に備え（2023年出題基準反映バージョン）

webstoryboy

ウェブデザイン機能社出題基準 2023年バージョンに合わせて誰でも合格できるように製作しました。 5種類を学び、素早く合格しましょう！

初級

HTML/CSS, jQuery, JavaScript

ウェブデザイン機能士資格証明に備え（2023年出題基準反映バージョン）

webstoryboy

JavaScriptを正しく学びますか？

realprogrammers

初級

JavaScript, ES6, HTML/CSS

JavaScriptを正しく学びますか？

realprogrammers

[Web開発フルスタックコース] HTML&CSS基礎

学習した受講者のレビュー

4.9

受講後に得られること

HTML/CSSとは何ですか？

HTML&CSS、なぜ学ぶ必要があるのでしょうか？

この講義の特徴！

何を学びますか？

この講義を作った人は誰でしょうか？

開発者の品格

もっと詳しく見てみましょう。

[Web開発フルスタックコース] シリーズまとめ

こんな方に おすすめです

こんにちは realprogrammersです。

カリキュラム

受講レビュー

realprogrammersの他の講座

似ている講座

この講義を作った人は
誰でしょうか？

こんな方に
おすすめです

こんにちは
realprogrammersです。