レスポンシブレイアウト

2019-09-01

上位に移動

概要

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

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

調査年月:2019-09

viewportの指定

提供元 教材名備考
LinkedIn Premium n/a
ドットインストール PREMIUM 詳解CSS レスポンシブウェブデザイン編#02 viewportの設定をしよう動画2.5分
実践!スマートフォンサイトを作ろう#02 Viewportの設定をしよう 動画1.7分

可変レイアウト(Fluid widths)

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

提供元 教材名備考
LinkedIn Premium CSS レイアウト講座の中で解説 動画155分の一部
ドットインストール PREMIUM 実践!スマートフォンサイトを作ろう動画22回
Build An HTML5 Website With A Responsive Layout

メディアクエリ

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

提供元 教材名備考
LinkedIn Premium CSS レイアウト講座メディアクエリーの使い方 動画9.7分
ドットインストール PREMIUM 詳解CSS レスポンシブウェブデザイン編03 メディアクエリーを使ってみよう動画1.6分
実践!スマートフォンサイトを作ろうの中の#18 メディアクエリーを使ってみよう動画2.6分
Responsive Landing Page Using HTML & CSS (A Little jQuery)

pxよりrem

提供元 教材名備考
LinkedIn Premium 各種コース内の以下
ルート要素を基準としたフォントサイズ
文字サイズの定義
相対単位について
動画9.5分
ドットインストール PREMIUM n/a動画*.*分

モバイルファースト

提供元 教材名備考
LinkedIn Premium SEOの基礎の中で解説動画136分の一部
ドットインストール PREMIUM 詳解CSS レスポンシブウェブデザイン編05 モバイルファーストで開発しよう動画2.2分
Build a Responsive, Mobile First Website – HTML5 & CSS3

上位に移動

Posted by pitang1965