HTML及びCSS

2020-08-29

上位に移動

概要

Web開発で最初に学ぶべきものは、HTMLとCSSです。

これらの格安教材(LinkdIn PremiumとドットインストールPREMIUM、YouTube、Udemy)を紹介します。

HTMLセマンティック要素

<article><aside><details>などおよそ100ある。詳細はMDN参照。

提供元 教材名備考
LinkedIn PremiumHTML5 基本講座の中で解説動画345分の一部、2015-05-01
HTML: Structured Semantic Data動画94分、2020-07-01
Crafting Meaningful HTML動画82分、2020-01-16
その他言語:EN、”html semantic”で6コース検索された。
ドットインストールPREMIUM 詳解HTML 基礎文法編 の中で解説 動画30本の一部
UdemyHTML For SEO and Web Crawlers動画276分、2020-03
その他“html semantic”、言語:English、有料、★4.5以上で977個検索された。
YouTube以外の教材
理屈っぽい HTML5入門
HTML Crash Course For Absolute Beginners

CSSの基本(色、フォント、配置方法、ボックスモデル等)

提供元 教材名備考
LinkedIn PremiumCSS 基本講座動画257分、2019-04-26
CSS Essential Trainingの中で説明動画268分、2019-10-01
その他言語:EN、”CSS”で174コース検索された。
ドットインストール (無料)はじめてのCSS動画15本
ドットインストール PREMIUM詳解CSS 基礎文法編動画33本
詳解CSS セレクター編動画12本
詳解CSS アニメーション編動画20本
Udemyその他“CSS”、言語:English、有料、★4.5以上で700個検索された。
YouTube以外の教材
理屈っぽい CSS3入門
CSS Crash Course For Absolute Beginners

Flexbox

提供元 教材名備考
LinkedIn PremiumFlexbox 入門動画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編動画16本
UdemyWebレイアウトをもっと自由に! Flexbox基礎講座動画157分、2017-01
CSS Bootcamp – Master CSS (Including CSS Grid / Flexbox)動画690分、2019-10
その他“flexbox”、言語:English、有料、★4.5以上で61個検索された。
LaracastsLearn Flexbox Through Examples動画8本
Wes BosWhat The Flexbox?動画20本
flexboxfroggy.comFLEXBOX FROGGYゲーム
勉強の成果を試す
YouTube以外の教材
Flexbox CSS In 20 Minutes
CSS FlexBox Essentials

CSSグリッド

提供元 教材名備考
LinkedIn PremiumCSS レイアウト講座の中で解説動画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 グリッドレイアウト編動画16本
UdemyCSS 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個検索された。
YouTube以外の教材
CSS Grid Layout Crash Course

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本
UdemyCSS – The Complete Guide 2020 (incl. Flexbox, Grid & Sass)動画1,366分、2020-07
その他“css variables”、言語:English、有料、★4.5以上で15個検索された。
YouTube以外の教材

CSSトランジション

提供元教材名備考
LinkedIn PremiumCSS: Transforms and Transitions動画86分、2018-05-15
その他言語:EN、”css transitions”で9コース検索された。
ドットインストール PREMIUM詳解CSS アニメーション編動画20本、2020-08
UdemyLevel 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個検索された。
YouTube以外の教材

ブラウザ開発者ツール

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分
UdemyPowerful Chrome DevTools Essential for Web Developers無料動画80分
YouTube以外の教材

上位に移動

Posted by pitang1965