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

Media Queries (メディアクエリ)と CSS Grid Layout (グリッドレイアウト)を使ったレスポンシブWEBページの作成と、JavaScriptのプラグインを使ったスライダーとドロワーメニューの実装方法を学習します。

4.70 (137 reviews)
Udemy
platform
日本語
language
Web Design
category
K.Nakamura (storeG)
instructor
WEBデザイン講座 Level3《レベルアップ》コース※グリッドレイアウトでレスポンシブ対応のWEBページを作成する
1,758
students
3.5 hours
content
Jan 2024
last update
$19.99
regular price

What you will learn

CSSグリッドレイアウトの基礎を学習します。

CSSグリッドレイアウトジェネレーターの使用方法について学習します。

CSS グリッド レイアウト を使って レスポンシブ 対応のWEBページを完成させます。

jQueryのプラグインである「bxslider」を使ってスライダーを実装する方法を学習します。

jQueryのプラグインである「Drawer」を使ってドロワーメニューを実装する方法を学習します。

ドロワーメニューの「Drawer」やスライダーの「bxslider」については、WEBページの仕上がりをリッチにするためのオプション扱いとしているため、必要最低限の説明となっています。

Why take this course?

▼ご注意ください

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

Reviews

赤尾
June 13, 2023
もともとグリッドレイアウトを本などで学習したことはありましたが、知らない機能がたくさん出てきたのでびっくりしましたが、使いこなせるようさらに学習したいと思いました。 ブラウザでグリッドレイアウトを組める「グリッドレイアウトジェネレーター」がとても便利なので活用します！ ありがとうございました。
Suga
March 21, 2023
全体的に短い講座ですが、グリッドレイアウトの基本的な使い方について学べました。 Layoutit!は指示通りに書いてもgrid-template-areasが機能しなかった(2013/3/21現在) Layoutit!はver2になっておりver1に直してもダメでした。 こちらは、Layoutit! ver1でかつEdgeブラウザで試したところ動画と同じように進めることができました プロのナレーターによる音声なのでクセのない説明で安心して聴くことができます。
小川
April 30, 2022
毎日楽しく勉強させて頂きました。シリーズ講座の全てが分かり易く基本的な構造の理解が深まります。特に今回の講座ではCSSグリッドレイアウトについて、一からマークアップするのは難しいと感じていた所でレイアウトイットという大変便利なツールを紹介して頂き感激しました。もっと沢山の講座を作って頂きたいな☆★と願います。
齋藤
November 10, 2021
グリッドデザインやドロワー、スライダーのコーディング補助サイトの使い方が丁寧に解説されていて、即実践につながると思いました。ただ、このシリーズをLevel1～３まで受講しましたが、何かが物足りないという気が・・・。何かと考えたところ、演習が欲しい、ということでした。コース内では確かに手を動かしてサイトを作り上げてはいきますが、知識を得ることが目的であるため、解説の通りにコーディングするだけにとどまってしまいます。最後に「自分でカスタマイズするなどで気づきを得よう」という説明はありました。しかし、気を付けるポイントなどとともに「こういうサイトを作ってみよう」という演習問題を用意していただき、自分で考えコーディングをし、最後に答え合わせと解説をしていただければより確実に習得できるのではと思いました。Leve2とLevel3は明確な学習テーマがあるので、ぜひ演習コースをご検討いただけるとありがたいです。
Matsuda
September 8, 2021
グリッドレイアウトについて理解できた。 ドロワーメニュー、ヒーロースライダーはコードの記述を最小限に抑え、JavaScriptの知識が皆無でもサクッと導入する方法が学習できた。ノートPCで受講しているとコードの文字が小さいく見づらかったです。
Y
May 9, 2021
グリッドレイアウト、drawer（レスポンシブサイトでよく見かける押すと開くメニュー）とbxslider（画像が自動で切り替わるもの）について知ることができます。 初心者でも難しい点は少ないため上記の機能を初めて触る方にはおすすめできます。 深いところについては触れておりませんので、別途学習する必要があります。 JQuelyを使用していますが、知識がなくても本講座はサイトからコピペするだけで使えますので問題はないと思います。（実装してうまくいかないときは講座のコードと自分のコードを見比べれればとりあえずこの講座のサイトを作る際は脱出できます）

Charts

Price

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

Rating

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

Enrollment distribution

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

Related Topics

Responsive Design
CSS
HTML5
CSS Grid
3094326
udemy ID
5/6/2020
course created date
3/20/2021
course indexed date
Bot
course submited by