70以上のレッスンで、基礎からしっかり学べる! HTML5完全マスターコース

最新のHTML5を70以上のレッスン、7時間かけてしっかり学びます。youtube動画の貼り付けや番号入力フォームなど、基礎的な内容だけでなく、実践的な内容も充実しています。
4.5 (30 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
390 students enrolled
Instructed by NEST online Design / Web Design
$19
$80
76% off
Take This Course
  • Lectures 75
  • Length 6.5 hours
  • Skill Level Beginner Level
  • Languages Japanese
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 10/2015 Japanese

Course Description

最新のHTML5を70以上のレッスン、7時間かけてしっかり学びます

youtube動画の貼り付けや番号入力フォームなど、基礎的な内容だけでなく、実践的な内容も充実しています。

1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


★こんな人におすすめ★

  • Webサイト制作をこれから学びたい方
  • 最新のHTMLを勉強したい方


★特徴★

  • 最新のHTML5を70以上のレッスン、7時間かけてしっかり学べる
  • 1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供
  • 5分程度の動画が70レッスン以上 充実した内容ですが、無理せず学べる


★内容★

HTMLの入門セクションを3つこなした後、パートに分けて実践的な内容を行います。

(1)HTML入門 第1回

初めてHTMLを学ぶ方向けに、HTMLの基本の書き方から便利なツールまでをレクチャーします。 HTMLを学ぶ上での環境をここで整えるので、みなさん必ず受講してください。 簡単なWebサイト制作を通してレクチャーしていきますので、楽しみながら学習して頂けます。


(2)HTML入門 第2回

HTMLファイルを記述するにあたって、まずは必ず記述しなければならない「基本構造」の必須コードや、超基本的な文字の表示方法をレクチャーしていきます。 HTMLファイルは、文字にタグを付与していくのが基本の書き方ですが、その前にまず「基本の構造」をルールに基づいて記述しなければいけません。初めてHTMLを学ばれる方は必ず受講してください。 この章は、「HTML入門 第1回」の続きの章です。初めてご覧になる方は、まずこの前の章から挑んで下さい。


(3) HTML入門 第3回

簡単なWebサイトの制作を通して、HTMLの基礎をマスターできる章です。 リストタグを使って箇条書きリストを作成したり、Webサイトレイアウトを組むためのタグの記述方法について学びます。 「HTML入門 第3回」の続きの章になりますので、初めてこの章をご覧になる方はまず「HTML入門 第1回」から順番に挑んで頂くことをオススメします。


(4)フォーム

文字の入力フォームやチェックボックス、ラジオボタンや送信ボタンなど、フォームを形成する上で必須のHTMLの書き方についてをレクチャーします。 初心者向けに解説していますが、やや難しいので、初めての方はまず「HTML入門」の章から取り組んで頂くことをオススメします。 この章をマスターすれば、実際に送信等の機能はつけれませんが、簡単なお問い合わせフォームを作れるようになるので、みなさん頑張って下さい!


(5)テーブル

テーブルタグを使って、表組みを作成する方法を初心者向けに解説しています。 ひと昔前までは、テーブルタグを使ってWebサイトのレイアウトを組んでいました。 Webサイトレイアウトを組む際のテーブルタグはNGなのですが、表組みを作成する上ではテーブルタグは今でもたくさん使用されています。


(6)テキストとリスト

テキストには、「見出し」「段落」だけでなく、「引用」「リンク」など 様々な意味を付与していく必要があります。文章の構造を意識して、正しいマークアップを行うためには「どんなHTMLタグがあるのか」をどれだけ知っているか、にかかっています。 ここでは、簡単な制作物を通して、様々な文字に関するHTMLタグについて学んでいただきます。


(7)リンクと画像・動画・オーディオ

テキストにリンクを貼ったり、画像や動画を表示させる方法などを学びます。 HTML最大の特徴は、ファイルとファイルをリンクさせる事です。ファイル同士をリンクさせる事で、クリックで指定のページへジャンプさせる事ができます。


(8)HTMLテクニック

リンクのクリックでメールソフトを起動させたり、ファイルをダウンロードさせたりといった、少し上級者向けのテクニックを学びます。 リンクを貼る<a>タグを多く利用しますので、よくわからない方は先に「リンクと画像・動画・オーディオ」の章を学習してから、この章に挑んで頂くとより理解が深まります。


(9)要素のセクショニング

Webサイトをグループ化して、レイアウトを組むためのタグを記述する方法について学びます。 Webページは、ヘッダーやコンテンツ、フッターなど様々なセクションに分かれています。ただ単純にテキストをマークアップするだけでなく、文書構造に沿ってグルーピングしないと、レイアウトを組む事が出来ないので、注意が必要です。

What are the requirements?

  • 特にありません

What am I going to get from this course?

  • HTML5をマスターできます

What is the target audience?

  • Webサイト制作をこれから学びたい方
  • 最新のHTMLを勉強したい方

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: HTML入門 第1回
06:35
コンテンツを効果的に魅せるため、Webサイトの形式を考える必要があります。 ここでは、まず初心者向けに「ブログ型」と「従来型」のウェブサイトの種類の違いについて触れ、設計する方法について学びます。
05:03
Webサイトを制作するために必要な、「HTML」とは何なのかを超初心者向けに解説しています。 初めてHTMLを学ぶ方はもちろん、今まで書いてきたけど本質的な意味を理解できていない方にもオススメです。
05:31
作成したHTMLファイルが、ブラウザにどのように表示されるのか、超初心者向けに解説しています。
02:32
HTMLを記述する上で、必要なエディター「Sublime Text 3」のインストール方法について、超初心者向けに解説しています。
07:15

インストールした「Sublime Text 3」を使って、HTMLファイルを新規作成する方法について解説しています。

04:06
HTMLタグの基本的な書き方について、超初心者向けに解説しています。専門的な用語はあまり使わないようにしているので、初めてHTMLを学ぶ人にオススメです。
07:00
HTMLタグの書き方を理解した上で、実際に簡単なテキストをマークアップしていきます。 見出しタグや段落タグの意味を覚えながら、基本文法を定着させることが、ここでの目的です。
04:17
記述したHTMLファイルを、ブラウザで表示させる方法について解説しています。 CSSを適応していない純粋なHTMLが、各ブラウザでどのように表示されるのかも確認します。
04:44
Web製作者が知っておくべき、ブラウザの種類と特徴について解説していきます。各ブラウザで見え方に違いが出る事を知っている人を対象にしています。
Section 2: HTML入門 第2章
05:07

文書がHTML5で作成されたものであることを宣言するために、DOCTYPE宣言を行う必要があります。 DOCTYPE宣言とはそもそも何なのか、またその書き方について解説します。

04:21
HTMLファイルには、必ず必要なタグがあり、それらを「基本構造」と呼んでいます。 そのタグがないとそもそもHTMLファイルとして認識されないとても重要なタグです。ここでは、「基本構造」タグの書き方と意味について解説しています。
04:14
文字コードの種類と記述方法について、初心者向けに解説しています。 特に初心者の方は、文字コードの宣言は忘れがちですが、文字化けの原因にもなりますので注意が必要です。
04:55

Webページにタイトル情報を受け渡す、タグについて初心者向けに解説しています。実際に記述しますので、「HTMLの基本文法」を理解している方向けになっています。

06:02
Webページに、説明文やキーワード、製作者名などの情報を付与するためのタグについて、初心者向けに解説しています。 タグは、SEOにも効果があり、非常に重要なタグなので、ぜひ書き方をマスターして下さい。
04:02

Webページに、「見出し」を表示させるの書き方について解説しています。見出しタグには、からまでの種類がありますので、どのように違うのか見出しタグの考え方について触れます。

04:01

Webページの文章である事を示す、タグの書き方について解説しています。タグの書き方を覚えれば、どのようなものにも対応できる便利なタグなので、ぜひマスターしましょう。

04:13
タグを使えば、ウェブページに画像を表示させる事ができます。しかし、それだけでは上手く表示されません。「どの画像か」という付加情報を加える必要があるからです。ここでは、適切なタグの書き方について解説します
04:43
HTMLタグに付加情報を加える、「属性」というものを追加する事が出来ます。この動画では、タグに横幅を設定するためのwidth属性を実際に記述し、画像の大きさをタグ上でコントロールしていきます。
Section 3: HTML入門 第3回
04:57

CSSを利用せずにスタイルを適応させる""style""属性を使って、文字の色を変更させます。 初心者向けに解説していますので、CSSを知らない方でも大丈夫です。

04:56
Webサイトのレイアウトを組むためには、コンテンツをグルーピングする必要があります。この動画では、グルーピングをするためのタグ、、タグについて解説します。
08:05

Webサイトのナビゲーションを、リストタグを使って作成します。ここでは、リストタグの基本的な記述方法を初心者向けに解説しています。

06:56

Webサイトのメイン画像を表示させる方法を解説しています。画像が正常に表示されなかった場合にそなえ、代替テキストである"alt"属性も加えます。

06:56
Webサイトのコンテンツ部分をマークアップする方法を解説しています。ここでは、文書にあった適切なタグをどのように選んでいくのかについて学びます。
04:34

Webサイトのフッターをマークアップする方法を解説しています。フッターに必ずある「コピーライト」の書き方についても学んでいきます。

05:16

CSSファイルの外部読み込みをするための、タグの書き方について初心者向けに解説しています。

03:19

HTMLファイル上に、メモを挿入する事ができるコメントアウトの書き方について、初心者向けに解説しています。

08:34
画像タグを使って写真を表示し、タグでレイアウトを組み、見出しタグで文章をマークアップし、アバウトページを作成していきます。
Section 4: フォーム
02:54

タグを使って、フォームを作成するための基盤を作成する方法について、初心者向けに解説しています。

04:35

タグを使って、テキストを入力出来るフォームを作成する方法について解説しています。

05:05

タグを使って、複数行入力可能な入力フォームを表示させる方法について解説しています。

03:03
タグを使って、送信ボタンとリセットボタンを表示させる方法について解説しています。
06:17
タグを使って、フォームにラベルを付ける方法について解説しています。 適切なラベルを設定する事で、ユーザビリティも向上するのでおすすめです。
04:37

タグを使って、複数のフォームをカテゴリー化して、グループに分ける事ができます。 ここでは、グループ化するためのタグの記述方法を解説していきます。

08:38
タグを使って、セレクトメニューから選択できるフォームを作成する方法について解説します。
05:46

タグを使って、ラジオボタンを作る方法について解説します。

04:00

タグを使って、チェックボックスを作成する方法について解説します。

09:35

チャレンジ課題です。理解度をチェックするために挑戦してみましょう!

Section 5: テーブル
05:14

タグを使って、表組みを表示する方法について、初心者向けに解説しています。

05:52
テーブルタグを使って作った表組みに、項目名を設定するためのタグの書き方について、初心者向けに解説しています。
04:36

テーブルタグを使って作った表組みに、クリックすると開ける説明文を表示する,,タグの書き方について、初心者向けに解説しています。

06:35
テーブルタグを使って作った表組みを、グループ毎に分ける,,タグの書き方について初心者向けに解説しています。
05:38

テーブルタグを使って作った表組みの、隣り合う複数のセルを結合させる,タグの書き方について、初心者向けに解説しています。

08:17
テーブルタグを使って作った表組みの、隣り合う複数のセルを結合させる,タグの書き方について、初心者向けに解説しています。
Section 6: テキストとリスト
07:15
文字を見出しとして定義するためのからまでのタグの考え方と、書き方について初心者向けに解説しています。
05:40

長い文章をマークアップする際に使用するタグと、文章の中で改行させる際に使用するタグの書き方について、初心者向けに解説しています。

03:39
文章の一部分を強調させたい時に使用する,タグの書き方を、初心者向けに解説しています。
06:07
引用を使用したい際に使用するタグの書き方について、初心者向けに解説しています。
04:28
HTMLファイル上で改行やスペースを開けても、表示上の変化はありませんが、タグを使う事で可能になります。ここでは、そのタグの書き方を、初心者向けに解説しています。
04:21
連絡先を示すためのタグや、省略文字が何を示すかを示すタグ、折り返し位置を指定するタグの書き方について、初心者向けに解説しています。
05:09
箇条書きリストを作成するためのタグの書き方について、初心者向けに解説しています。
04:16
定義型リストを作成するためのタグの書き方と考え方について、初心者向けに解説しています。
06:22
見出しタグや段落タグ、定義型リストタグなど様々なタグを使いこなして、文書構造にあったHTMLを作成する方法について学びます。
05:39
チャレンジ課題です。理解度をチェックするために挑戦してみましょう!
Section 7: リンクと画像・動画・オーディオ
06:13
リンク先URLを指定してジャンプさせるリンクを、タグを使って作成する方法について、初心者向けに解説しています。
06:02
指定のHTMLファイルを指定してジャンプさせるリンクを、タグを使って作成する方法について、初心者向けに解説しています。
05:25
ページ内でジャンプさせるリンクを、タグを使って作成する方法について、初心者向けに解説しています。
07:40
画像を表示するためのタグの書き方を、初心者向けに解説しています。
04:02

横罫線を表示するためのタグの書き方を、初心者向けに解説しています。

04:06
youtube動画をページ内で再生できるよう、埋め込みサービスを利用して表示させる方法について、初心者向けに解説しています。
05:41

ページの中に窓のようにスクロールできる別ページを表示させる、タグの書き方について、初心者向けに解説しています。

04:25
ページ内にgoogle mapを表示する方法について、初心者向けに解説しています。
04:18

チャレンジ課題です。理解度をチェックするために挑戦してみましょう!

Section 8: HTMLテクニック
04:30

タグを使って、リンクのクリックでメールソフトを起動させる方法と、アドレスのエンティティ化について、解説しています。

05:05

件名や本文を入力している状態でメールソフトを起動させる方法について、解説しています。やや中級者向けです。

08:37
mailto:を使用して、ユーザーが入力しやすいメールが立ち上がるように工夫してみましょう。
04:04

ファビコンと呼ばれる、タブの部分に表示される小さなアイコンを設定する方法について、初心者向けに解説しています。

05:18
サイト内で、リンクをクリックするとpdfファイルをダウンロードできるようなリンクを貼る方法について解説しています。
04:05
好きな秒数を指定して自動的に特定したURLのページへジャンプさせる方法について解説します。
05:40
チャレンジ課題です。理解度をチェックするために挑戦してみましょう!
Section 9: 要素のセクショニング
03:18
Webページの基本的なレイアウトから、最近はやりのレイアウトまで、様々なレイアウトを解説しています。
04:44
Webページに必ず必要な、ヘッダーとナビゲーションを作成する方法について、初心者向けに解説しています。
04:31

Webページのメインコンテンツやサイドバー、フッターをレイアウトする方法について、初心者向けに解説しています。

03:51

Webページ全体を真ん中寄せにするためのタグの記述方法について、初心者向けに解説しています。

05:44

sectionタグとarticleタグの違いについて、初心者向けに解説しています。

05:16
チャレンジ課題です。理解度をチェックするために挑戦してみましょう!

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

NEST online, ウェブデザイン / プログラミング

テクノロジーとクリエイティブのプロを目指す人のためのスクールを運営しています。

卒業生は1000名以上です。


★提供しているサービス

2ヶ月のWebデザインコース

2ヶ月未経験からWebデザイナーへ。
未経験からWEBデザイナーとして働けるレベルになることをゴールとした大学生や若手社会人向けのコースです


Webデザインキャンプ

【2日間で全てを学ぶ!】Webデザイン集中講座


Railsキャンプ

RailsCamp -2日間集中プログラミング入門講座-


など


Ready to start learning?
Take This Course