Your cart is empty.
Keep shoppingHTML5＆CSS3＋JavaScript 講座【初級レベル】コーディングに自信のない方や独学者の復習に最適です。
3,273 students
HTML5＆CSS3＋JavaScript 講座【初級レベル】コーディングに自信のない方や独学者の復習に最適です。
よく使う HTML 要素や CSS プロパティの解説と JavaScript でスライダーやドロワーメニューを実装する講座。対象：HTMLの基本を習得された初級者レベル。初めてHTMLやCSSに触れられる【初心者】には少し難易度が高めです。
Created byK.Nakamura (storeG), storeG -web.com
Last updated 7/2025
Japanese
What you'll learn
- HTML5の基本を短時間で総合的に学習します。※復習にもおすすめです。
- CSS3の基本を短時間で総合的に学習します。※復習にもおすすめです。
- JavaScriptの基礎(概要)を短時間で学習します。※復習にもおすすめです。
- どのようなブラウザでも、なるべく同じように表示させられるテクニックを学びます。
- HTML5やCSS3におけるコーディング・ルール(スタイル・ルール)を学びます。※Googleのスタイル・ガイドに準拠
- JavaScriptでスライダーを設置する方法を学びます。※Swiper使用
- JavaScriptでドロワーメニューを設置する方法を学びます。※Drawer使用
Explore related topics
Course content
18 sections • 80 lectures • 5h 44m total length
Requirements
- 【パソコン操作のレベル】
- キーボードやマウスの操作ができ、ファイルの作成、保存、管理ができる。
- 必要なソフトをインストールし、起動させることができる。
- 半角、全角、大文字、小文字の違いなどを理解している。
- 【必要なツール】
- エディタ ※推奨：EmEditor もしくは Brackets
- ブラウザ ※推奨：Google Chrome(グーグル・クローム)
- パソコン ※推奨：OSはWindows（動画で紹介している操作画面はWindowsですが、基本操作はエディタとブラウザですので、Macでの操作でも問題ありません。）
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ほか
Who this course is for:
- 【受講者イメージ】
- HTMLやCSSを使ってWEB制作はできるが、基礎知識があいまいで自信がない方。
- WEBページの作成は試みたことがあるけれど、途中で挫折してしまった方。
- HTML5の基本仕様を短時間で学習・復習したい方。
- HTML4以前の仕様しか理解していないため、最新のHTML仕様を学習したい方。
- CSS3の基本仕様を短時間で学習・復習したい方。
- JavaScriptについての基礎を学習したい方。
- WEBデザインはできるけれど、HTMLやCSSのコーディングはできない(自信のない)方。
- プログラミングは苦手だけれど、既存のソースをカスタマイズし、JavaScriptで動きのあるWEBページを作成したい方。
- WEBページにスライダー(カルーセル)を設置したい方。
- WEBページにドロワーメニュー(スマホメニュー)を設置したい方。