HOT
blank

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

Design

WEBデザイン講座 Level3《レベルアップ》コース※グリッドレイアウトでレスポンシブ対応のWEBページを作成する, available at $19.99, has an average rating of 4.6, with 55 lectures, based on 143 reviews, and has 1883 subscribers.

Rating4.6
Enroll Now

You will learn about CSSグリッドレイアウトの基礎を学習します。 CSSグリッドレイアウトジェネレーターの使用方法について学習します。 CSS グリッド レイアウト を使って レスポンシブ 対応のWEBページを完成させます。 jQueryのプラグインである「bxslider」を使ってスライダーを実装する方法を学習します。 jQueryのプラグインである「Drawer」を使ってドロワーメニューを実装する方法を学習します。 ドロワーメニューの「Drawer」やスライダーの「bxslider」については、WEBページの仕上がりをリッチにするためのオプション扱いとしているため、必要最低限の説明となっています。 This course is ideal for individuals who are CSS Grid Layout (グリッドレイアウト)の基礎を学びたい方。 or CSS Grid Layout (グリッドレイアウト)を使用し、レスポンシブWEBデザインの制作に必要な知識や技術を学びたい方。 or これまでCSS Grid Layout (グリッドレイアウト)にチャレンジしてきたけれど、よく理解できなかった方。 or jQueryのプラグインを使った「スライダー」の実装方法を学びたい方。 or jQueryのプラグインを使った「ドロワーメニュー」の実装方法を学びたい方。 It is particularly useful for CSS Grid Layout (グリッドレイアウト)の基礎を学びたい方。 or CSS Grid Layout (グリッドレイアウト)を使用し、レスポンシブWEBデザインの制作に必要な知識や技術を学びたい方。 or これまでCSS Grid Layout (グリッドレイアウト)にチャレンジしてきたけれど、よく理解できなかった方。 or jQueryのプラグインを使った「スライダー」の実装方法を学びたい方。 or jQueryのプラグインを使った「ドロワーメニュー」の実装方法を学びたい方。.

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

Summary

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

Price: $19.99

Average Rating: 4.6

Number of Lectures: 55

Number of Published Lectures: 55

Number of Curriculum Items: 55

Number of Published Curriculum Objects: 55

Original Price: ¥11,800

Quality Status: approved

Status: Live

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のプラグインを使った「ドロワーメニュー」の実装方法を学びたい方。

Target Audiences

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

▼ご注意ください

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

Course Curriculum

Chapter 1: はじめに

Lecture 1: 本講座の概要 ※受講前にご視聴ください

Lecture 2: シリーズ WEBデザイン講座 ※オススメの受講方法について

Lecture 3: 【動画編】シリーズ WEBデザイン講座 ※オススメの受講方法について

Lecture 4: 学習の進め方と学習する環境 ※受講前にご確認ください

Lecture 5: 【重要】本講座のQ&Aサポートについて

Lecture 6: Udemyの動画視聴画面の説明 【PC編】

Lecture 7: 字幕について※システムによる自動生成

Lecture 8: 【ダウンロード】教材ファイル

Chapter 2: WEBページの作成 【1】CSS グリッドレイアウト

Lecture 1: 1.CSSグリッドレイアウトとは

Lecture 2: 2.グリッドコンテナ

Lecture 3: 3.グリッドトラック

Lecture 4: 4.グリッドレイアウトに使える便利な単位

Lecture 5: 5.グリッドレイアウトに使える便利な関数

Lecture 6: 6.トラックの高さを指定する

Lecture 7: 7.トラックの高さに最小サイズを指定する

Lecture 8: 8.グリッドライン

Lecture 9: 9.グリッドエリア

Lecture 10: 10.セル間隔

Lecture 11: 11.グリッドアイテムのネスティング

Lecture 12: 12.グリッドアイテムの重ね順

Lecture 13: 【注意】次のレクチャーに進む前にお読みください

Lecture 14: 13.グリッドレイアウトジェネレーター

Lecture 15: 14.グリッドレイアウトのコーディング

Lecture 16: 15.エディタ編

Lecture 17: 16.エディタ編②

Lecture 18: 17.グリッドレイアウトのコーディング➁

Lecture 19: 18.グリッドレイアウトのコーディング③

Chapter 3: WEBページの作成 【2】ドロワーメニュー

Lecture 1: 1.ドロワーメニューのコーディング

Lecture 2: 2.ドロワーメニューのコーディング➁

Lecture 3: 3.ドロワーメニューのコーディング③

Chapter 4: WEBページの作成 【3】スライダー

Lecture 1: 1.スライダーのコーディング

Lecture 2: 2.スライダーのコーディング➁

Lecture 3: 3.スライダーのコーディング③

Chapter 5: WEBページの作成 【4】WEBページの完成

Lecture 1: 1.WEBページを完成させる

Lecture 2: 2.WEBページを完成させる➁

Lecture 3: 3.WEBページの表示を調整する1

Lecture 4: 4.WEBページの表示を調整する2

Lecture 5: 5.WEBページの表示を調整する3

Lecture 6: 6.WEBページの表示を調整する4

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

Lecture 1: 1.WEBデザイナーの仕事は将来、AIに奪われるのか？【1】

Lecture 2: 2.WEBデザイナーの仕事は将来、AIに奪われるのか？【2】

Lecture 3: 3.WEBデザイナーの仕事は将来、AIに奪われるのか？【3】

Lecture 4: 4.WEBデザイナーの仕事は将来、AIに奪われるのか？【4】

Lecture 5: 5.WEBデザイナーの仕事は将来、AIに奪われるのか？【5】

Lecture 6: 6.WEBデザイナーの仕事は将来、AIに奪われるのか？【6】

Lecture 7: その後の検証動画

Lecture 8: 7.WEBデザイナーの仕事は将来、AIに奪われるのか？【7】※2023年7月上旬版

Lecture 9: 8.WEBデザイナーの仕事は将来、AIに奪われるのか？【8】※2023年7月上旬版

Lecture 10: 9.最新のテスト結果 (GPT-4V) 2023/10/10

Chapter 7: 【特典 2 】

Lecture 1: 【VScode】インストール

Lecture 2: 【VScode】テーマの変更

Lecture 3: 【VScode】ファイルの保存と設定

Lecture 4: 【VScode】リアルタイムプレビュー※拡張機能

Chapter 8: おわりに

Lecture 1: コース修了おめでとうございます

Lecture 2: ボーナスレクチャー

Instructors

Rating Distribution

  • 1 stars: 1 votes
  • 2 stars: 3 votes
  • 3 stars: 15 votes
  • 4 stars: 52 votes
  • 5 stars: 72 votes

Frequently Asked Questions


How long do I have access to the course materials?


You can view and review the lecture materials indefinitely, like an on-demand channel.


Can I take my courses with me wherever I go?


Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

You may also like

Top 10 Animation Courses to Learn in November 2024

Top 10 Digital Illustration Courses to Learn in November 2024

Top 10 Interior Design Courses to Learn in November 2024