Start Course

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

Course Fee : ¥4,500 or Pay-As-You-Go

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

Course Curriculum

Lesson 1

Duration: 06:35

Webページを設計する方法

Lesson 2

Duration: 05:04

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

Lesson 3

Duration: 05:31

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

Lesson 4

Duration: 02:32

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

Lesson 5

Duration: 07:16

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

Lesson 6

Duration: 04:07

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

Lesson 7

Duration: 07:01

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

Lesson 8

Duration: 04:17

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

Lesson 9

Duration: 04:44

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

Lesson 1

Duration: 05:08

HTML5を宣言するDOCTYPEの書き方

Lesson 2

Duration: 04:22

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

Lesson 3

Duration: 04:15

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

Lesson 4

Duration: 04:55

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

Lesson 5

Duration: 06:03

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

Lesson 6

Duration: 04:03

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

Lesson 7

Duration: 04:02

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

Lesson 8

Duration: 04:13

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

Lesson 9

Duration: 04:44

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

Lesson 1

Duration: 04:57

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

Lesson 2

Duration: 04:56

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

Lesson 3

Duration: 08:06

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

Lesson 4

Duration: 06:56

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

Lesson 5

Duration: 06:57

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

Lesson 6

Duration: 06:57

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

Lesson 7

Duration: 05:17

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

Lesson 8

Duration: 03:20

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

Lesson 9

Duration: 08:35

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

Lesson 1

Duration: 02:54

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

Lesson 2

Duration: 04:35

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

Lesson 3

Duration: 05:06

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

Lesson 4

Duration: 03:03

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

Lesson 5

Duration: 06:18

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

Lesson 6

Duration: 04:37

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

Lesson 7

Duration: 08:39

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

Lesson 8

Duration: 05:46

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

Lesson 9

Duration: 04:01

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

Lesson 10

Duration: 09:35

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

Lesson 1

Duration: 05:15

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

Lesson 2

Duration: 05:53

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

Lesson 3

Duration: 04:36

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

Lesson 4

Duration: 06:36

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

Lesson 5

Duration: 05:39

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

Lesson 6

Duration: 08:18

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

Lesson 1

Duration: 07:16

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

Lesson 2

Duration: 05:41

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

Lesson 3

Duration: 03:40

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

Lesson 4

Duration: 06:08

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

Lesson 5

Duration: 04:28

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

Lesson 6

Duration: 04:22

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

Lesson 7

Duration: 05:10

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

Lesson 8

Duration: 04:17

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

Lesson 9

Duration: 06:22

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

Lesson 10

Duration: 05:40

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

Lesson 1

Duration: 06:14

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

Lesson 2

Duration: 06:03

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

Lesson 3

Duration: 05:25

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

Lesson 4

Duration: 07:41

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

Lesson 5

Duration: 04:02

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

Lesson 6

Duration: 04:07

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

Lesson 7

Duration: 05:41

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

Lesson 8

Duration: 04:25

google mapを表示させる方法

Lesson 9

Duration: 04:19

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

Lesson 1

Duration: 04:30

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

Lesson 2

Duration: 05:06

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

Lesson 3

Duration: 08:37

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

Lesson 4

Duration: 04:04

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

Lesson 5

Duration: 05:19

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

Lesson 6

Duration: 04:05

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

Lesson 7

Duration: 05:41

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

Lesson 1

Duration: 03:19

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

Lesson 2

Duration: 04:45

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

Lesson 3

Duration: 04:32

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

Lesson 4

Duration: 03:52

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

Lesson 5

Duration: 05:44

sectionタグとarticleタグの違い

Lesson 6

Duration: 05:17

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

Lesson 7

