WEBデザイン講座 Level2《ステップアップ》コース※FlexboxとメディアクエリでレスポンシブWEBサイトを作る
HTML5 と CSS3 のコーディング法を学びながら、4ページで構成される「ポートフォリオサイト」の完成を目指します。本講座を受講して Flexbox と メディアクエリ を使用した レスポンシブ 対応のWEBサイト制作をマスターしよう！
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の基本を追加しました。
Flexboxとは
Flexboxの基本
lesson1
3つの画像を横並びで表示させる
lesson2
6つの画像のうち、上の3つの画像のみ横並びで表示させる
flex-direction
lesson3
flex-directionプロパティ
flex-wrap 横並び表示「row」
lesson4
flex-wrap 横並び表示「row」wrap
wrap-reverse
flex-wrap 縦並び表示「column」
lesson5
flex-wrap 縦並び表示「column」
wrap
wrap-reverse
user agent stylesheetのリセット
flex-flow
lesson6
flex-flowプロパティ
ショートハンドプロパティとは
値を省略した場合の注意点
flex-basis
lesson7
flex-basisプロパティ
widthやheightとの違い
flex-grow
lesson8
flex-growプロパティ複数のFlexアイテムに同じ値を指定する
各Flexアイテムに違う値を指定する
3つのFlexアイテムの幅を1：2：3に設定する
flex-shrink
lesson9
flex-shrinkプロパティ
flex
lesson10
flexプロパティflexプロパティの値を省略した場合
単位がない数値を1つ指定した場合
単位がつく幅や高さを1つ指定した場合
単位がない数値を1つと単位がつく幅または高さを1つ指定した場合
単位がない数値を2つ指定した場合
justify-content
lesson11
justify-contentプロパティ
flex-start
flex-end
center
space-between
space-around
space-evenly
align-items
lesson12
align-itemsプロパティ
stretch
flex-start
flex-end
center
baseline
align-self
lesson13
align-selfプロパティ
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
What You Will Learn!
- ベーシックな構成の「ポートフォリオ」サイトを完成させます。
- 無料のメールフォームサービスをHTML埋め込みで実装します。
- ※作成するWEBサイトは、TOPページ、ABOUTページ、CONTACTページ(問合せフォーム)、ポートフォリオ詳細ページの4ページで構成されています。
- よく使われる「HTML5の要素」を学習します。
- よく使われる「CSS3のプロパティ」を学習します。
- レスポンシブWEBデザインのコーディング法を学習します。
- flexboxの基本を学習します。
- メディアクエリの基本を学習します。
Who Should Attend!
- 基本的なHTMLとCSSを学習された方
- 【推奨】シリーズ講座であるレベル1を修了された方 ※もしくは同等以上のレベルの方
- ご自身の力でWEBサイトを制作し、公開したい方
- ベーシックな構成のレスポンシブWEBデザインサイトを作成したい方
- 【ご注意】Flexboxやメディアクエリについて学習済みの方にとっては優しいレベルになりますので、ご受講の際にはカリキュラムをご確認いただき、ご検討いただければ幸いです。