70以上のレッスンで、基礎からしっかり学べる! HTML5完全マスターコース
4.4 (59 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.
619 students enrolled
Wishlisted Wishlist

Please confirm that you want to add 70以上のレッスンで、基礎からしっかり学べる! HTML5完全マスターコース to your Wishlist.

Add to Wishlist

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

最新のHTML5を70以上のレッスン、7時間かけてしっかり学びます。youtube動画の貼り付けや番号入力フォームなど、基礎的な内容だけでなく、実践的な内容も充実しています。
4.4 (59 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.
619 students enrolled
Created by NEST online
Last updated 10/2015
Japanese
Current price: $10 Original price: $80 Discount: 88% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 6.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • HTML5をマスターできます
View Curriculum
Requirements
  • 特にありません
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ページは、ヘッダーやコンテンツ、フッターなど様々なセクションに分かれています。ただ単純にテキストをマークアップするだけでなく、文書構造に沿ってグルーピングしないと、レイアウトを組む事が出来ないので、注意が必要です。

Who is the target audience?
  • Webサイト制作をこれから学びたい方
  • 最新のHTMLを勉強したい方
Compare to Other HTML Courses
Curriculum For This Course
75 Lectures
06:38:27
+
HTML入門 第1回
9 Lectures 47:03
コンテンツを効果的に魅せるため、Webサイトの形式を考える必要があります。 ここでは、まず初心者向けに「ブログ型」と「従来型」のウェブサイトの種類の違いについて触れ、設計する方法について学びます。
Preview 06:35

Webサイトを制作するために必要な、「HTML」とは何なのかを超初心者向けに解説しています。 初めてHTMLを学ぶ方はもちろん、今まで書いてきたけど本質的な意味を理解できていない方にもオススメです。
Webサイト制作の言語、HTMLとは
05:03

作成したHTMLファイルが、ブラウザにどのように表示されるのか、超初心者向けに解説しています。
Webページがブラウザに表示される仕組み
05:31

HTMLを記述する上で、必要なエディター「Sublime Text 3」のインストール方法について、超初心者向けに解説しています。
HTML制作に必要なアプリケーションをインストールする方法
02:32

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

HTMLファイルを新規作成する方法
07:15

HTMLタグの基本的な書き方について、超初心者向けに解説しています。専門的な用語はあまり使わないようにしているので、初めてHTMLを学ぶ人にオススメです。
ゼロから学ぶHTMLタグの書き方入門
04:06

HTMLタグの書き方を理解した上で、実際に簡単なテキストをマークアップしていきます。 見出しタグや段落タグの意味を覚えながら、基本文法を定着させることが、ここでの目的です。
Preview 07:00

記述したHTMLファイルを、ブラウザで表示させる方法について解説しています。 CSSを適応していない純粋なHTMLが、各ブラウザでどのように表示されるのかも確認します。
HTMLファイルをブラウザで表示させるには
04:17

Web製作者が知っておくべき、ブラウザの種類と特徴について解説していきます。各ブラウザで見え方に違いが出る事を知っている人を対象にしています。
Web製作者が知っておくべき、ブラウザの種類と特徴
04:44
+
HTML入門 第2章
9 Lectures 41:38

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

HTML5を宣言するDOCTYPEの書き方
05:07

HTMLファイルには、必ず必要なタグがあり、それらを「基本構造」と呼んでいます。 そのタグがないとそもそもHTMLファイルとして認識されないとても重要なタグです。ここでは、「基本構造」タグの書き方と意味について解説しています。
HTMLの基本構造を記述する方法
04:21

文字コードの種類と記述方法について、初心者向けに解説しています。 特に初心者の方は、文字コードの宣言は忘れがちですが、文字化けの原因にもなりますので注意が必要です。
文字エンコードの種類と記述方法
04:14

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

Webページにタイトルを付ける<title>タグの書き方
04:55

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

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

見出しである事を示す<h1>の書き方
04:02

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

段落である事を示す<p>タグの書き方
04:01

タグを使えば、ウェブページに画像を表示させる事ができます。しかし、それだけでは上手く表示されません。「どの画像か」という付加情報を加える必要があるからです。ここでは、適切なタグの書き方について解説します
画像を表示するための<img>タグの書き方
04:13

HTMLタグに付加情報を加える、「属性」というものを追加する事が出来ます。この動画では、タグに横幅を設定するためのwidth属性を実際に記述し、画像の大きさをタグ上でコントロールしていきます。
タグに情報を付加するための属性の書き方
04:43
+
HTML入門 第3回
9 Lectures 53:33

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

文字の色を変える、属性の書き方
04:57

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

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

リストタグを使ってナビゲーションを作ってみよう
08:05

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

メイン画像を表示させてみよう
06:56

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

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

フッターをマークアップしてみよう
04:34

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

CSSファイルを読み込む<link>タグの記述方法
05:16

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

コメントアウト<!-- -->を書く方法
03:19

画像タグを使って写真を表示し、タグでレイアウトを組み、見出しタグで文章をマークアップし、アバウトページを作成していきます。
[実践]アバウトページを作ってみよう
08:34
+
フォーム
10 Lectures 54:30

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

フォームを作成するための<form>タグの書き方
02:54

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

<input>タグでテキスト入力フォームを作る方法
04:35

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

<textarea>タグで長文向けフォームを作成する方法
05:05

タグを使って、送信ボタンとリセットボタンを表示させる方法について解説しています。
<input>タグで送信・リセットボタンを作る方法
03:03

タグを使って、フォームにラベルを付ける方法について解説しています。 適切なラベルを設定する事で、ユーザビリティも向上するのでおすすめです。
<label>タグでフォームにラベルを付ける方法
06:17

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

<fieldset>タグでフォームをグループに分ける方法
04:37

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

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

<radio>タグでラジオボタンを作る方法
05:46

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

<input>タグでチェックボックスを作る方法
04:00

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

[チャレンジ]フォームに関するタグを使って、ログインページを作ろう!
09:35
+
テーブル
6 Lectures 36:12

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

テーブルを作成するための<table>タグの書き方
05:14

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

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

テーブルに説明を加える3つのタグの書き方
04:36

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

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

隣り合う複数のセルを結合させるタグの書き方
05:38

テーブルタグを使って作った表組みの、隣り合う複数のセルを結合させる,タグの書き方について、初心者向けに解説しています。
[チャレンジ]テーブルタグを使って、企業概要ページを作ろう!
08:17
+
テキストとリスト
10 Lectures 52:56
文字を見出しとして定義するためのからまでのタグの考え方と、書き方について初心者向けに解説しています。
見出しをつける<h1>~<h6>の書き方
07:15

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

段落<p>タグと改行<br>タグの書き方
05:40

文章の一部分を強調させたい時に使用する,タグの書き方を、初心者向けに解説しています。
語句を強調、ハイライト表示させるタグの書き方
03:39

引用を使用したい際に使用するタグの書き方について、初心者向けに解説しています。
引用するときの<blockquote>タグの書き方
06:07

HTMLファイル上で改行やスペースを開けても、表示上の変化はありませんが、タグを使う事で可能になります。ここでは、そのタグの書き方を、初心者向けに解説しています。
改行や余白をそのまま表示させる<pre>タグの書き方
04:28

連絡先を示すためのタグや、省略文字が何を示すかを示すタグ、折り返し位置を指定するタグの書き方について、初心者向けに解説しています。
連絡先や問合せ先、省略文字、改行位置を示す方法
04:21

箇条書きリストを作成するためのタグの書き方について、初心者向けに解説しています。
箇条書きリストを作成する方法
05:09

定義型リストを作成するためのタグの書き方と考え方について、初心者向けに解説しています。
定義型リストを作成する方法
04:16

見出しタグや段落タグ、定義型リストタグなど様々なタグを使いこなして、文書構造にあったHTMLを作成する方法について学びます。
文字構造を意識したHTMLテキストのマークアップをしてみよう
06:22

チャレンジ課題です。理解度をチェックするために挑戦してみましょう!
[チャレンジ]テキスト系タグを使った、カフェメニューページを作ろう!
05:39
+
リンクと画像・動画・オーディオ
9 Lectures 47:52
リンク先URLを指定してジャンプさせるリンクを、タグを使って作成する方法について、初心者向けに解説しています。
指定のページへリンクさせる<a>タグの書き方
06:13

指定のHTMLファイルを指定してジャンプさせるリンクを、タグを使って作成する方法について、初心者向けに解説しています。
指定のHTMLファイルへリンクさせる<a>タグの書き方
06:02

ページ内でジャンプさせるリンクを、タグを使って作成する方法について、初心者向けに解説しています。
ページ内ジャンプさせるリンクの書き方
05:25

画像を表示するためのタグの書き方を、初心者向けに解説しています。
画像を表示する<img>タグの書き方
07:40

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

横罫線を表示する<hr>タグの書き方
04:02

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

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

ページの中に別のページを表示させる<iframe>の書き方
05:41

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

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

[チャレンジ]youtube動画を使った、映画情報サイトを作ろう!
04:18
+
HTMLテクニック
7 Lectures 37:19

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

リンクのクリックでメールソフトを起動させる方法
04:30

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

件名や本文を入力している状態でメールソフトを起動させる方法
05:05

mailto:を使用して、ユーザーが入力しやすいメールが立ち上がるように工夫してみましょう。
ユーザーに親切なお問い合わせメールを作成してみよう
08:37

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

ファビコンを設定する方法
04:04

サイト内で、リンクをクリックするとpdfファイルをダウンロードできるようなリンクを貼る方法について解説しています。
サイトでPDFファイルをダウンロードさせる方法
05:18

好きな秒数を指定して自動的に特定したURLのページへジャンプさせる方法について解説します。
秒数を指定して自動的に特定のページへジャンプさせる方法
04:05

チャレンジ課題です。理解度をチェックするために挑戦してみましょう!
[チャレンジ]素材ダウンロードサイトを作ってみよう
05:40
+
要素のセクショニング
6 Lectures 27:24
Webページの基本的なレイアウトから、最近はやりのレイアウトまで、様々なレイアウトを解説しています。
Webページレイアウトの基礎を学ぼう
03:18

Webページに必ず必要な、ヘッダーとナビゲーションを作成する方法について、初心者向けに解説しています。
ヘッダーとナビゲーションを作成する方法
04:44

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

メインコンテンツ、サイドバー、フッターの作成方法
04:31

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

Webサイト全体を真ん中寄せにするためのタグの記述方法
03:51

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

sectionタグとarticleタグの違い
05:44

チャレンジ課題です。理解度をチェックするために挑戦してみましょう!
[チャレンジ]文書構造を意識した正しいグルーピングをしてみよう
05:16
About the Instructor
NEST online
4.4 Average rating
1,285 Reviews
9,544 Students
8 Courses
ウェブデザイン / プログラミング

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

卒業生は1000名以上です。


★提供しているサービス

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

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


Webデザインキャンプ

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


Railsキャンプ

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


など