レスポンシブレイアウト

2020-08-31

上位に移動

概要

可変レイアウト等に関する格安教材(LinkedIn Premium、 ドットインストール PREMIUM、英語YouTube)を紹介します。

可変レイアウトのサンプルコード(Brad Traversy氏)は次です。

viewportの指定

提供元 教材名備考
LinkedIn PremiumHTML: 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)」などの動画の一部で解説されていたりするが検索は難しい。
YouTube以外の教材
【レスポンシブWebデザインの基礎】何気なく使っているviewportをちゃんと理解しよう【ヤフー出身エンジニアのHTML・CSSコーディング講座】

可変レイアウト(Fluid widths)

ブラウザ又はViewportの幅に基づいて変化するレイアウトを作成する。

提供元 教材名備考
LinkedIn PremiumCSS レイアウト講座の中で解説 動画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回
UdemyWebレイアウトをもっと自由に! Flexbox基礎講座動画157分、2017-01
Build Responsive Real World Websites with CSS3 v2.0動画777分、2020-07
その他“responsive”、Topic: “Responsive Design”、言語:English、有料、★4.5以上で19個検索された。
YouTube以外の教材
Build An HTML5 Website With A Responsive Layout

メディアクエリ

画面の幅、解像度など、メディアの特性に基づいて、ページに適用されるスタイルを振り分ける。

提供元 教材名備考
LinkedIn PremiumCSS レイアウト講座メディアクエリーの使い方 動画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)」などの動画の一部で解説されていたりするが検索は難しい。
YouTube以外の教材
Responsive Landing Page Using HTML & CSS (A Little jQuery)

pxよりrem

提供元 教材名備考
LinkedIn Premium 各種コース内の以下
ルート要素を基準としたフォントサイズ
文字サイズの定義
相対単位について
動画9.5分、
2014-08-06
CSS Essential TrainingThe font-size property動画4.4分、2019-10-01
Responsive Typography TechniquesSizing your type: Pixels, ems, and rems動画10.5分、2014-01-31
ドットインストール PREMIUM n/a
UdemyBuild Responsive Real World Websites with HTML5 and CSS3のような教材で説明されていると思われるこの動画は734分、2020-03
YouTube以外の教材

モバイルファースト

提供元 教材名備考
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参照
UdemyWeb Design Responsive Website Template from Scratch HTML CSS動画70分、2019-11
YouTube以外の教材
Build a Responsive, Mobile First Website – HTML5 & CSS3

関連書籍

上位に移動

Posted by pitang1965