HTML5&CSS3+JavaScript 講座【初級レベル】コーディングに自信のない方や独学者の復習に最適です。

よく使う HTML 要素や CSS プロパティの解説と JavaScript でスライダーやドロワーメニューを実装する講座。対象:HTMLの基本を習得された初級者レベル。初めてHTMLやCSSに触れられる【初心者】には少し難易度が高めです。

3.94 (352 reviews)
Udemy
platform
日本語
language
Web Development
category
2,367
students
5.5 hours
content
Mar 2024
last update
$19.99
regular price

What you will learn

HTML5の基本を短時間で総合的に学習します。※復習にもおすすめです。

CSS3の基本を短時間で総合的に学習します。※復習にもおすすめです。

JavaScriptの基礎(概要)を短時間で学習します。※復習にもおすすめです。

どのようなブラウザでも、なるべく同じように表示させられるテクニックを学びます。

HTML5やCSS3におけるコーディング・ルール(スタイル・ルール)を学びます。※Googleのスタイル・ガイドに準拠

JavaScriptでスライダーを設置する方法を学びます。※Swiper使用

JavaScriptでドロワーメニューを設置する方法を学びます。※Drawer使用

Description

▼ご注意ください

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


What's New


  • [NEW] 【確認テスト】コースの理解度をチェックしよう を追加しました。
    ※全部で15問です。全問正解を目指してがんばってください!

  • 特典レクチャーの「WEBデザイナーの仕事は将来、AIに奪われるのか?」で

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

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

  • 無料レンタルサーバ「XFREE」が新サービス『シン・クラウド for Free』へと変更されました。
    テキストレクチャー「本セクションをご視聴される前に必ずご確認ください」にてご案内を追加しました。


  • 特典動画を追加しました!

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

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

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

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

  • JavaScriptでスライダーを設置しよう!のセクションをアップデートしました。
    Swiperの仕様変更(バージョンアップ)に伴い、講座の内容のままでは不具合が発生することを確認しましたので、レクチャーを修正しアップデートしました。※修正は、CDNの部分のみとなります。
    修正および追加したレクチャーは以下となります。

    • 修正 → Swiper①

    • 追加 → サンプルコード

    • 修正 → Swiper②

    • 修正 → 1.Basic

    • 追加 → サンプルコード【完成版】


HTML5&CSS3 講座に JavaScript 講座のカリキュラムを追加し、大幅アップグレード!
カリキュラムを大幅アップデートしたため、セクションごとでナレーションの声が違います。予めご了承ください。

  • リソースファイル差し替えについてのお知らせ
    リソースファイルを修正し、再度アップロードしなおしましたので、お手数ですが以下のレクチャーにあるファイルを再度ダウンロードしていただきますよう、よろしくお願い致します。
    セクション13:JavaScriptでスライダーを設置しよう!

    • 43. 9.画像を表示

  • 無料サーバの申込み・設定など ※XFREE編のセクションを追加しました。

    • サーバの申込み・設定・サイト公開

      ※無料レンタルサーバー「Hostinger」の画面や仕様などの変更により、新たに「XFREE」を紹介する動画を追加しました。詳細につきましてはセクション内にあるアナウンスをご確認ください。

  • JavaScriptのセクションを追加し、タイトル・サブタイトルを変更しました!

    • JavaScript入門

    • JavaScriptでスライダーを設置しよう!

    • JavaScriptでドロワーメニューを設置しよう!

  • タイトルとサブタイトルを変更しました。
    スタイル・ルールの小テストを追加しました。

  • タイトルとサブタイトル、説明内容、PVを変更しました。
    ※コース内容のメインが「HTML5とCSS3の基本仕様の学習」であることを明確にするため、レスポンシブWEBデザイン(CSS)のコードの解説を特典扱いに変更しました。


ーーー

HTML5とCSS3の基本を総合的にしっかり身につけられるコース
+ JavaScript 講座のカリキュラムも追加され、スライダーやドロワーメニューの設置方法も学習できるようになりました!

  • HTML5とCSS3を理解するために必要なポイントがギュッと凝縮されており、無駄がなく短時間で学べるのが特徴です。

  • 学習教材は、レシピページのサンプル(HTML5とCSS3で作成)です。

  • 学習教材であるサンプルWEBページ(レシピページ)のHTMLを上から順に丁寧に説明していますので、コードを全て理解できるようになります。

  • レスポンシブWEBデザイン(CSS)のコード解説は、特典扱いとなりました。


    ※動画で紹介している操作画面はWindowsになっていますが、基本操作はエディタとブラウザですので、Macでの操作であっても問題はありません。


受講生へのメッセージ

講座内容(レクチャー)での説明などで、わからない点などがありましたら、Q&Aにてお気軽にご質問ください。
講師自身の私としましても、受講生様と共に学び、成長できればと願っています。


ナレーション・BGM

  • ナレーション 酒味 たろう・竹中 さやか

  • BGM YOU (storeG)

  • BGM 甘茶の音楽工房

  • イラスト rawpixelほか

Content

HTML5とは

