Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
WEBデザイン講座 Level3《レベルアップ》コース※グリッドレイアウトでレスポンシブ対応のWEBページを作成する
Highest Rated
Rating: 4.4 out of 5(166 ratings)
2,137 students

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

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

What you'll learn

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

Course content

8 sections55 lectures3h 20m total length
  • 本講座の概要 ※受講前にご視聴ください3:25

    本講座にご関心をお寄せいただき、誠にありがとうございます。

    こちらの動画では、本講座の概要についてご説明していますので、受講前にご視聴いただければ幸いです。

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

    本レクチャーでは、シリーズ「WEBデザイン講座」について、「学習の流れ」や「各講座の概要」についてご説明いたします。

    なお、本レクチャーはスキップしていただいても結構です。

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

    本動画レクチャーでは、本講座が含まれているシリーズ「WEBデザイン講座」について、「学習の順番」や「各講座の概要」について、詳しくご説明しています。

    ※シリーズ講座共通の動画となります。

  • 学習の進め方と学習する環境 ※受講前にご確認ください3:44
    1. 学習の進め方

    2. 学習する環境

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

    本講座のQ&Aサポートをご利用になる前には、必ずご確認のほどよろしくお願いします。
    ※サポート対象などについて説明しております。

  • Udemyの動画視聴画面の説明 【PC編】7:10

    Udemyの動画視聴画面の説明レクチャーです。

    【対象】

    • はじめてUdemyをご利用になる方

    • 動画視聴方法についてまだよくご存知ない受講生の方

    ※storeGが公開している全講座(コース)共通のレクチャーとなりますので、不要な場合はスキップしていただいてOKです。

  • 字幕について※システムによる自動生成0:52

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

    なお、字幕は受講者さまの方で、表示のオン・オフ、表示位置、フォントサイズなどを設定していただけますので、お好みに応じて設定していただければ幸いです。

  • 【ダウンロード】教材ファイル1:10
    1. コーディング前の準備

    2. 教材の使い方

Requirements

  • 【必須】基本的なパソコンの操作ができる方
  • ※OSはWindowsとMacのどちらでもOKですが、動画はWindowsを使用しています。予めご了承ください。
  • 【必須】HTML5およびCSS3の基礎を学習済みの方
  • 【必須】基本的なエディタの使用方法を習得済みの方
  • ※エディタは、受講者様のお好きなものをご用意ください。※エディタのサポートは行っておりません。
  • 【推奨】シリーズ講座である、WEBデザイン講座 Level2 修了者 もしくは 同等レベルの方
  • 【推奨】Flexboxの基礎を学習済みであれば、学習理解が進みます。

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

Who this course is for:

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