WEBデザイン講座 Level2《ステップアップ》コース※FlexboxとメディアクエリでレスポンシブWEBサイトを作る

HTML5 と CSS3 のコーディング法を学びながら、4ページで構成される「ポートフォリオサイト」の完成を目指します。本講座を受講して Flexbox とメディアクエリを使用したレスポンシブ対応のWEBサイト制作をマスターしよう！

Ratings 4.59 / 5.00

WEBデザイン講座 Level2《ステップアップ》コース※FlexboxとメディアクエリでレスポンシブWEBサイトを作る

What You Will Learn!

ベーシックな構成の「ポートフォリオ」サイトを完成させます。
無料のメールフォームサービスをHTML埋め込みで実装します。
※作成するWEBサイトは、TOPページ、ABOUTページ、CONTACTページ(問合せフォーム)、ポートフォリオ詳細ページの4ページで構成されています。
よく使われる「HTML5の要素」を学習します。
よく使われる「CSS3のプロパティ」を学習します。
レスポンシブWEBデザインのコーディング法を学習します。
flexboxの基本を学習します。
メディアクエリの基本を学習します。

Description

▼ご注意ください

storeGが公開している講座は、講師によるナレーションではなく、全てプロのナレーターによるナレーションを採用しています。
そのため、ナレーションにこだわりがある方は、ひとまず無料視聴動画をご確認いただき、受講をご検討いただければ幸いです。

新着情報
- [NEW] 【確認テスト】コースの理解度をチェックしよう を追加しました。
  ※全部で11問です。全問正解を目指してがんばってください！
- 特典レクチャーの「WEBデザイナーの仕事は将来、AIに奪われるのか？」で
  - 9.最新のテスト結果 (GPT-4V) 2023/10/10 を追加しました。
    ※ChatGPTのコーディングレベルがかなりアップしています！
    【追加】WEBデザイナーの仕事は将来、AIに奪われるのか？【7】【8】※2023年7月上旬版
- 特典動画を追加しました！
  ※シリーズWEBデザイン講座共通の特典動画となります。
  WEBデザイナーの仕事は将来、AIに奪われるのか？について、気になっている方も多いのではないかと思います。そのような疑問に対する答えとなるような動画を作成しましたので、是非、ご視聴ください！
- 特典セクション※エディタのインストール方法などのセクションに、
  【Brackets】ライブプレビューがエラーになる場合についてのテキストレクチャーを追加しました。
- Udemyのシステムにより自動で生成された字幕が表示されるようになりました。
  ※字幕内容は自動生成のため、正しい日本語に置き換わっていない部分があります。予めご了承ください。
- エディタソフトの Brackets が復活！
  ※詳細については、ご使用中のエディタについて のレクチャーをご確認ください。
- 本講座のサポートについてのレクチャーを追加しました。
- Flexboxを楽しく学べるサービス「FLEXBOX FROGGY」の紹介を追加しました。
- 特典セクションに以下のレクチャーを追加しました。
  - Visual Studio Code のインストール
  - テーマの変更
  - ファイルの保存と設定
  - リアルタイムプレビュー
- 問合せフォームで使用しているformrun（フォームラン）の画面が一部変更されたので、動画を修正・更新しました。
  - 14.問合せフォームの作成
  - 15.メールフォームの編集
