-
- 1. 講座内容について
- 2. レスポンシブデザインとは？モバイルファーストとの違いも解説
- 3. レスポンシブコーディングに使う、ビューポートとメディアクエリ
- 4. レスポンシブデザインに役立つCSS Flexboxレイアウト基礎
- 5. 【実践編】デザインとコーディング要件
- 6. Illustratorのデザインデータから、必要な画像を書き出す
- 7. レスポンシブデザインのコーディングを始めよう
- 8. レスポンシブコーディング向け、CSSファイルのベースを作ろう
- 9. ヘッダーとフッターのコーディング
- 10. ファーストビューのレスポンシブコーディング
- 11. イベント紹介セクションのレスポンシブコーディング
- 12. 紹介・お知らせセクションのレスポンシブコーディング
- 13. 最終確認と細かい部分の調整
- 14. 講座終了課題
- 15. 【Advance】CSS変数（カスタムプロパティ）について知ろう
- 16. 【Advance】CSS変数の活用例
- 17. 【Advance】ダークモード対応のためのCSS
- 18. 【Advance】Zooloppaをダークモード対応にしてみる
講座内容について
講座内容について
本講座はレスポンシブデザイン、レスポンシブコーディングについて学んでいただきます。
講座内の説明では、HTML,CSSの基礎知識があることを前提としています。
レスポンシブなページが出来ているか確認するために、ブラウザの検証ツールを使って表示領域を変更していきます。
タグ？検証ツール？という方は、先に下記２講座をご受講下さい。
- HTMLの書き方入門 https://skillhub.jp/tutorials/236
- CSSの書き方入門 https://skillhub.jp/tutorials/237
最終目標
レスポンシブWebデザインで、ズーロッパ東京という架空の動物園のWebページを作成します。
無料ビデオ講座のお知らせ
Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。
