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

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.
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
Who Should Attend
Target Audiences
▼ご注意ください
storeGが公開している講座は、講師によるナレーションではなく、全てプロのナレーターによるナレーションを採用しています。
そのため、ナレーションにこだわりがある方は、ひとまず無料視聴動画をご確認いただき、受講をご検討いただければ幸いです。
新着情報
-
[NEW]特典レクチャーの「WEBデザイナーの仕事は将来、AIに奪われるのか?」で
-
9.最新のテスト結果 (GPT-4V) 2023/10/10 を追加しました。
※ChatGPTのコーディングレベルがかなりアップしています!
【追加】WEBデザイナーの仕事は将来、AIに奪われるのか?【7】【8】※2023年7月上旬版
ツールのバージョンアップに伴い、バージョンを戻す方法についての、テキストレクチャーを追加しました。
レクチャー名:【注意】次のレクチャーに進む前にお読みください
特典動画を追?しました!
※シリーズWEBデザイン講座共通の特典動画となります。
WEBデザイナーの仕事は将来、AIに奪われるのか?について、気になっている方も多いのではないかと思います。そのような疑問に対する答えとなるような動画を作成しましたので、是非、ご視聴ください!
Udemyのシステムにより自動で生成された字幕が表示されるようになりました。
※字幕内容は自動生成のため、正しい日本語に置き換わっていない部分があります。予めご了承ください。
エディタソフトの Brackets が復活!
※詳細については、学習の進め方と学習する環境 ※受講前にご確認くださいのレクチャーをご確認ください。
本講座のサポートについてのレクチャーを追加しました。
特典セクションに以下のレクチャーを追加しました。
Visual Studio Code のインストール
テーマの変更
ファイルの保存と設定
リアルタイムプレビュー
本講座の特徴
-
最新のカリキュラムを導入
WEB制作業界は今大きな変革期を迎えているため、これから先も通用するWEB制作技術を身につけるためには、最新の情報やツールをもとにした学習カリキュラムが必要です。このような背景から本講座では、実践的なWEBデザイン(制作)を学ぼうとする方に向けて、最新の学習カリキュラムをご用意しました。
-
新しいCSSモジュールの「CSSグリッドレイアウト」の基礎について学習する
-
HTML5 (HTML文書)と CSS3 (スタイルシート)の仕様にもとづくWEBページを作成(コーディング)する
-
Media Queries (メディアクエリ)
-
CSS Grid Layout (グリッドレイアウト)
-
JavaScript ( jQueryのプラグイン )で「スライダー」を実装する
-
JavaScript ( jQueryのプラグイン )で「ドロワーメニュー」を実装する
-
レスポンシブWEBデザインに対応したWEBページを作成する
画面サイズに応じて最適化されたデザインを表示させる「レスポンシブWEBデザイン」ページを作成します。
-
PC用ページ
-
タブレット用ページ
-
スマートフォン用ページ
また、レスポンシブに対応した【bxSlider】を使用したスライダーの実装や、ドロワーメニューの【Drawer】を実装します。
-
対象と目標
本講座は、初級者レベルから中級レベルへステップアップされたい方を対象に、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

K.Nakamura (storeG)
Webディレクター

storeG -web.com
オンライン動画講座の制作と運営
Rating Distribution
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!
- Random Picks
- Popular
- Hot Reviews
- Life Insurance Annuity Ultimate Buyer’s Guide
- 3DS Max Tutorial. Learn The Art of Modelling and Animation
- Crypto Trading Mastery (Scalping, Day trading, price action)
- Personal Finance
- Company Valuation Financial Modeling
- Dibuja y Esculpe tu COVID para Impresión 3d en Blender 2.8X
- Step-By-Step Stock Market Analysis and Real-Time Trades
- Create 3D Models of Furniture and Books in Paint 3D
- 1ZB Trading Cryptocurrency Price Action Course
- 2YouTube Masterclass The Best Guide to YouTube Success
- 3Python for Absolute Beginners
- 4AS1 Tosca Practice for Interviews and new learners
- 5NGRX angular nativescript
- 6Marketing Mix Modeling in one day for your Brand Analytics_1
- 7Top 10 Machine Learning Courses to Learn in November 2024
- 8Top 10 3d Modeling Courses to Learn in November 2024
- 1SolidWorks Essential Training ( 2023 2024 )
- 2Top 10 3d Modeling Courses to Learn in November 2024
- 3HTML5 Canvas create 5 Games 5 Projects Learn JavaScript
- 4Mega WordPress Elementor Bundled Course - 5 Courses Included
- 5WordPress Basics for Authors Writers
- 6The Architecture of Oscar Niemeyer
- 7Photoshop CC- Adjustement Layers, Blending Modes Masks
- 8Polymer Clay Jewelry Making Techniques for Beginners