レスポンシブ デザインのあらゆる側面について説明するコースです。誰にとっても魅力的なサイトを作成する方法をご紹介します。
このコースでは、最新のレスポンシブ ウェブ デザインのさまざまな側面について説明します。最初のモジュールでは、レスポンシブ デザインの経緯と、レスポンシブ レイアウトの基本について説明します。 さらに、レスポンシブ画像、タイポグラフィ、ユーザー補助などについて学びます。
また、ユーザーの好みやデバイスの機能に合わせてウェブサイトをレスポンシブにする方法も学びます。このコースを修了すると、レスポンシブ デザインの将来像も把握できます。
各モジュールにはデモと自己診断テストが含まれており、理解度を確認できます。
このコースは、初級から中級のデザイナーとデベロッパーを対象としています。 HTML と CSS に関する基本的な知識があれば十分です。JavaScript の知識は必要ありません。 ウェブサイトの作成が初めての場合は、HTML の概要と、CSS の学習に役立つ別のコースがあります。
次の内容を学習します。
はじめに
レスポンシブ デザインの根拠をご紹介します。
メディアクエリ
CSS メディアクエリを使用して、さまざまな画面サイズにデザインを適応させることができます。
他言語化
さまざまな言語や記述モードに合わせてデザインを準備します。
マクロのレイアウト
さまざまな CSS 手法を使用してページ レイアウトをデザインします。
マイクロ レイアウト
どこにでも配置できる柔軟なコンポーネントを構築します。
タイポグラフィ
テキストがどこに表示されても、読みやすく、見栄えが良いようにします。
レスポンシブ画像
訪問者のデバイスや画面に最適な画像を提供できます。
画像要素
画像をよりクリエイティブに管理できます。
アイコン
スケーラブルでレスポンシブなアイコン画像に SVG を使用する。
テーマ設定
ダークモードなど、ユーザーの好みに合わせてデザインを調整します。
ユーザー補助
誰もがウェブサイトにアクセスできるようにしましょう。
操作
マウス、キーボード、タップなどのさまざまな入力メカニズムに対応するページを用意します。
ユーザー インターフェース パターン
さまざまな画面サイズに適応する一般的な UI 要素をいくつか検討します。
メディア機能
メディア機能でデバイスや好みに対応するためのあらゆる方法のまとめ。
画面構成
複数の画面を持つデバイス向けにコンテンツを準備します。
まとめと次のステップ
次のステップに進むのに役立つその他のリソース。
レスポンシブ デザインについて学びましょう。