HTML5
テスト:HTML5とは

WEBページを制作するために必要なツール

WEBページの作成に必要なもの
テスト:WEBページを制作するために必要なツール

HTMLの基本用語

HTMLの基本を学ぶ
テスト:HTMLで使われる基本的な用語

基本的な要素

基本的なHTML文書の説明
テスト:基本的なHTML
基本的なHTML文書でよく使われる要素
テスト:基本的なHTML文書でよく使われる要素
HTMLのレイアウトで分ける3つのグループ
ヘッダーのグループ
フッターのグループ
コンテンツのグループ
テスト:コンテンツのグループで使われる要素
<body>要素内でよく使われる要素

HTMLのスタイル・ルール

スタイル・ルール
テスト:スタイル・ルール

サンプルWEBページの作成 ※HTML編

WEBページの作成 準備編
WEBページの作成 コーディング編

無料サーバの申込み・設定など ※XFREE編

本セクションをご視聴される前に必ずご確認ください
サーバの申込み・設定・サイト公開

有料サーバの申込み・設定など ※エックスサーバー編

サーバの申し込み
サーバの設定

CSSとは

CSS作成のルール
CSSのプロパティ
フォント・テキストに関するCSSプロパティ
背景・ボーダーに関するCSSプロパティ
ボックスに関するCSSプロパティ

レスポンシブ・ウェブデザインとは

レスポンシブ・ウェブデザインの概要

JavaScript入門

本講座(セクション)で学ぶ範囲・目標設定
JavaScriptとは
1.JavaScriptの実行
2.記述のルール
3.変数
4.変数宣言のキーワード
5.関数
6.jQuery

JavaScriptでスライダーを設置しよう!

本講座(セクション)で学ぶこと
Swiper
1.Basic
2.Loop
3.Navigation
4.Auto
5.Pagination
6.Navigation ※色の変更
7.Navigation ※マークの変更
8.Pagination ※色の変更
9.画像を表示
10.Pagenationで移動
Swiperのサンプルデモ

JavaScriptでドロワーメニューを設置しよう!

本講座(セクション)で学ぶこと
1.Drawer
2.メニューを右側に表示・ハンバーガーアイコンのカスタマイズ
3.メニューを閉じる(バツ印)アイコンのカスタマイズほか
4.アイコンのカスタマイズほか

おわりに

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

特典

WEBサイトの基本知識
用語の説明
コンテンツ・モデル
CSS3 ※サンプル・チートシート
FTPの説明
画像を変更する
サンプルWEBページ (レシピページ) のダウンロード
サンプルWEBページ(style.css)の解説編1
サンプルWEBページ(style.css)の解説編2
サンプルWEBページ(style.css)の解説編3
Empty New Tab Pageの追加方法
【旧:Hostinger】サーバの申し込み・設定
【旧:Hostinger】WEBページの公開
【旧:Hostinger】お問合せ(メールフォーム)の作成
【旧:Hostinger】アーカイブされた(WEBサイトが表示されない)場合
ボーナスレクチャー: ブックマークとコース紹介

Screenshots

HTML5&CSS3+JavaScript 講座【初級レベル】コーディングに自信のない方や独学者の復習に最適です。 - Screenshot_01HTML5&CSS3+JavaScript 講座【初級レベル】コーディングに自信のない方や独学者の復習に最適です。 - Screenshot_02HTML5&CSS3+JavaScript 講座【初級レベル】コーディングに自信のない方や独学者の復習に最適です。 - Screenshot_03HTML5&CSS3+JavaScript 講座【初級レベル】コーディングに自信のない方や独学者の復習に最適です。 - Screenshot_04

Reviews

