Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
【HTMLとCSS】ルールをしっかりマスター。初心者でも3時間後にはWEBサイトが編集できる基礎知識が身につく実践型講座
Highest Rated
Rating: 4.3 out of 5(961 ratings)
5,450 students

【HTMLとCSS】ルールをしっかりマスター。初心者でも3時間後にはWEBサイトが編集できる基礎知識が身につく実践型講座

WEB関連の仕事に携わっている方、これからWEB関連の仕事に就こうとする方に通用するサイトのコード作成に関する基礎知識を効率的に学べる。実務経験に近い構成でスキルを習得
Highest Rated
Created by中島 忠博
Last updated 6/2025
Japanese

What you'll learn

  • 初めてでも3〜4時間でHTML,CSSが編集出来るようになる基礎をしっかり学べます。
  • HTMLの誕生からCSSが生まれどのように進化してきたかの流れが分かるので基本が理論的にしっかり身につきます
  • HTML5,CSS3を理解して使えるために必要なのはHTML,CSSの基本ルールの進化をしっかり把握しておくこと。
  • 社会人になって初めてHTML,CSSに携わる方へたった３時間でHTML,CSSの基礎を身につけられる
  • 将来も絶対役に立つHTML,CSSの基礎を理解して自分でスキルアップする方法を学べる3時間
  • ホームページ制作に携わっている人はHTML,CSSの基本ルールぐらいは理解していて欲しい、3時間で基礎ルールは学べる。
  • WordPressでも、自分で編集できる基礎的な知識が身につく
  • HTML、CSSの編集に躓いていたらそれは基礎を理解していないから。3時間で基礎を理解すると加速度的に編集できるようになります。
  • A basic course that will definitely be useful for those who are about to learn HTML and CSS
  • Basics of HTML for Beginners

Explore related topics

Course content

