一括購入

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

コース料金:¥4,500(税込)またはチャプターごとの購入

最新のHTML5を70以上のレッスン、7時間かけてしっかり学びます。youtube動画の貼り付けや番号入力フォームなど、基礎的な内容だけでなく、実践的な内容も充実しています。

コースの言語: Japanese

コース概要

最新の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テクニック



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



 



 



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



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


必要条件

  • PC
  • Sublime Text (テキストエディター)

Course Curriculum

Lesson 1

時間: 06:35

Webページを設計する方法

Lesson 2

時間: 05:04

Webサイト制作の言語、HTMLとは

Lesson 3

時間: 05:31

Webページがブラウザに表示される仕組み

Lesson 4

時間: 02:32

HTML制作に必要なアプリケーションをインストールする...

Lesson 5

時間: 07:16

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

Lesson 6

時間: 04:07

ゼロから学ぶHTMLタグの書き方入門

Lesson 7

時間: 07:01

[実践]HTMLを書いてみよう:簡単なテキストのマークア...

Lesson 8

時間: 04:17

HTMLファイルをブラウザで表示させるには

Lesson 9

時間: 04:44

Web製作者が知っておくべき、ブラウザの種類と特徴

Lesson 1

時間: 05:08

HTML5を宣言するDOCTYPEの書き方

Lesson 2

時間: 04:22

HTMLの基本構造を記述する方法

Lesson 3

時間: 04:15

文字エンコードの種類と記述方法

Lesson 4

時間: 04:55

Webページにタイトルを付けるタグの書き方

Lesson 5

時間: 06:03

Webサイトの情報を示すタグの書き方

Lesson 6

時間: 04:03

見出しである事を示すの書き方

Lesson 7

時間: 04:02

段落である事を示すタグの書き方

Lesson 8

時間: 04:13

画像を表示するためのタグの書き方

Lesson 9

時間: 04:44

タグに情報を付加するための属性の書き方

Lesson 1

時間: 04:57

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

Lesson 2

時間: 04:56

レイアウトのためのタグを記述してみよう

Lesson 3

時間: 08:06

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

Lesson 4

時間: 06:56

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

Lesson 5

時間: 06:57

コンテンツをマークアップしてみよう

Lesson 6

時間: 06:57

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

Lesson 7

時間: 05:17

CSSファイルを読み込むタグの記述方法

Lesson 8

時間: 03:20

コメントアウトを書く方法

Lesson 9

時間: 08:35

[実践]アバウトページを作ってみよう

Lesson 1

時間: 02:54

フォームを作成するためのタグの書き方

Lesson 2

時間: 04:35

タグでテキスト入力フォームを作る方法

Lesson 3

時間: 05:06

タグで長文向けフォームを作成する方法

Lesson 4

時間: 03:03

タグで送信・リセットボタンを作る方法

Lesson 5

時間: 06:18

タグでフォームにラベルを付ける方法

Lesson 6

時間: 04:37

タグでフォームをグループに分ける方法

Lesson 7

時間: 08:39

タグでセレクトメニューを作る方法

Lesson 8

時間: 05:46

タグでラジオボタンを作る方法

Lesson 9

時間: 04:01

タグでチェックボックスを作る方法

Lesson 10

時間: 09:35

フォームに関するタグを使って、ログインページを作ろ...

Lesson 1

時間: 05:15

テーブルを作成するためのタグの書き方

Lesson 2

時間: 05:53

テーブルに項目名を設定するタグの書き方

Lesson 3

時間: 04:36

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

Lesson 4

時間: 06:36

行をグループ化する3つのタグの書き方

Lesson 5

時間: 05:39

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

Lesson 6

時間: 08:18

テーブルタグを使って、企業概要ページを作ろう!

Lesson 1

時間: 07:16

見出しをつける~の書き方

Lesson 2

時間: 05:41

段落タグと改行タグの書き方

Lesson 3

時間: 03:40

語句を強調、ハイライト表示させるタグの書き方

Lesson 4

時間: 06:08

引用するときのタグの書き方

Lesson 5

時間: 04:28

改行や余白をそのまま表示させるタグの書き方

Lesson 6

時間: 04:22

連絡先や問合わせ先、省略文字、改行位置を示す方法

Lesson 7

時間: 05:10

箇条書きリストを作成する方法

Lesson 8

時間: 04:17

定義型リストを作成する方法

Lesson 9

時間: 06:22

文字構造を意識したHTMLテキストのマークアップをして...

Lesson 10

時間: 05:40

テキスト系タグを使った、カフェメニューページを作ろ...

Lesson 1

時間: 06:14

