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

▼ご注意ください

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

• 新着情報
  

  • [new] 特典動画を追加しました！

    ※シリーズWEBデザイン講座共通の特典動画となります。

    WEBデザイナーの仕事は将来、AIに奪われるのか？について、気になっている方も多いのではないかと思います。そのような疑問に対する答えとなるような動画を作成しましたので、是非、ご視聴ください！
    

  • [new] 特典セクション※エディタのインストール方法などのセクションに、

    【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
            

• 本講座の特徴

1. 複数のWEBページからなる「WEBサイト」を作成する

   制作するのはポートフォリオサイトですが、ベーシックな構成なので、画像やテキストを変更すれば、その他のWEBデザインに対応させることが可能です。
   

   WEBサイトの構成

   • TOPページ【HOME】

   • ポートフォリオ詳細ページ

   • ABOUTページ

   • CONTACTページ ※問合せメールフォーム
     
     ※1. Brackets(エディタソフト)を使って、レスポンシブWEBデザインのHTMLとCSSを作成(コーディング)します。

         Bracketsでないと動画と同じ表示にならないレクチャーがありますので、ご注意ください。

     ※2. CONTACTページは無料のメールフォームサービスを利用します。
     
     

2. Flexboxとメディアクエリでレスポンシブ対応サイトを作る
   レスポンシブ対応のWEBサイトを作成するには、いくつかの実装方法がありますが、本講座ではFlexboxとメディアクエリを使ったレスポンシブWEBデザインを作成します。
   Flexboxはとても便利なモジュールですが、仕様の部分で知っておかないと思い通りに表現できない癖などもあるので、そのポイントを学習しながら、意図したイメージ通りのWEBサイトを作成します。
   
   

3. 対象と目標

   本講座は、初級レベルから次のレベルへステップアップされたい方を対象に、 Flexbox と メディアクエリ を使用した「レスポンシブ対応のWEBサイト制作」について学習します。
   

   • WEBサイトの制作に必要な知識や技術を学びたい方。

   • ご自身の力だけでオリジナルのWEBサイトを作成・公開したい方。

   • これまでWEBサイトの作成にチャレンジしてきたけれど、思い通りに完成できなかった方。

   • WEBサイトに必要な技術やサービスについてトータルで学びたい方。

   • シリーズ講座のlevel1を修了された方。
     

   などにとって、役立つ講座になるかと思いますので、ご自身にあてはまると思われる方は是非ご受講ください。

   
   

   【ご注意】Flexboxやメディアクエリについて学習済みの方にとっては優しいレベルになりますので、ご受講の際にはカリキュラムをご確認いただき、ご検討いただければ幸いです。
   
   

4. 教材について
   【ご注意】WEBサイト完成版（HTMLやCSS）は、教材の中に入っておりません。

   ※各セクションの最後には、受講者様がコーディングされた内容と比較、答え合わせができるように、サンプルソースはご用意していますが、原則、講座を修了されたときにWEBサイトが完成されるようなカリキュラムとなっています。予めご了承ください。

• ナレーション・BGMほか

  • ナレーション 竹中 さやか

  • BGM YOU (storeG)
    

• イラストなど

  • Designed by Freepik

    • freepik

    • Macrovector

  • イラストAC

  • prezi

  • canva