Duration: 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="QChH2V4SfOy8dccMaOutmxno6tbb05s9cGNeBEIS"> <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="Get Started"> </form> </div> </div> </div> </div> </div> </section> </div> </div> </section> <section class="course-summary"> <div class="m-page-container"> <h2 class="heading__h2">Course Overview</h2> <div class="copy"> <p> <p><strong>最新のHTML5を70以上のレッスン、7時間かけてしっかり学びます</strong></p> <p><strong>youtube動画の貼り付けや番号入力フォームなど、基礎的な内容だけでなく、実践的な内容も充実しています。</strong></p> <p><strong>1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。</strong></p> <p> </p> <p><strong>★こんな人におすすめ★</strong></p> <ul> <li>Webサイト制作をこれから学びたい方</li> <li>最新のHTMLを勉強したい方</li> </ul> <p> </p> <p><strong>★特徴★</strong></p> <ul> <li>最新のHTML5を70以上のレッスン、7時間かけてしっかり学べる</li> <li>1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供</li> <li>5分程度の動画が70レッスン以上 充実した内容ですが、無理せず学べる</li> </ul> <p> </p> <p><strong>★内容★</strong></p> <p><strong>HTMLの入門セクションを3つこなした後、パートに分けて実践的な内容を行います。</strong></p> <p><strong>(1)HTML入門 第1回</strong></p> <p>初めてHTMLを学ぶ方向けに、HTMLの基本の書き方から便利なツールまでをレクチャーします。 HTMLを学ぶ上での環境をここで整えるので、みなさん必ず受講してください。 簡単なWebサイト制作を通してレクチャーしていきますので、楽しみながら学習して頂けます。</p> <p> </p> <p><strong>(2)HTML入門 第2回</strong></p> <p>HTMLファイルを記述するにあたって、まずは必ず記述しなければならない「基本構造」の必須コードや、超基本的な文字の表示方法をレクチャーしていきます。 HTMLファイルは、文字にタグを付与していくのが基本の書き方ですが、その前にまず「基本の構造」をルールに基づいて記述しなければいけません。初めてHTMLを学ばれる方は必ず受講してください。 この章は、「HTML入門 第1回」の続きの章です。初めてご覧になる方は、まずこの前の章から挑んで下さい。</p> <p> </p> <p><strong>(3) HTML入門 第3回</strong></p> <p>簡単なWebサイトの制作を通して、HTMLの基礎をマスターできる章です。 リストタグを使って箇条書きリストを作成したり、Webサイトレイアウトを組むためのタグの記述方法について学びます。 「HTML入門 第3回」の続きの章になりますので、初めてこの章をご覧になる方はまず「HTML入門 第1回」から順番に挑んで頂くことをオススメします。</p> <p> </p> <p><strong>(4)フォーム</strong></p> <p>文字の入力フォームやチェックボックス、ラジオボタンや送信ボタンなど、フォームを形成する上で必須のHTMLの書き方についてをレクチャーします。 初心者向けに解説していますが、やや難しいので、初めての方はまず「HTML入門」の章から取り組んで頂くことをオススメします。 この章をマスターすれば、実際に送信等の機能はつけれませんが、簡単なお問い合わせフォームを作れるようになるので、みなさん頑張って下さい!</p> <p> </p> <p><strong>(5)テーブル</strong></p> <p>テーブルタグを使って、表組みを作成する方法を初心者向けに解説しています。 ひと昔前までは、テーブルタグを使ってWebサイトのレイアウトを組んでいました。 Webサイトレイアウトを組む際のテーブルタグはNGなのですが、表組みを作成する上ではテーブルタグは今でもたくさん使用されています。</p> <p> </p> <p><strong>(6)テキストとリスト</strong></p> <p>テキストには、「見出し」「段落」だけでなく、「引用」「リンク」など 様々な意味を付与していく必要があります。文章の構造を意識して、正しいマークアップを行うためには「どんなHTMLタグがあるのか」をどれだけ知っているか、にかかっています。 ここでは、簡単な制作物を通して、様々な文字に関するHTMLタグについて学んでいただきます。</p> <p> </p> <p><strong>(7)リンクと画像・動画・オーディオ</strong></p> <p>テキストにリンクを貼ったり、画像や動画を表示させる方法などを学びます。 HTML最大の特徴は、ファイルとファイルをリンクさせる事です。ファイル同士をリンクさせる事で、クリックで指定のページへジャンプさせる事ができます。</p> <p> </p> <p><strong>(8)HTMLテクニック</strong></p> <p>リンクのクリックでメールソフトを起動させたり、ファイルをダウンロードさせたりといった、少し上級者向けのテクニックを学びます。 リンクを貼るタグを多く利用しますので、よくわからない方は先に「リンクと画像・動画・オーディオ」の章を学習してから、この章に挑んで頂くとより理解が深まります。</p> <p> </p> <p> </p> <p><strong>(9)要素のセクショニング</strong></p> <p>Webサイトをグループ化して、レイアウトを組むためのタグを記述する方法について学びます。 Webページは、ヘッダーやコンテンツ、フッターなど様々なセクションに分かれています。ただ単純にテキストをマークアップするだけでなく、文書構造に沿ってグルーピングしないと、レイアウトを組む事が出来ないので、注意が必要です。</p> </p> </div> <h3 class="heading__h3">Requirements</h3> <div class="copy"> <div class="listing"> <ul><li>PC</li><li>Sublime Text (テキストエディター)</li></ul> </div> </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"> <span class="expert-img" style="background-image:url('https://gogetterz-legacy-content.s3.ap-northeast-1.amazonaws.com/3121-819cb4237ddfceaa3e4dfdc66898f56f65f8a81c-17421115.png');"></span> </a> <figcaption> <div class="social-links"> <a href="https://gogetterz.com/expert/nestonline/notation-for-specified-transaction-law" class="nstl" target="_blank"></a> </div> </figcaption> </figure> </div> <div class="info-copy"> <h2 class="heading__h2">About Expert - nestonline</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">More Courses by nestonline</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.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">User Reviews <a href="https://gogetterz.com/login" class="button pink tinysize small caps no-hover right"><span class="icon-pencil"></span>Write a 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"> No Review(s) </div> <div class="review-load-more" ng-show="showLoadMore"> <a href="#" ng-click="loadMore()"> Load More <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">Add Review</h4> <nav class="review-stars"> <div class="label">Rate Course:</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="Add your review..." 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="Add" 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">Trailer</h3> <div class="video-container" id="course-promo-video-container"> Loading the player... <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"> Loading the player... </div> </div> </div> </div> </div> </div> <input id="addToHeading" name="addToHeading" type="hidden" value="Add to"> <input id="addedToHeading" name="addedToHeading" type="hidden" value="Added to"> <input id="keywordPlaceholder" name="keywordPlaceholder" type="hidden" value="Add some keywords to make it more visible..."> <input id="courseCategoryPlaceholder" name="courseCategoryPlaceholder" type="hidden" value="Add Category (max 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="https://uicommons.zendesk.com/hc/ja/categories/115000094087-%E3%82%A8%E3%82%AD%E3%82%B9%E3%83%91%E3%83%BC%E3%83%88" target="_blank">Expert Handbook</a></li> <li><a href="http://www.uicommons.co.jp" target="_blank">About Us</a></li> <li><a href="https://gogetterz.com/notation-for-specified-transaction-law">Notation for Specific Transaction Law</a></li> <li><a href="https://gogetterz.com/privacy-policy">Privacy Policy</a></li> </ul> </div> <div class="col m4 s12"> <div class="lang-select row mobile"> <div class="col s6 lang-title">Language</div> <div class="col s6"> <select class="custom-select" onchange="event.preventDefault();$('#switch-locale-form').submit();"> <option selected>EN</option> <option >JP</option> </select> </div> </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">Contact Us</a></li> <li><a href="https://gogetterz.com/terms-and-conditions">Terms and Conditions for Members</a></li> <li><a href="https://uicommons.zendesk.com/hc/ja/articles/115000528987-GoGetterz%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" target="_blank">About Points</a></li> </ul> </div> </div> <div class="copyrights">© 2019 | <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">Log In</a> </div> <div class="col s6"> <a href="https://gogetterz.com/register">Sign Up</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 = "QChH2V4SfOy8dccMaOutmxno6tbb05s9cGNeBEIS"; APP.FACEBOOK_APP_ID = "316529852394873"; APP.pusherID = "b44ae4e2f6f12f808bf1"; APP.userName = ""; APP.userID = ""; </script> <script src="https://gogetterz.com/desktop/js/vendor.js"></script> <script src="https://gogetterz.com/desktop/js/app.js"></script> <script src="https://gogetterz.com/desktop/js/site.js"></script> <script> new needShareDropdown(document.getElementById('share-button-1'), { // url to share // url: decodeURIComponent(window.location.href), // // // title to share title: $('#courseTitle').html(), // social networks networks: 'Mailto,Twitter,Facebook,GooglePlus,Reddit,Linkedin' }); </script> </body> </html>