指定のページへリンクさせるタグの書き方

Lesson 2

時間: 06:03

指定のHTMLファイルへリンクさせるタグの書き方

Lesson 3

時間: 05:25

ページ内ジャンプさせるリンクの書き方

Lesson 4

時間: 07:41

画像を表示するタグの書き方

Lesson 5

時間: 04:02

横罫線を表示するタグの書き方

Lesson 6

時間: 04:07

youtube動画をサイトに埋め込む方法

Lesson 7

時間: 05:41

ページの中に別のページを表示させるの書き方

Lesson 8

時間: 04:25

google mapを表示させる方法

Lesson 9

時間: 04:19

youtube動画を使った、映画情報サイトを作ろう!

Lesson 1

時間: 04:30

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

Lesson 2

時間: 05:06

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

Lesson 3

時間: 08:37

ユーザーに親切なお問い合わせメールを作成してみよう

Lesson 4

時間: 04:04

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

Lesson 5

時間: 05:19

サイトでPDFファイルをダウンロードさせる方法

Lesson 6

時間: 04:05

秒数を指定して自動的に特定のページへジャンプさせる...

Lesson 7

時間: 05:41

素材ダウンロードサイトを作ってみよう

Lesson 1

時間: 03:19

Webページレイアウトの基礎を学ぼう

Lesson 2

時間: 04:45

ヘッダーとナビゲーションを作成する方法

Lesson 3

時間: 04:32

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

Lesson 4

時間: 03:52

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

Lesson 5

時間: 05:44

sectionタグとarticleタグの違い

Lesson 6

時間: 05:17

文書構造を意識した正しいグルーピングをしてみよう

Lesson 7

時間: 04:55