- 特典セクション※Flexboxの基本を追加しました。
  1. Flexboxとは
  2. Flexboxの基本
    - lesson1
      3つの画像を横並びで表示させる
    - lesson2
      6つの画像のうち、上の3つの画像のみ横並びで表示させる
  3. flex-direction
    - lesson3
      flex-directionプロパティ
  4. flex-wrap 横並び表示「row」
    - lesson4
      flex-wrap 横並び表示「row」
      - wrap
      - wrap-reverse
  5. flex-wrap 縦並び表示「column」
    - lesson5
      flex-wrap 縦並び表示「column」
      - wrap
      - wrap-reverse
      user agent stylesheetのリセット
  6. flex-flow
    - lesson6
      flex-flowプロパティ
      ショートハンドプロパティとは
      値を省略した場合の注意点
  7. flex-basis
    - lesson7
      flex-basisプロパティ
      widthやheightとの違い
  8. flex-grow
    - lesson8
      flex-growプロパティ
      - 複数のFlexアイテムに同じ値を指定する
      - 各Flexアイテムに違う値を指定する
      - 3つのFlexアイテムの幅を1：2：3に設定する
  9. flex-shrink
    - lesson9
      flex-shrinkプロパティ
  10. flex
    - lesson10
      flexプロパティ
      - flexプロパティの値を省略した場合
      - 単位がない数値を1つ指定した場合
      - 単位がつく幅や高さを1つ指定した場合
      - 単位がない数値を1つと単位がつく幅または高さを1つ指定した場合
      - 単位がない数値を2つ指定した場合
  11. justify-content
    - lesson11
      justify-contentプロパティ
      - flex-start
      - flex-end
      - center
      - space-between
      - space-around
      - space-evenly
  12. align-items
    - lesson12
      align-itemsプロパティ
      - stretch
      - flex-start
      - flex-end
      - center
      - baseline
  13. align-self
    - lesson13
      align-selfプロパティ
  14. align-content
    - lesson14
      align-contentプロパティ
      - flex-start
      - flex-end
      - center
      - space-between
      - space-around
      - space-evenly
本講座の特徴

複数のWEBページからなる「WEBサイト」を作成する
制作するのはポートフォリオサイトですが、ベーシックな構成なので、画像やテキストを変更すれば、その他のWEBデザインに対応させることが可能です。
WEBサイトの構成
- TOPページ【HOME】
- ポートフォリオ詳細ページ
- ABOUTページ
- CONTACTページ ※問合せメールフォーム
  
  ※1. Brackets(エディタソフト)を使って、レスポンシブWEBデザインのHTMLとCSSを作成(コーディング)します。
  Bracketsでないと動画と同じ表示にならないレクチャーがありますので、ご注意ください。
  ※2. CONTACTページは無料のメールフォームサービスを利用します。
Flexboxとメディアクエリでレスポンシブ対応サイトを作る
レスポンシブ対応のWEBサイトを作成するには、いくつかの実装方法がありますが、本講座ではFlexboxとメディアクエリを使ったレスポンシブWEBデザインを作成します。
Flexboxはとても便利なモジュールですが、仕様の部分で知っておかないと思い通りに表現できない癖などもあるので、そのポイントを学習しながら、意図したイメージ通りのWEBサイトを作成します。
対象と目標
本講座は、初級レベルから次のレベルへステップアップされたい方を対象に、 Flexbox とメディアクエリを使用した「レスポンシブ対応のWEBサイト制作」について学習します。
- WEBサイトの制作に必要な知識や技術を学びたい方。
- ご自身の力だけでオリジナルのWEBサイトを作成・公開したい方。
- これまでWEBサイトの作成にチャレンジしてきたけれど、思い通りに完成できなかった方。
- WEBサイトに必要な技術やサービスについてトータルで学びたい方。
- シリーズ講座のlevel1を修了された方。
などにとって、役立つ講座になるかと思いますので、ご自身にあてはまると思われる方は是非ご受講ください。

【ご注意】Flexboxやメディアクエリについて学習済みの方にとっては優しいレベルになりますので、ご受講の際にはカリキュラムをご確認いただき、ご検討いただければ幸いです。
教材について
【ご注意】WEBサイト完成版（HTMLやCSS）は、教材の中に入っておりません。
※各セクションの最後には、受講者様がコーディングされた内容と比較、答え合わせができるように、サンプルソースはご用意していますが、原則、講座を修了されたときにWEBサイトが完成されるようなカリキュラムとなっています。予めご了承ください。

ナレーション・BGMほか
- ナレーション竹中さやか
- BGM YOU (storeG)
イラストなど
- Designed by Freepik
  - freepik
  - Macrovector
- イラストAC
- prezi
- canva

Who Should Attend!

基本的なHTMLとCSSを学習された方
【推奨】シリーズ講座であるレベル1を修了された方 ※もしくは同等以上のレベルの方
ご自身の力でWEBサイトを制作し、公開したい方
ベーシックな構成のレスポンシブWEBデザインサイトを作成したい方
【ご注意】Flexboxやメディアクエリについて学習済みの方にとっては優しいレベルになりますので、ご受講の際にはカリキュラムをご確認いただき、ご検討いただければ幸いです。

TAKE THIS COURSE