HTML及びCSS
概要
Web開発で最初に学ぶべきものは、HTMLとCSSです。
これらの格安教材（LinkdIn PremiumとドットインストールPREMIUM、YouTube、Udemy）を紹介します。
HTMLセマンティック要素
<article><aside><details>などおよそ100ある。詳細はMDN参照。
| 提供元 | 教材名 | 備考 |
| LinkedIn Premium | HTML5 基本講座の中で解説 | 動画345分の一部、2015-05-01 |
| HTML: Structured Semantic Data | 動画94分、2020-07-01 | |
| Crafting Meaningful HTML | 動画82分、2020-01-16 | |
| その他 | 言語:EN、”html semantic”で6コース検索された。 | |
| ドットインストール 無料 | はじめてのWeb制作 | 動画11本 |
| ドットインストールPREMIUM | 詳解HTML 基本タグ編の中で解説 | 動画27本の一部 |
| Udemy | HTML For SEO and Web Crawlers | 動画276分、2020-03 |
| その他 | “html semantic”、言語:English、有料、★4.5以上で977個検索された。 |
CSSの基本（色、フォント、配置方法、ボックスモデル等）
- セレクタについては、CSS Selectors: A Visual Guide がおすすめ。
| 提供元 | 教材名 | 備考 |
| LinkedIn Premium | CSS 基本講座 | 動画257分、2019-04-26 |
| CSS Essential Trainingの中で説明 | 動画268分、2019-10-01 | |
| その他 | 言語:EN、”CSS”で174コース検索された。 | |
| ドットインストール （無料） | はじめてのCSS | 動画15本 |
| ドットインストール PREMIUM | 詳解CSS 基本スタイリング編 | 動画27本 |
| 詳解CSS 応用スタイリング編 | 動画27本 | |
| 詳解CSS セレクター編 | 動画21本 | |
| 詳解CSS アニメーション編 | 動画20本 | |
| 詳解CSS メディアクエリー編 | 動画14本、2022-12-01 | |
| CSS入門 入れ子編 | 動画8本、2024-12-11 | |
| Udemy | その他 | “CSS”、言語:English、有料、★4.5以上で700個検索された。 |
Flexbox
| 提供元 | 教材名 | 備考 |
| LinkedIn Premium | Flexbox 入門 | 動画75分、2017-08-09 |
| CSS Essential Trainingの中で説明 | 動画268分、2019-10-01 | |
| CSS Layouts: From Float to Flexbox and Gridの中で説明 | 動画106分、2019-04-10 | |
| その他 | 言語:EN、”flexbox”で16コース検索された。 | |
| ドットインストール PREMIUM | 詳解CSS Flexbox編 | 動画22本、2022-11-15 |
| Udemy | Webレイアウトをもっと自由に！ Flexbox基礎講座 | 動画157分、2017-01 |
| CSS Bootcamp – Master CSS (Including CSS Grid / Flexbox) | 動画690分、2019-10 | |
| その他 | “flexbox”、言語:English、有料、★4.5以上で61個検索された。 | |
| Laracasts | Learn Flexbox Through Examples | 動画8本 |
| Wes Bos | What The Flexbox? | 動画20本 |
| flexboxfroggy.com | FLEXBOX FROGGY | ゲーム 勉強の成果を試す |
CSSグリッド
| 提供元 | 教材名 | 備考 |
| LinkedIn Premium | CSS レイアウト講座の中で解説 | 動画92分の一部 |
| CSS Essential Trainingの中で説明 | 動画268分、2019-10-01 | |
| CSS Layouts: From Float to Flexbox and Gridの中で説明 | 動画106分、2019-04-10 | |
| その他 | 言語:EN、”css grid”で19コース検索された。 | |
| ドットインストール PREMIUM | CSS入門 グリッドレイアウト編 | 動画19本、2025-04-19 |
| Udemy | CSS Bootcamp – Master CSS (Including CSS Grid / Flexbox) | 動画690分、2019-10 |
| Practical CSS Grid: Learn Grid Layout in under 2 hours! | 動画109分、2019-08 | |
| その他 | “grid”、トピック:”CSS Grid”、言語:English、有料、★4.5以上で7個検索された。 |
カスタムプロパティ（CSS変数）
これについてはMDNで説明されている。
| 提供元 | 教材名 | 備考 |
| LinkedIn Premium | コース: ウィークリー Web デザインシリーズの中の CSSの中で変数を使ってみよう！ CSSの中で変数を使った計算をやってみよう！ | 2018-02-21 |
| CSS: Variables and Fluid Layouts | 動画122分、2019-10-10 | |
| Bootstrap 4 Essential Trainingの中のCSS variables | 動画6分26秒、2020-08-10 | |
| その他 | 言語:EN、”css custom properties”で63コース、418動画検索された。 | |
| ドットインストール PREMIUM | 詳解CSS 変数編 | 動画7本 |
| Udemy | CSS – The Complete Guide 2020 (incl. Flexbox, Grid & Sass) | 動画1,366分、2020-07 |
| その他 | “css variables”、言語:English、有料、★4.5以上で15個検索された。 |
CSSトランジション
| 提供元 | 教材名 | 備考 |
| LinkedIn Premium | CSS: Transforms and Transitions | 動画86分、2018-05-15 |
| その他 | 言語:EN、”css transitions”で9コース検索された。 | |
| ドットインストール PREMIUM | 詳解CSS アニメーション編 | 動画19本、2022-12-27 |
| Udemy | Level Up Your CSS Animation Skills | 動画、222分、2019-04 |
| Creative CSS Animations, Transitions And Transforms Course | 動画433分、2020-08 | |
| その他 | css、トピック:”CSS Animations”、English、有料、★4.5以上で8個検索された。 |
ブラウザ開発者ツール
Google Chrome
| 提供元 | 教材名 | 備考 |
| LinkedIn Premium | Learning Chrome Web Developer Tools | 動画144分、2020-04-14 |
| その他 | 言語:EN、”Chrome Developer Tools”、Subjects & Topics: Web Developmentで81コース検索された。 | |
| ドットインストール（無料） | Chrome Developer Tools入門 | 動画25.6分 |
| Udemy | Powerful Chrome DevTools Essential for Web Developers | 無料動画80分 |