Suzu
August 15, 2023
HTML5編は従来の違いや基礎的なことを改めて知ることができてよかったです。 JS編は全体の仕上がりをイメージ(ゴール)した説明がなく進む、ただコースにそって作っていった感じでした。 何故そうするのかの説明がなく「ここにこう書きます」というところが多かったため、独学の補強にはならなかったです。 特典のAIにページを作らせる話は面白かったです。
赤尾
June 1, 2023
こちらの講座ではHTML、CSSの復習をすることができました。 またWEBデザインにおけるJavaScriptの記法も学ぶことができたので、さらにJavaScriptを学びたいと思いました。 レスポンシブ対応のWEBページを作ることができるようになると、表現できる幅が広がるので、とても重要だと感じました。 Level2も楽しみにしています。
Anonymized
May 22, 2023
HTML・CSS・Javascriptの初歩的な知識は持っていたが、慣れてくると基礎勉強は案外やり直すことがないものです。内容は初級レベルとはいえ、知らなったかこともたくさんあり経験者にとっても非常に勉強になるコンテンツかと感じました。実践では要らないかな..といった部分も無きにしも在らずでしたが。
ザリちゃん
December 31, 2022
QAの仕方の事前了承事項、Udemyの動画の視聴の仕方、字幕の精度の制限、おすすめの受講手順など受講者に誤解を与えないよう本当によく考慮されている。 字幕が正確でないなどを理由に低評価を付ける方がいますが、フェアではないように思います。 プロのナレーターによる説明も秀逸でクセがなく聴き取りやすい。この講座をシリーズで受講していますが、毎回安心して受講できます。 今回の講座では、とりわけSwiper/Drawerが個人的には良かったです。ググればわかることでも、基本事項をステップバイステップで動画で説明してくれるところが助かりました。こういった手順で、導入・カスタマイズしていけばよいのか~、と非常に参考になりました。 今回も多くを学ばせていただきました。ありがとうございました!
舘野
December 8, 2022
基本的な部分を押えている。 レンタルサーバー云々の部分は、特に必要ないのではないかと思った。 jQueryを出していたが、もうちょっと説明があってもよかったのかと感じた。 JavaScriptのスライダーとドロワーメニューの部分は例としてはよかった。
December 1, 2022
大量の説明がされているものの、詳しく説明されていないため、全体的にぼんやりとしかわからず、理解はできない。参考ページでもしめしてくれたらいいが、それもない。 divについての説明は別にあると説明されているが、どこにもない。構成が変わったのか?divが全く分からない。
島田哲雄
May 16, 2021
初めまして。この度はhtmlとcssの学習を一通り終了して、復習とjavascriptの勉強を兼ねて受講しました。内容的には復習にはちょうどよく、特にhtml/cssは教材がダウンロードできコードの模写ができるので助かりました。またjavascriptは、以前から勉強したかったswiperがありとても参考になりました。これから何度も復習してマスターしたいと思います。ありがとうございました。
Onihei
October 14, 2020
ところどころ分かりづらい分かりづらいところがありました。 JSのconsoleの確認の仕方やEmpty New Tab Pageの使い方などもう少し詳しく教えてくれると助かります。それとCSSの説明をちょっと省略しすぎていて、本編で勉強しないにしてもcalcの説明などは欲しかったです。
あらや
May 4, 2020
まったくの初心者からだと、きっと理解できないと思います。ちょっと敷居が高いような気がします。かといって、中途半端にわかる言語の挫折組には、もっといろんなことをって意見も出てくるような気がします。 わからないことの調べ方がわかると、よくなりそうな気がします。 私自身は、知らないことが知らないなりにガン見し、調べればわかることは調べるので飛ばすとか、そんな見方をしていました。 フリーサーバーに触れたのはいいことだと思います。
Akane
April 29, 2020
HTML、CSS、JavaScriptを一通り勉強した後で、こちらのコースを受講しました。 改めて、知識をきちっと整理でき、より深く勉強できました。 ただ、HTML、CSS、JavaScriptを使用した1つのWEBページの実践的なコーディングを、一連の作業を通して行い、総合的な復習と定着となることを期待していたので、その作業がなかったことは残念でした。 しかし、とても良い講座だったので、中級編なるものをリリースされたおりには、必ず購入したいと思います。良い講座をありがとうございました!
熊見咲子
February 11, 2020
手を動かしながら覚えるというよりは、座って講義を聞くようなイメージ。このビデオだけでhtmlを使えるようになるかというと、難しいように思う。 ただ、概要を先に頭に入れ、実践的なことは別途学習するのであれば有効だと思う。 ビデオも1、2日で見終わる長さなので、その点も良い。 変更があったものは新しいビデオに差し替えてあるてんも、親切で良い。
にいたかやま
January 17, 2019
私はHTMLを触ったことがあり復習の目的でしたのでちょうどよいくらいでした。 ですが、前説明無しで「BOMなし」「UTF-8以外で」等のワードが出てくるので、"基礎講座"としては初心者の?ポイントが多いような気がしました。
はる
August 5, 2018
HTML5の基礎的なポイントを丁寧に解説してくれているので、なんとなくHTMLを理解しているという人には、復習を含めて非常に役立つ講座だと思います。 一方で、全くHTMLを理解できていない人には、???な部分が多くなると思うので、基本的なHTMLを勉強してから受講したほうが効率よくHTML5を学ぶことができると思います。
エクセル兄さん
August 3, 2018
とても資料が綺麗でナレーターさんの声も聞きやすく丁寧に作られたコースと感じました! 惜しむらくは、コースタイトルが「実践HTML5基礎講座」という点で、何を実践できるのかタイトルから想像できないのでコースの魅力が伝わりきっておらず、 例えば「HTML5基礎&店舗サイトを作って実践できる90分」などにするとより具体的にコースの魅力が伝わるかもしれません!(いち個人的な考えとして参考までに)

Charts

Price

HTML5&CSS3+JavaScript 講座【初級レベル】コーディングに自信のない方や独学者の復習に最適です。 - Price chart

Rating

HTML5&CSS3+JavaScript 講座【初級レベル】コーディングに自信のない方や独学者の復習に最適です。 - Ratings chart

Enrollment distribution

HTML5&CSS3+JavaScript 講座【初級レベル】コーディングに自信のない方や独学者の復習に最適です。 - Distribution chart
1640916
udemy ID
4/11/2018
course created date
11/23/2019
course indexed date
Bot
course submited by