10 sections • 36 lectures • 3h 4m total length

  • Acrobat Reader,Chromeのダウンロード案内 - Acrobat Reader, Chrome download instructions2:10

    【Information】

    私、滑舌が悪いのと動画の編集が慣れていないため字幕ファイルを作成して追加しております。

    ぜひ、動画を見るときは字幕をONで見ていただけると聞き取りにくい部分も分かるように字幕を作っております。

    講座の動画は日本語で行っていますが、英語版のテキストもダンロードできるようにしておりますので、海外の方も受講できます。

    The course videos are in Japanese, but the English text is also available for download, so people from overseas can also take the course.


    当プログラムは、ホームページに関係した仕事に就く人全てに知っておいていただきたいHTML,CSSの基本的な知識を3時間という短時間で学べる講座です。

    This program is a short 3-hour course that teaches the basic knowledge of HTML and CSS that anyone working in a website-related job should know.


    実際に自分で独学で勉強し、複数の本やWEBサイトで学んで、ここを理解しておけば加速度的にスキルアップ出来るポイントをまとめて、実際に3時間で学べるメソッドを構築しました。

    I actually studied on my own, learned from several books and websites, and compiled the points that, if understood, will help you exponentially improve your skills, and created a method that you can actually learn in 3 hours.


    テキストとなるPDF書類をダウンロードして、そのPDFを見ながら、PCの画面にそのPDF(Adobe Acrobat Readerで開いて）とブラウザー（GoogleのChrome）、テキストエディター（Vs code）※慣れているテキストエディターがあればそれを使用しても可）を使用して実際にHTML,CSS書類を作りながら学んでいただきます。

    できればPDF書類はタブレット等の別の画面で見ながら、操作はPCで行った方が効率が良いと思います。

    画面を切り替えながら作業してももちろん問題ないですが、3つの書類を交互に移動しながら進みますのでUdemyの動画は別の方が効率が良いです。

    You will download a PDF document that will serve as the text, and while looking at the PDF, you will actually create HTML and CSS documents using the PDF (open it in Adobe Acrobat Reader) on your PC screen, a browser (Google Chrome), and a text editor (Vs code) (you can use a text editor you are familiar with if you have one) as you learn.

    If possible, it will be more efficient to view the PDF document on a separate screen such as a tablet, and perform the operations on your PC.

    There is of course no problem switching screens as you work, but since you will be switching back and forth between three documents as you proceed, it is more efficient to watch the Udemy videos on separate screens.


    まずはテキストのPDFを開くアプリとしてPDF書類はできるだけAdobe Acrobat Reader（無料アプリ）を入手して開いてください。

    First, as an app for opening PDF text, please download and open PDF documents using Adobe Acrobat Reader (a free app).


    ブラウザーはGoogleが提供しているブラウザーのChromeをお使いください。Chrome以外のブラウザーでも同じ機能はあると思いますが、このプログラムではChromeの機能を使ってスキルアップの方法をご案内しています。

    Please use Chrome, a browser provided by Google. Although other browsers may have the same functions, this program will show you how to improve your skills using Chrome's functions.


    HTML,CSS書類を作成するテキストエディターは各種存在しておりますが、当プログラムではVScodeを使用して案内しております。テキストエディターについて設定等詳しく、慣れているテキストエディターをすでにご使用している場合はVScodeでなくても構いません。慣れているテキストエディターを使用しても問題ありません。

    There are various text editors for creating HTML and CSS documents, but this program uses VScode. If you are already familiar with the text editor and are familiar with the settings, you do not need to use VScode. You can use any text editor you are familiar with.


    受講環境として、まずはPDFアプリ(Adobe Acrobat Reader）、ブラウザー(Chrome)、テキストエディター(VScode)を立ち上げてご準備ください。

    To take the course, please first prepare your PDF application (Adobe Acrobat Reader), browser (Chrome), and text editor (VS code).

  • 学んでいくステップを説明- Explain the steps to learning4:49

    【コースの概要とステップ】[Course overview and steps]


    次のレクチャーでダウンロードしていただく教材テキストPDFについて、ページの構成、Udemyのでセクションとの関連ページ等をご説明します。

    I will now explain the PDF text that you will download in the next lecture, including the page structure and related pages to sections on Udemy.


    PDFの2ページ目の目次は、各SECTIONのタイトルをクリックしていただくと、そのSECTIONのトップページにリンク設定しておりますので、Adobe Acrobat Readerの場合、開いているページの上部にページが表示されていますが、そこに「2」と入力すれば、どのページからでも目次の2ページ目に移動できますので、再度勉強したいページに移動したいときは2ページに戻って、学びたいSECTIONを選ぶと素早く目的のページに移動しやすくなると思います。

    The table of contents on page 2 of the PDF is set up so that when you click on the title of each section, you will be linked to the top page of that section. In Adobe Acrobat Reader, the page is displayed at the top of the open page, but you can enter "2" there to go to page 2 of the table of contents from any page. So if you want to go to a page you want to study again, go back to page 2 and select the section you want to study, which will make it easy to quickly navigate to the desired page.


    このUdemuプログラムでは、セッションとして10まで分かれておりますが、各セッションとPDFのSECTION番号は一致しておりません。

    This Udemu program is divided into 10 sessions, but the session numbers do not match the PDF section numbers.


    各セクションのレクチャーごとに開く動画のタイトルの名称がSectionの番号がなっておりますので、動画の名称に合わせてPDFのページをご参照ください。

    The title of the video that opens for each lecture in each section is named after the section number, so please refer to the PDF page corresponding to the video name.

  • テキスト（PDF）とVS codeのダウンロードと設定 - Download and set up the text (PDF) and VS code3:19

    【コースの概要とHTMLの概要】

    [Course Overview and HTML Overview]


    では、コースのスタディを始めます。

    まず、リソースのテキストPDFをダウンロードしてデスクトップに保存してから、Adobe Acrobat Readerで開いてください。

    （テキストが2025年度版に更新しました。紹介しているリンク先がなくなったり、別のサイトに誘導されたりしていたので改定しました。動画では2020年バージョンを参照しながら進めていますので、若干表示されている文言が変わっている部分もありますがページはそのままですのでテキストを元に進めてください）

    Now, let's begin studying the course.

    First, download the resource text PDF and save it to your desktop, then open it in Adobe Acrobat Reader.

    (The text has been updated to the 2025 edition. Some of the links introduced were no longer available or directed to other sites, so they have been revised. The video refers to the 2020 version, so some of the displayed wording has changed slightly, but the page is the same, so please follow the text.)


    テキストPDF 【Section01】（3ページ）のページを開いてください。

    Please open the text PDF to page 【Section01】(page 3).


    まずはHTML書類を作るテキストエディターについて説明します。

    動画を見て、ステップどおりに進んでください。

    HTML,CSS書類はてテキストエディターで作成することが望ましいです。

    プログラムやコンテンツを作るにあたっては、テキスト入力ためだけに作られたテキストエディターというアプリを使ってコードを入力します。

    First, we'll explain about text editors for creating HTML documents.

    Watch the video and follow the steps.

    It is recommended that you create HTML and CSS documents using a text editor.

    When creating programs or content, you enter code using an app called a text editor, which is designed specifically for entering text.


    コードの作成はテキストエディターを使って作るのが重要です。

    有料、無料の様々なテキストエディターがありますが、最近では多くのプログラマーが使用しているMicrosoftが無料で提供している「Visual Studio Code（通称VS code）」を使用して講座を進行していきます。

    なぜ、HTML, CSSのコード作成はテキストエディターを使用した方が良いのか、簡単に説明しています。

    It is important to use a text editor when creating code.

    There are many text editors, both paid and free, but this course will use Visual Studio Code (commonly known as VS code), a free program provided by Microsoft that is used by many programmers these days.

    We provide a simple explanation of why it is better to use a text editor when creating HTML and CSS code.

Requirements

  • パソコンでコピペ程度ができること
  • htmlなどの勉強をしようと思ったことがある人
  • 動画を見ながらPC操作するので、できれば動画再生専用の画面（セカンドディスプレイやタブレットなど）があったほうが良い
  • WEBディレクターになる方もコーディングの基本は知っているべき
  • WEBデザイナーも自分はコードは書かないと言う方も基本を知っているとコーディング作業効率の良いデザインが作れるようになる。
  • WEBの役割、ページ構成、コンテンツ等を勉強している方はぜひ身につけて欲しい基礎知識
  • The first basic course to learn for those who want to work in HTML

Description

講座は日本語の動画ですが、テキストは日本語と英語を用意しました。

英語テキストも日本語テキストとページを合わせていますので日本語が分からなくても動画を見ながらテキストを読み込めば理解できるようにしています。

日本では3000人以上が受講し、5段階評価で4.4の高評価をいただいている講座です。


The course videos are in Japanese, but the text is available in both Japanese and English.

The English text is on the same page as the Japanese text, so even if you don't understand Japanese, you can understand by watching the videos and reading the text.

Over 3,000 people in Japan have taken the course, and it has received an excellent rating of 4.4 out of 5.


仕事の幅を広げるためにも今はHTML,CSSの基本知識が必要だと思っています。

HTMLが最初できたときの〈タグ〉の役割、後から登場した〈スタイル〉の機能と役割のルールがどのように進化し、便利な〈スタイル〉が誕生したのか、〈タグ〉が増えた意味を知ると将来どのように進化しても理解しやすくなります。

講師をしていて受講者の殆どが就職してからホームページの編集などの仕事が増え、基本が分かっていないし、先輩も教えてくれない。

そんな環境でコードの編集を任されている人が多く、基礎知識を学びに受講されています。

いきなりHTML5.0とCSS3.0からお勉強するのではなく、HTMLの〈タグ〉の役割、〈スタイル〉の機能と役割の基礎的なルールを最初に学ぶと、最新が理解しやすくなります。

プログラマーもフロントエンドはHTML,CSSで出来ているので、HTML,CSSの基本知識を学びに受講に来られました。

対面セミナーですと地域や時間が決まってしまうため、時間も場所も気にせず学べられるオンライン講座を作りました。

初めてでも3時間でHTML,CSSが加速度的に編集出来るようになるオンラインスタディプログラム。

自分はWEBデザイナーやコーダーを目指さない方も、WEBデザイン、コーダーと話をする、依頼する時、HTMLの仕組みや編集の基礎知識があるのと無いのでは打ち合わせ内容がぜんぜん違ってきます。

HTMLコードや仕組みのことが分かっていれば依頼者に説明する時やデザイナーやコーダーに依頼する時もポイントが分かってきます。

仕事の段取りも見えてきます。

ホームページを持っていない会社はほとんど無いので、HTMLの基礎知識があると絶対に仕事の幅が広がります。

WEBデザイナーやコーダーを目指していない方も、WEB関連の仕事に携わる方は基礎知識として知っているべき内容です。

HTMLを全部理解して最初からホームページを作れるようになるためには経験と毎日コードを編集するような環境ではないと身につきませんが、基礎を知っていればちょっとした変更や編集は出来るようになります。

社内にHTMLの基礎知識を分かっている人が必ず一人以上いる状況が今後の会社では必ず必要になってきます。

今、求められている基礎知識だと思っています。

ぜひ、スキルアップ、就職・転職時に有利になるHTML,CSS基礎知識を学んでください。


I think that basic knowledge of HTML and CSS is necessary now to broaden the scope of work.

If you know the role of <tags> when HTML was first created, how the functions and roles of <styles> that appeared later evolved, and the meaning of the increase in <tags>, it will be easier to understand how it will evolve in the future.

As a lecturer, most of the students have more work such as editing websites after getting a job, and they don't understand the basics, and their seniors don't teach them.

Many people are in charge of editing code in such an environment, and they take this course to learn the basics.

Instead of starting with HTML5.0 and CSS3.0, it is easier to understand the latest if you first learn the roles of HTML <tags> and the basic rules of the functions and roles of <styles>.

Programmers also come to learn the basics of HTML and CSS, because the front end is made of HTML and CSS.

Since face-to-face seminars are limited by location and time, I created an online course that can be learned regardless of time or place.

An online study program that allows beginners to rapidly edit HTML and CSS in just 3 hours.

Even if you are not aiming to be a web designer or coder, when talking to or requesting web design or coders, the content of the meeting will be completely different depending on whether or not you have basic knowledge of HTML structure and editing.

If you understand HTML code and how it works, you will know the key points when explaining to clients or when requesting designers or coders.

You will also be able to see the work process.

There are almost no companies that do not have a website, so having basic knowledge of HTML will definitely expand the range of work you can do.

Even if you are not aiming to be a web designer or coder, this is something that anyone involved in web-related work should know as basic knowledge.

In order to fully understand HTML and be able to create a website from scratch, you will need experience and an environment where you edit code every day, but if you know the basics, you will be able to make small changes and edits.

In the future, companies will definitely need at least one person in the company who understands the basics of HTML.

I think this is the basic knowledge that is needed now.

Please learn the basics of HTML and CSS to improve your skills and give you an advantage when looking for a job or changing jobs.


【講座の概要】

  • 実際にWEB講師を経験して、現在のWEBスクールの教え方に疑問があり、HTML,CSSの基礎知識は3時間で教えられると思いメソッドを開発。

  • さらに、基本が理解できれば加速度的に編集できるようになる勉強法をメソッドにしました。

  • HTMLの誕生から、どのように考えられてコードが作られてきたかを知ることで構造や役割が分かりやすくなってきます。

  • これが短時間で加速度的に編集できるようになる当方の「メソッド」です。

  • 〈タグ〉やスタイルをそのまま覚えるのではなく、どうしてこのような〈タグ〉やスタイルが設定されたのか理由が分かると、どのように進化してきたかが分かるので、今後、どんなに便利になって行っても理屈が分かるので対応出来るようになります。

  • 対面の少人数セミナーで500人以上教えてきて95%以上の受講生が理解し編集できるようになったセミナーのオンライン講座。

  • 他のHTML,CSS講座と違うところは、進化を理解して、現状を知り、今後にも対応出来る知識が身につけられることです。しかも短時間で。

  • 料理で言えば調理方法を教えるのではなく、なぜこの材料を使うかの理由、その材料の特性、その特性を料理でどのように活かすと栄養と美味しさの両立ができるのか、考えられる料理法など学びながら調理すれば、目的の料理を作るだけでなく様々な料理が作れるようになる。それと同じようになぜ〈タグ〉やスタイルの記述が出来るようになったのか、どのように活用していけるのかが分かると編集が楽しくなって来ます。

  • WordPressなどのCMSが人気ですが、ホームページはHTMLとCSSのコードでできているので、基礎的な知識がないと編集で躓きます。

  • 様々なCMSが登場している昨今。優れたCMSであってもカスタマイズするにはHTML,CSSの基本が分かっていないとできません。

  • CMSも何が便利な機能になっているのか、HTML,CSSの成り立ち、構造が分かってくるといろいろなCSSも便利なところが色々違っていることが分かってきますので、どのようなCMSを使うと、自分の求めているホームページを作るのに便利かが分かるようになっています。

  • 本や学校では基礎的な説明や解説が不足していて消化不良のまま現在のHTML5,CSS3を教えてしまうので、基礎から解説し理解できればあ今後の進化も分かりやすい。

本講座は、独学では何日もかかって基本が理解できない人でも、実際にコーディングを学んだ経験から、躓くポイントをしっかり捉えてしっかり基本を身につけられる講座です。自分でスキルアップしていく方法も学べます。


たった3時間ですが、中身が詰まっています。

HTML,CSSの教本等で学んだことがある人は本で理解できなかったところが分かりスッキリするでしょう。

初めての人はテキストエディターへのコピペでうまく行かないかもしれません。（間違っても気づきにくい）

でも、知識とともに実践でコーディングを進めながら理解できる部分が沢山ある講座です。


[Course Overview]

  • As an actual web instructor, I had doubts about the teaching methods used by current web schools, and developed a method that I thought could teach the basics of HTML and CSS in 3 hours.

  • Furthermore, I created a method that allows you to learn how to edit at an accelerated rate once you understand the basics.

  • By knowing how HTML has been thought about and how code has been created since its birth, you can easily understand its structure and role.

  • This is my "method" that allows you to edit at an accelerated rate in a short amount of time.

  • Instead of memorizing the tags and styles as they are, if you understand why these tags and styles were set, you will understand how they have evolved, and you will be able to handle them no matter how convenient they become in the future because you will understand the logic behind them.

  • This is an online seminar that I have taught to over 500 people in small-group seminars in person, and over 95% of the students have been able to understand and edit.

  • What makes this seminar different from other HTML and CSS courses is that you can understand the evolution, learn the current situation, and acquire the knowledge to handle the future. And in a short amount of time.

  • In the case of cooking, instead of teaching cooking methods, you can learn why certain ingredients are used, the characteristics of those ingredients, how to use those characteristics in cooking to achieve both nutrition and deliciousness, and possible cooking methods while cooking, and you will be able to make not only the desired dish but also a variety of dishes. In the same way, editing becomes more fun when you understand why tags and style descriptions have become possible and how to use them.

  • CMS such as WordPress are popular, but websites are made of HTML and CSS code, so if you don't have basic knowledge, you will have trouble editing.

  • Nowadays, various CMSs have appeared. Even with a good CMS, you cannot customize it unless you understand the basics of HTML and CSS.

  • Once you understand what the useful functions of a CMS are, and the origins and structure of HTML and CSS, you will understand that various CSSs have different useful points, so you will be able to understand which CMS is useful for creating the website you want.

  • In books and schools, basic explanations and commentary are lacking, and current HTML5 and CSS3 are taught without being fully digested, so if you can explain and understand the basics, it will be easier to understand future evolutions.

This course is for people who cannot understand the basics by themselves after spending days on it, but you can learn the basics by grasping the stumbling points from the experience of actually learning coding. You can also learn how to improve your skills on your own.

It's only 3 hours, but it's packed with content.

If you have studied HTML and CSS textbooks, you will understand the parts that you couldn't understand in books and feel refreshed.

If you are a beginner, you may not be able to copy and paste into a text editor. (It's hard to notice if you make a mistake)

However, this course has a lot of parts that you can understand as you proceed with coding in practice along with knowledge.


【今までの対面セミナーの受講者の方々】

  • WEBデザインスクールに通っているけど基本が分からない（学校では基本的な知識を教えてくれない）

  • ホームページを自分で作れるようになりたい

  • プログラマーがHTML,CSSの基本を学びに来る場合もある

  • DTPデザイナーがWEBの両方が出来るように勉強したい

  • ネット通販会社に入ってコーディングをやっているが基本的なことが分かっていない

  • 外部のデザイン会社に依頼しているが、簡単な編集が出来るようにしたい

  • WordPressで作ってあるサイトを編集できるようになりたい

  • WEBコーディングやデザイナーになって、副業、独立したい

  • 就職してからWEB関連の仕事が増えたので基本的なことを知っていたい

[Participants of past in-person seminars]

  • I'm attending a web design school but I don't understand the basics (schools don't teach basic knowledge)

  • I want to be able to make my own homepage

  • Programmers sometimes come to learn the basics of HTML and CSS

  • DTP designers want to learn so they can do both web design

  • I work at an online mail order company and do coding but I don't understand the basics

  • I outsource to an external design company but I want to be able to do simple editing

  • I want to be able to edit sites made with WordPress

  • I want to become a web coder or designer and do side work or become independent

  • I've had more web-related work since I started working so I want to know the basics

Who this course is for:

  • イマイチHTML，CSSが良く分からないという方
  • 仕事などでhtmlコードを開いて編集する事がある人、またはそのようなことが今後想定される人
  • これからWEB関連の仕事に就きたいと思っている人
  • htmlを勉強しようとして挫折した人
  • 本を読んでもイマイチhtml,cssが分からなくて先に進めなくなっている方
  • WordPressを編集できるように成りたい方
  • CMSで制作されたホームページでもカスタマイズ出来る機能があって自分で編集できるように成りたい方
  • WEBに関連する仕事をするすべての人（どのようにHTML,CSSがつくられているのか知っておくことは社会人の基礎知識に成りつつある必要）
  • 今後もしっかり安く立つHTML,CSSの基本を身に着けたい人
  • People who want to be able to edit HTML code

Report abuse