Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
【有料級!未経験者必見!】習うより慣れよう!はじめの一歩!1時間半でとりあえ作ろう!HTML・CSSで作るWebページ!
Rating: 4.4 out of 5(91 ratings)
1,174 students

【有料級!未経験者必見!】習うより慣れよう!はじめの一歩!1時間半でとりあえ作ろう!HTML・CSSで作るWebページ!

新入社員研修向け!Web業界に興味があるけど何から始めて良いか分からないあなた!この講座を受講すると現在主流のシングルページを作成する基礎の力が身に付く入門編!
Last updated 4/2025
Japanese

What you'll learn

  • 準備知識(リクエスト、レスポンス、Webブラウザ、HTML(HyperText Markup Language)とは、フォルダやファイル名)
  • HTML(最低限必要なタグ、見出し、段落、順序がないリスト、順序があるリスト、リンク、テーブル、フォーム、特殊文字、コメントなど)
  • CSS(記述する場所、記述する手順、太字、リンクの下線をはずす、文字を水平方向で真ん中に表示、背景画像を挿入、背景色、余白、線を引くなど)
  • 練習問題でのアウトプット
  • デベロッパーツール(検証ツール)の使い方
  • HTMLの文法チェックの方法

Course content

6 sections41 lectures1h 14m total length
  • オリエンテーション0:40
  • スキルアップのコツ0:53
  • GoogleChromeのインストール方法0:22
  • VSCodeのインストール・使い方0:57
  • この講座で使用するテキストなどのダウンロード0:10

Requirements

  • パソコンで入力が出来る
  • Windowsの基本操作が問題なく1人で出来る
  • Windowsのフォルダやファイルの操作が1人で問題なく出来る
  • zipファイルを使用しますので、ご自分で解凍出来る
  • Webブラウザ(ホームページを見るためのソフト・講座ではGoogle Chromeを使用しています)がパソコンに入っており、操作方法が分かっている
  • 拡張子がHTMLのファイルをGoogleChromeのブラウザで開く手段が分かる
  • 出来ればVSCodeのインストールが可能(Windowsのメモ帳などでも使い方が分かっていればOK)

Description

  • 本講座は、これを作るために、こういうことを学びますという方針で教えています。


    何に使うかわからないけど、とにかく勉強しましょうという講座ではありません


  • このコースは、拡張子がHTMLのファイルをGoogleChromeのブラウザで開く手段が分かるなどご自身でWindows関連の操作が出来る方を対象としています


  • 未経験者の方にHTML・CSSに全ての細かい内容をお話してしまうと混乱する恐れがあるため、全ての内容は取り扱っておりません


  • とにかく作ってみようということが目的のため、詳しい説明はしておりません


「Web業界に興味があるけど、何から始めたら良いのかな・・・」


「Webサイト自分で作りたいのだけれど、どうやって作るんだろう・・・?」


「在宅でWebの仕事をしてみたいな・・・」


「HTMLやCSSを勉強したいのだけれど、どこから手を付ければ良いのか分からない・・」


「外注しているWebサイトを自分で少し修正したいので勉強したい!」


など、あなたは疑問や悩みをお持ちでないでしょうか


SNSを見る時間を少しだけ学習にあてて、在宅勤務や収入アップへの第一歩にしませんか?

最近は、Webサイトを作成できる人材を求める傾向にあります


この講座で学ぶと、現在主流で作られているシングルページを作るための基礎の知識が学べます!

シングルページがどのようなものかにつきましては「シングルページ 例」などで検索して頂くと実際のサイトが見られますので試してみて下さいね!


実際にこの教材を新入社員研修で使用していますが、未経験者が多いにもかかわらずこのコースの内容を理解し、学んでいないことを自分で調べてWebサイトを作成しています!

※下部の【未経験者からJavaエンジニアになるためのロードマップ】で学んだ場合

各動画は、皆さんがお忙しい中でも学習しやすい様、短く区切っていますので無理なく進める事が出来ますよ〜


練習問題も用意していますので、学んだ知識を実際にアウトプットすることで定着度を高めることができます!


もっと知りたい方は、私の講座【HTML/CSS中級編】本格的なWebサイトを作ろう!をぜひご受講下さい!


中級編は、現在の無料コースの内容をある程度理解していないと進むことは難しいと思われますので、最後まで受講していただけると嬉しいです!


また、この講座は未経験者の方に分かりやすくお伝えする事を優先しているため、正確性に欠ける表現を使用する場合があります


HTML・CSSが分かった!!という域に達するまでの期間は人によって異なります

ちなみに私の場合は1年かかりました・・・

それは下記に書いてあるスキルアップのコツを知らなかったからです!

それでも私の様に時間がかかる方はいらっしゃると思いますが、とにかく地道に繰り返し学習する事で道は開けると思いますので、一緒に頑張って行きましょう!!


【未経験者からJavaエンジニアになるためのロードマップ】

以下の順番で学ぶとひととおりのスキルを習得出来ます!

  1. 【無料!前提知識なし!未経験者必見!】誰でも役に立つ!はじめてのプログラミング(アルゴリズムとJava基礎)

  2. 【未経験者必見!時短!】ポイントだけ学ぶ!Javaオブジェクト指向はじめの一歩!

  3. 【無料・初心者必見!】はじめの一歩!1時間30分でサクッと作ろう!HTML・CSSで作るWebページ

  4. 【1時間30分で最低限必要な知識をサクッと学ぶ!未経験者必見!】はじめてのPostgreSQL入門講座

  5. 【1時間以内で必要最低限の知識をサクッと学ぶ!未経験者必見!】はじめてのMyBatis入門講座

  6. 【1時間30分で必要最低限の知識をサクッと学ぶ!未経験者必見】はじめてのSpringMVC(Spring Boot)入門

【更新履歴】

2025/03:その他練習問題のカリキュラムを追加

2025/02:スキルアップのコツのカリキュラムを追加

2023/11 :CSSの詳細度追加(知っておくと重宝する情報あれこれ)

2023/10 :【初心者必見!】超便利!Google Chrome デベロッパーツールのまずは覚えておきたい使い方を追加

2023/10 :HTMLの文法などが正しいかどうかチェックする方法を追加

2023/10 :相対パスと絶対パスを追加

2023/10:【Webデザインを勉強している方向け】私が参考にしているサイトを追加

2023/10 :オンラインプログラミング講師が教える上達のコツを追加

2023/12 :リセットCSSを追加

2024/01 :Google ChromeでWebサイト全体のスクリーンショットを撮る方法を追加

Who this course is for:

  • とりあえず簡単なレイアウトのホームページを作成してみたいあなた
  • WEB制作に興味があるけども何から始めて良いか分からないあなた
  • 自分でホームページを作成するためのとっかかりにしたいあなた
  • HTML・CSSを何となく知りたいあなた
  • ホームページ作成(HTML・CSS)未経験のあなた
  • HTML、CSSがどんなものなのか知りたいあなた
  • WEBデザイナーさんやエンジニアさんを管理しているあなた
  • 現在主流のシングルページのWEBサイトを作るきっかけにしたいあなた