Webページにタイトルを付けるタグの書き方</p> <div class="button-container"> <form method="POST" action="https://gogetterz.com/course-learning/auth" accept-charset="UTF-8"><input name="_token" type="hidden" value="sd1Z03HjPKYcRMSmsJkNlVFI9EOa82xgsd3yXqYc"> <input name="course_slug_str" type="hidden" value="70以上のレッスンで、基礎からしっかり学べる!-html5完全マスターコース-nestonline"> <input name="course_id" type="hidden" value="342"> <input name="chapter_id" type="hidden" value="648"> <input name="lesson_id" type="hidden" value="3465"> <input class="button grey-fill full-width tinysize text-center" type="submit" value="はじめる"> </form> </div> </div> </div> </div> </div> </section> </div> </div> </section> <section class="expert-container"> <div class="m-page-container"> <div class="about-expert"> <div class="info-image"> <figure> <a href="https://gogetterz.com/expert/nestonline-53"> <span class="expert-img" style="background-image:url('https://dims6v9vmk601.cloudfront.net/3121-819cb4237ddfceaa3e4dfdc66898f56f65f8a81c-17421115.png?Expires=1711664129&Signature=XhaWSttRPnQ21JQOi9fCo1vw4VnwL8T~8JspX0cMWzddB-J98NOjZN6obrIJL7a0fBCuw789RjCHzbMSDwiSITPXAoDZ-8jr5S5zMkOyqLVUJik02fHU28F0tF0pIsQfVIVaN-lrfDvW91gZg1DcI-Por7nrgsP9ouqUl~WuEHJc6M1ekLBV0wAbYEx02C~ZCnW56sz-W3iJ8YxHWG-TTX-eG8NtX-h6nGOePqSXRmIaRD78zaxZp9L8uH4et-eq5shQUcSNU5Cr7LrEkmFdeKllXRo-5kRr5HthLnFvnusagK2M98zSSe0mLjmavggDo7fHbMC-7tLFTDNtkuIaAA__&Key-Pair-Id=K2RTNNAXGNNIRP');"></span> </a> <figcaption> <div class="social-links"> <a href="https://gogetterz.com/expert/nestonline-53/notation-for-specified-transaction-law" class="nstl" target="_blank"></a> </div> </figcaption> </figure> </div> <div class="info-copy"> <h2 class="heading__h2">About the Expert - nestonline-53</h2> <p><p>テクノロジーとクリエイティブのプロを目指す人のためのスクールを運営しています。</p> <p>卒業生は1000名以上です。</p> <p> </p> <p><strong>★提供しているサービス</strong></p> <p><strong>2ヶ月のWebデザインコース</strong></p> <p>2ヶ月で未経験からWebデザイナーへ。 未経験からWEBデザイナーとして働けるレベルになることをゴールとした大学生や若手社会人向けのコースです</p> <p> </p> <p><strong>Webデザインキャンプ</strong></p> <p>【2日間で全てを学ぶ!】Webデザイン集中講座</p> <p> </p> <p><strong>Railsキャンプ</strong></p> <p>RailsCamp -2日間集中プログラミング入門講座-</p> <p> </p> <p>など</p> </p> <div class="button-container"> </div> </div> </div> <div class="more-courses-container" ng-controller="ExpertController" ng-cloak> <h3 class="heading__h3">nestonline-53 によるその他のコース</h3> <div class="courses-slider"> <div ng-repeat="courseContribution in courseContributions track by $index"> <article class="course"> <figure> <span class="overlay">[[ courseContribution.price_label ]]</span> <a href="[[ baseUrl + '/course/' + (courseContribution.slug_str | urlEncode) ]]"><span class="img-name" style="background-image:url([[ courseContribution.trailer_thumbnail_url ]])"></span></a> </figure> <div class="article-info"> <h4 class="text-left"><a href="[[ baseUrl + '/course/' + (courseContribution.slug_str | urlEncode) ]]">[[ courseContribution.locale_title | strLimit ]]</a></h4> <div class="author text-left"><a href="[[ baseUrl + '/expert/' + (courseContribution.expert_username | urlEncode) ]]">[[ courseContribution.expert_username ]]</a></div> <div class="footer-container"> <input type="button" class="favorite" id="course_[[ $index ]]" ng-click="toggleFavourite($index)" ng-class="{active: courseContribution.favourite}" data-course-id="[[ courseContribution.id ]]"/> <div class="rating"> <span class="star"></span> [[ courseContribution.rating ]] </div> </div> </div> </article> </div> </div> </div> </div> </section> <section class="user-reviews" id="reviews" ng-controller="ReviewController" ng-cloak> <div class="m-page-container"> <h2 class="heading__h2 clear">Reviews <a href="https://gogetterz.com/login" class="button pink tinysize small caps no-hover right"><span class="icon-pencil"></span>Reviewを書く</a> </h2> <div class="review_container"> <div class="review clear" ng-repeat="review in reviews track by $index"> <div class="review-img" style="background-image: url([[ review.learner_profile_image ]])"></div> <div class="review-copy"> <div class="star-container"> <ul> <li ng-repeat="rating in [] | range:review.rating"><img src="https://gogetterz.com/desktop/images/client/review-star.svg" ></li> </ul> </div> <h3 class="reviewer_name">[[ review.learner_username ]]</h3> <p class="review_comment">[[ review.comments ]]</p> </div> </div> </div> <div class="no-result" ng-show="noResults"> レビューはありません </div> <div class="review-load-more" ng-show="showLoadMore"> <a href="#" ng-click="loadMore()"> もっと読む <img src="https://gogetterz.com/desktop/images/client/down-arrow.svg" /> </a> </div> </div> <!--Modal code--> <div class="hide"> <div id="write-review" class="modal-box"> <div class="modal-container black question-edit-mode-modal"> <div class="close-button"> <a href="#" class="modal-close white"></a> </div> <h4 class="heading__h4 text-center">レビューを書く</h4> <nav class="review-stars"> <div class="label">コースの評価:</div> <ul class="stars"> <li><a href="#" class="active" ng-click="activate(1)" ng-mouseover="activate(1)" id="rating_1"></a></li> <li><a href="#" class="active" ng-click="activate(2)" ng-mouseover="activate(2)" id="rating_2"></a></li> <li><a href="#" class="active" ng-click="activate(3)" ng-mouseover="activate(3)" id="rating_3"></a></li> <li><a href="#" class="active" ng-click="activate(4)" ng-mouseover="activate(4)" id="rating_4"></a></li> <li><a href="#" ng-click="activate(5)" ng-mouseover="activate(5)" id="rating_5"></a></li> </ul> </nav> <div class="error-msg" ng-show="errors.rating">[[ errors.rating[0] ]]</div> <div class="form-container"> <div class="form-element"> <textarea placeholder="レビューを書く" ng-model="reviewData.comments"></textarea> <div class="error-msg" ng-show="errors.comments">[[ errors.comments[0] ]]</div> </div> <div class="clear" ng-if="serverMessage"> [[ serverMessage ]] </div> <div class="error-msg" ng-show="errors.course_id">[[ errors.course_id[0] ]]</div> <div class="button-container text-right"> <input type="submit" ng-click="submitReview()" value="追加" class="button lightpink small smallsize"> </div> </div> </div> </div> </div> <input id="courseID" name="course_id" type="hidden" value="342"> <input id="expertID" name="expert_id" type="hidden" value="34"> </section> <!--Modal code--> <div class="hide"> <div id="view-lesson" class="modal-box"> <div class="modal-container modal-lesson"> <div class="close-button"> <a href="#" class="modal-close"></a> </div> <h3 class="heading__h3">プロモーション動画</h3> <div class="video-container" id="course-promo-video-container"> プレーヤーを読み込んでいます... <iframe width="420" height="315" src="" id="youtubeURL"></iframe> </div> <div class="lesson-info" id="courseDescription"></div> </div> </div> <div id="expert-video-modal" class="modal-box"> <div class="modal-container modal-lesson"> <div class="close-button"> <a href="#" class="modal-close"></a> </div> <div class="more-videos"> <div> <h3 class="heading__h3" id="promoExpertUsername"></h3> <div class="video-container" id="promo-video-container"> プレーヤーを読み込んでいます... </div> </div> </div> </div> </div> </div> <input id="addToHeading" name="addToHeading" type="hidden" value="追加"> <input id="addedToHeading" name="addedToHeading" type="hidden" value="に追加"> <input id="keywordPlaceholder" name="keywordPlaceholder" type="hidden" value="検索キーワードを入力してください"> <input id="courseCategoryPlaceholder" name="courseCategoryPlaceholder" type="hidden" value="カテゴリの設定(最大5)"> <div class="hide" id="favouriteCtrl" ng-controller="FavouriteController" ng-cloak></div> </div> <footer> <div class="page-container"> <div class="footer-container row"> <div class="col m4 s12"> <ul class="footer-links"> <li><a href="http://www.uicommons.co.jp" target="_blank">運営会社</a></li> <li><a href="https://gogetterz.com/privacy-policy">プライバシーポリシー</a></li> <li><a href="https://gogetterz.com/notation-for-specified-transaction-law">特定商取引法に基づく表示</a></li> </ul> </div> <div class="col m4 s12"> <div class="lang-select row mobile"> </div> <ul class="social-links"> <li><a href="https://twitter.com/GoGetterzCom" class="tw" target="_blank"></a></li> <li><a href="https://www.facebook.com/GoGetterz-1629136037356647" class="fb" target="_blank"></a></li> <li><a href="https://www.instagram.com/gogetterzcom" class="ig" target="_blank"></a></li> <li><a href="https://www.youtube.com/channel/UC3m1Kn1GZz1x7nRme4Q2F8Q" class="yt" target="_blank"></a></li> </ul> </div> <div class="col m4 s12"> <ul class="footer-links"> <li><a href="https://gogetterz.com/faq">FAQ</a></li> <li><a href="https://gogetterz.com/contact-us">お問い合わせ</a></li> <li><a href="https://gogetterz.com/terms-and-conditions">メンバー利用規約</a></li> </ul> </div> </div> <div class="copyrights">© 2024 | <a href="http://www.uicommons.co.jp" target="_blank">UIcommons Inc.</a></div> </div> </footer> <div class="footer-reg-link mobile"> <div class="row"> <div class="col s6"> <a href="https://gogetterz.com/login">ログイン</a> </div> <div class="col s6"> <a href="https://gogetterz.com/register">新規登録</a> </div> </div> </div> <script> window.fbAsyncInit = function() { FB.init({ appId : '316529852394873', cookie : true, xfbml : true, version : 'v3.2' }); FB.AppEvents.logPageView(); }; (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-65523985-2"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-65523985-2'); </script> <!-- Scripts --> <script> var APP = APP || {}; APP.baseUrl = "https://gogetterz.com/"; APP.csrf = "sd1Z03HjPKYcRMSmsJkNlVFI9EOa82xgsd3yXqYc"; APP.FACEBOOK_APP_ID = "316529852394873"; APP.pusherID = "b44ae4e2f6f12f808bf1"; APP.stripeKey = "pk_live_gepnaWWFaN3WlTEVYrtGawUg"; APP.userName = ""; APP.userID = ""; </script> <script src="https://gogetterz.com/desktop/js/vendor.js"></script> <script src="https://gogetterz.com/desktop/js/app.js?v=1.2"></script> <script src="https://gogetterz.com/desktop/js/site.js?v=1.2"></script> <script> var shareImage = $('#banner-image').attr('src'); new needShareDropdown(document.getElementById('share-button-1'), { // url to share // url: decodeURIComponent(window.location.href), // // // title to share title: $('#courseTitle').html(), description: $('#courseBasicDescription').html(), image: shareImage.toLowerCase().indexOf('.svg') !== -1 ? 'https://gogetterz.com/desktop/images/static/welcome02.jpg' : shareImage, url: window.location.href, // social networks networks: 'Mailto,Twitter,Facebook,Reddit,Linkedin' }); </script> </body> </html>