何気なく使っているviewportをちゃんと理解しよう

【レスポンシブWebデザインの基礎】何気なく使っているviewportをちゃんと理解しよう【ヤフー出身エンジニアのHTML・CSSコーディング講座】

レスポンシブWebデザインの基礎講座です。何気なくmetaタグのviewportを設定している方も多いかと思いますが、実は私もその1人でした。レスポンシブ対応の講座制作にあたって勉強したので、一緒に「何気なく」から「しっかり理解」にステップアップしましょう✨

📙 もくじ
0:00 イントロダクション
1:43 結論: viewport の設定
2:40 Chrome DevTools の機能紹介
4:25 viewport とは
6:03 viewport と画面サイズの関係
7:43 viewport とメディアクエリの関係
12:00 viewport の height について
12:28 viewport の initial-scale について
14:36 viewport の maximum-scale について
15:29 viewport の minimum-scale について
16:49 viewport の user-scalable について
17:58 ズーム機能とアクセシビリティ
19:36 まとめ

メディアクエリの「メディアタイプ」を理解しよう

【レスポンシブWebデザインの基礎】メディアクエリの「メディアタイプ」を理解しよう【ヤフー出身エンジニアのHTML・CSSコーディング講座】

メディアクエリは簡単そうで実は奥深いものです。レスポンシブデザイン対応のときにCSSで「@media」と書く部分ですね。今回はメディアクエリの中でもメディアタイプについて深く見ていきます。

📙 もくじ
0:00 イントロダクション
0:40 メディアクエリとは
2:19 index.html の説明
3:23 リファレンスの紹介
4:18 メディアタイプとは
7:09 メディアタイプ: print の説明
9:05 メディアタイプは書く必要なし

メディアクエリの「メディアタイプ」を理解しよう

【レスポンシブWebデザインの基礎】メディアクエリの「メディアタイプ」を理解しよう【ヤフー出身エンジニアのHTML・CSSコーディング講座】

レスポンシブWebデザイン講座「メディアクエリ」の後編です。メディア特性と論理演算子について語っています。またレスポンシブ対応ではモバイルファーストとデスクトップファーストがありますが、その是非についても語っています！

📙 もくじ
0:00 メディア特性とは
2:00 メディア特性 orientation を使ってみる
3:38 離散型と範囲型について説明
4:45 min-width と max-width の解説
7:32 モバイルファーストの利点について
8:47 min-width と max-width の覚え方
9:55 将来的な width の記述方法について
12:52 論理演算子について
17:15 まとめ