Overview

▼ご注意ください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の基本lesson13つの画像を横並びで表示させるlesson26つの画像のうち、上の3つの画像のみ横並びで表示させるflex-directionlesson3flex-directionプロパティflex-wrap 横並び表示「row」lesson4flex-wrap 横並び表示「row」wrapwrap-reverseflex-wrap 縦並び表示「column」lesson5flex-wrap 縦並び表示「column」wrapwrap-reverseuser agent stylesheetのリセットflex-flowlesson6flex-flowプロパティショートハンドプロパティとは値を省略した場合の注意点flex-basislesson7flex-basisプロパティwidthやheightとの違いflex-growlesson8flex-growプロパティ複数のFlexアイテムに同じ値を指定する各Flexアイテムに違う値を指定する3つのFlexアイテムの幅を1：2：3に設定するflex-shrinklesson9flex-shrinkプロパティflexlesson10flexプロパティflexプロパティの値を省略した場合単位がない数値を1つ指定した場合単位がつく幅や高さを1つ指定した場合単位がない数値を1つと単位がつく幅または高さを1つ指定した場合単位がない数値を2つ指定した場合justify-contentlesson11justify-contentプロパティflex-startflex-endcenterspace-betweenspace-aroundspace-evenlyalign-itemslesson12align-itemsプロパティstretchflex-startflex-endcenterbaselinealign-selflesson13align-selfプロパティalign-contentlesson14align-contentプロパティflex-startflex-endcenterspace-betweenspace-aroundspace-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 FreepikfreepikMacrovectorイラストACprezicanva

Skills

Reviews