WEBデザイン講座 Level3《レベルアップ》コース※グリッドレイアウトでレスポンシブ対応のWEBページを作成する

Description

▼ご注意ください

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

• 新着情報
  

  1. [NEW] 特典レクチャーの「WEBデザイナーの仕事は将来、AIに奪われるのか？」で

     • 9.最新のテスト結果  (GPT-4V) 2023/10/10 を追加しました。

       ※ChatGPTのコーディングレベルがかなりアップしています！
       【追加】WEBデザイナーの仕事は将来、AIに奪われるのか？【7】【8】※2023年7月上旬版
       

  2. ツールのバージョンアップに伴い、バージョンを戻す方法についての、テキストレクチャーを追加しました。
     レクチャー名：【注意】次のレクチャーに進む前にお読みください
     

  3. 特典動画を追加しました！

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

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

  4. Udemyのシステムにより自動で生成された字幕が表示されるようになりました。
     ※字幕内容は自動生成のため、正しい日本語に置き換わっていない部分があります。予めご了承ください。
     

  5. エディタソフトの Brackets が復活！
     ※詳細については、学習の進め方と学習する環境 ※受講前にご確認くださいのレクチャーをご確認ください。

     
     

  6. 本講座のサポートについてのレクチャーを追加しました。
     

  7. 特典セクションに以下のレクチャーを追加しました。

     • Visual Studio Code のインストール

     • テーマの変更

     • ファイルの保存と設定

     • リアルタイムプレビュー

• 本講座の特徴

1. 最新のカリキュラムを導入

   WEB制作業界は今大きな変革期を迎えているため、これから先も通用するWEB制作技術を身につけるためには、最新の情報やツールをもとにした学習カリキュラムが必要です。このような背景から本講座では、実践的なWEBデザイン(制作)を学ぼうとする方に向けて、最新の学習カリキュラムをご用意しました。
   

   • 新しいCSSモジュールの「CSSグリッドレイアウト」の基礎について学習する

   • HTML5 (HTML文書)と CSS3 (スタイルシート)の仕様にもとづくWEBページを作成(コーディング)する

     • Media Queries (メディアクエリ)

     • CSS Grid Layout (グリッドレイアウト)

   • JavaScript ( jQueryのプラグイン )で「スライダー」を実装する

   • JavaScript ( jQueryのプラグイン )で「ドロワーメニュー」を実装する
     
     

2. レスポンシブWEBデザインに対応したWEBページを作成する

   画面サイズに応じて最適化されたデザインを表示させる「レスポンシブWEBデザイン」ページを作成します。
   

   • PC用ページ

   • タブレット用ページ

   • スマートフォン用ページ

   
   また、レスポンシブに対応した【bxSlider】を使用したスライダーの実装や、ドロワーメニューの【Drawer】を実装します。

1. 対象と目標

   本講座は、初級者レベルから中級レベルへステップアップされたい方を対象に、Media Queries (メディアクエリ)とCSS Grid Layout (グリッドレイアウト)を使ったレスポンシブWEBページの作成と、JavaScriptのプラグインを使った「スライダー」と「ドロワーメニュー」の実装方法を学習します。

   ※シリーズ講座である、WEBデザイン講座 Level2 修了者 もしくは 同等レベルの方を想定しています。
   

   • CSS Grid Layout (グリッドレイアウト)の基礎を学びたい方。

   • CSS Grid Layout (グリッドレイアウト)を使用し、レスポンシブWEBデザインの制作に必要な知識や技術を学びたい方。

   • これまでCSS Grid Layout (グリッドレイアウト)にチャレンジしてきたけれど、よく理解できなかった方。

   • jQueryのプラグインを使った「スライダー」の実装方法を学びたい方。

   • jQueryのプラグインを使った「ドロワーメニュー」の実装方法を学びたい方。
     

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

• ナレーション・BGMほか

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

  • BGM YOU (storeG)

• イラストほか

  • freepik

  • prezi

What You Will Learn!

• CSSグリッドレイアウトの基礎を学習します。
• CSSグリッドレイアウトジェネレーターの使用方法について学習します。
• CSS グリッド レイアウト を使って レスポンシブ 対応のWEBページを完成させます。
• jQueryのプラグインである「bxslider」を使ってスライダーを実装する方法を学習します。
• jQueryのプラグインである「Drawer」を使ってドロワーメニューを実装する方法を学習します。
• ドロワーメニューの「Drawer」やスライダーの「bxslider」については、WEBページの仕上がりをリッチにするためのオプション扱いとしているため、必要最低限の説明となっています。

Who Should Attend!

• CSS Grid Layout (グリッドレイアウト)の基礎を学びたい方。
• CSS Grid Layout (グリッドレイアウト)を使用し、レスポンシブWEBデザインの制作に必要な知識や技術を学びたい方。
• これまでCSS Grid Layout (グリッドレイアウト)にチャレンジしてきたけれど、よく理解できなかった方。
• jQueryのプラグインを使った「スライダー」の実装方法を学びたい方。
• jQueryのプラグインを使った「ドロワーメニュー」の実装方法を学びたい方。

TAKE THIS COURSE