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




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

▼ご注意ください

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


  • 新着情報

    • [new] 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

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

Url: View Details

What you will learn
  • ベーシックな構成の「ポートフォリオ」サイトを完成させます。
  • 無料のメールフォームサービスをHTML埋め込みで実装します。
  • ※作成するWEBサイトは、TOPページ、ABOUTページ、CONTACTページ(問合せフォーム)、ポートフォリオ詳細ページの4ページで構成されています。

Rating: 4.4

Level: Beginner Level

Duration: 4.5 hours

Instructor: K.Nakamura (storeG)


Courses By:   0-9  A  B  C  D  E  F  G  H  I  J  K  L  M  N  O  P  Q  R  S  T  U  V  W  X  Y  Z 

About US

The display of third-party trademarks and trade names on this site does not necessarily indicate any affiliation or endorsement of hugecourses.com.


© 2021 hugecourses.com. All rights reserved.
View Sitemap