レスポンシブレイアウト
概要
可変レイアウト等に関する格安教材(LinkedIn Premium、 ドットインストール PREMIUM、英語YouTube）を紹介します。
可変レイアウトのサンプルコード（Brad Traversy氏）は次です。
viewportの指定
| 提供元 | 教材名 | 備考 |
| LinkedIn Premium | HTML: Metadata in the Head内で説明 | 動画85分の一部、2020-06-11 |
| CSS: Advanced Layouts with Grid内で説明 | 動画201分の一部、2019-04-01 | |
| Responsive Layout 内で解説 | 動画152分の一部、2018-10-24 | |
| その他 | 言語:EN、”viewport html”で8つの動画が検索された。 | |
| ドットインストール PREMIUM | 詳解CSS レスポンシブウェブデザイン編の#02 viewportの設定をしよう | 動画2.5分 |
| 実践！スマートフォンサイトを作ろうの#02 Viewportの設定をしよう | 動画1.7分 | |
| 詳解CSS レスポンシブウェブデザイン編 | 動画8本のシリーズの#02参照 | |
| Udemy | — | 次の「可変レイアウト(Fluid widths)」などの動画の一部で解説されていたりするが検索は難しい。 |
可変レイアウト(Fluid widths)
ブラウザ又はViewportの幅に基づいて変化するレイアウトを作成する。
| 提供元 | 教材名 | 備考 |
| LinkedIn Premium | CSS レイアウト講座の中で解説 | 動画155分の一部 |
| CSS: Variables and Fluid Layouts | 動画122分、2019-10-10 | |
| CSS Essential Training内で説明 | 動画268分の一部、2019-10-01 | |
| その他 | 言語EN、”Fluid layout”、Subject & TopicをWeb関連のものに限り、7コース検索された。 | |
| ドットインストール PREMIUM | 実践！スマートフォンサイトを作ろう等 | 動画22回 |
| Udemy | Webレイアウトをもっと自由に！ Flexbox基礎講座 | 動画157分、2017-01 |
| Build Responsive Real World Websites with CSS3 v2.0 | 動画777分、2020-07 | |
| その他 | “responsive”、Topic: “Responsive Design”、言語:English、有料、★4.5以上で19個検索された。 |
メディアクエリ
画面の幅、解像度など、メディアの特性に基づいて、ページに適用されるスタイルを振り分ける。
| 提供元 | 教材名 | 備考 |
| LinkedIn Premium | CSS レイアウト講座 のメディアクエリーの使い方 | 動画9.7分、2015-04-13 |
| Advanced CSS Media Queries | 動画65分、2020-08-17 | |
| その他 | 言語:ENで”media queries”で16コース検索された。 | |
| ドットインストール PREMIUM | 詳解CSS レスポンシブウェブデザイン編 | 動画8本のシリーズの#03参照 |
| 実践！スマートフォンサイトを作ろうの中の#18 メディアクエリーを使ってみよう | 動画2.6分 | |
| Udemy | — | “media queries”、言語:English、有料、★4.5以上で51個検索された。 「可変レイアウト(Fluid widths)」などの動画の一部で解説されていたりするが検索は難しい。 |
pxよりrem
| 提供元 | 教材名 | 備考 |
| LinkedIn Premium | 各種コース内の以下 ルート要素を基準としたフォントサイズ 文字サイズの定義 相対単位について | 動画9.5分、 2014-08-06 |
| CSS Essential TrainingのThe font-size property | 動画4.4分、2019-10-01 | |
| Responsive Typography TechniquesのSizing your type: Pixels, ems, and rems | 動画10.5分、2014-01-31 | |
| ドットインストール PREMIUM | n/a | |
| Udemy | Build Responsive Real World Websites with HTML5 and CSS3のような教材で説明されていると思われる | この動画は734分、2020-03 |
モバイルファースト
| 提供元 | 教材名 | 備考 |
| LinkedIn Premium | SEOの基礎の中で解説 | 動画136分の一部、2017-07-12 |
| Introduction to CSSの一部（What is mobile-first）で解説 | 2017-06-09 | |
| Responsive CSS Workflow with Sass, Bourbon, and Susyの一部（Creating a mobile-first layoutなど）で解説 | 2017-04-25 | |
| ドットインストール PREMIUM | 詳解CSS レスポンシブウェブデザイン編 | 動画8本のシリーズの#05参照 |
| Udemy | Web Design Responsive Website Template from Scratch HTML CSS | 動画70分、2019-11 |