webサイト制作などに使えるプログラミング言語「HTML」をご紹介！
難しそうに見えて 実は簡単!? プログラミングをゼロから学べるノウハウを一部公開！
SponsoredUdemy
仕事
ビジネスパーソンが収入を上げたり、自由な働き方を手に入れたりする手段として人気が増しているプログラミング。
しかし、「webサイト制作の副業で収入が上がった」といった成功談を聞きつつも、なんだか難しそうで一歩踏み出せない人も多いのではないでしょうか？
そこで今回は、プログラミングについて知る第一歩として、動画講座サービス「Udemy」で視聴できる有料コンテンツ『ウェブ開発入門完全攻略コース - プログラミングをはじめて学び創れる人へ！未経験から現場で使える開発スキルを習得！』より、webサイト制作などに使えるプログラミング言語「HTML」をご紹介！
講座の講師を務める中村祐太さんはUdemyで2万8000人以上の受講生を抱える人気講師です。
本格的にプログラミングを学びたい方はぜひUdemyの講座の受講も検討ください（現在お得なキャンペーンも実施中！）
しかし、「webサイト制作の副業で収入が上がった」といった成功談を聞きつつも、なんだか難しそうで一歩踏み出せない人も多いのではないでしょうか？
そこで今回は、プログラミングについて知る第一歩として、動画講座サービス「Udemy」で視聴できる有料コンテンツ『ウェブ開発入門完全攻略コース - プログラミングをはじめて学び創れる人へ！未経験から現場で使える開発スキルを習得！』より、webサイト制作などに使えるプログラミング言語「HTML」をご紹介！
講座の講師を務める中村祐太さんはUdemyで2万8000人以上の受講生を抱える人気講師です。
本格的にプログラミングを学びたい方はぜひUdemyの講座の受講も検討ください（現在お得なキャンペーンも実施中！）
この記事を通して、プログラミングとは一体どんなものなのか見ていきましょう！
『Udemy』とは、米国法人Udemy,Inc.が運営する世界5000万人以上が利用するオンライン学習プラットフォームです。
Udemyは、C to C（Consumer to Consumer）プラットフォームで世界中の「教えたい人（講師）」と「学びたい人（受講生）」をオンラインでつなげます。
最新のIT技術からビジネス、趣味まで幅広い領域の学びをオンラインで学ぶことができ、世界で約15万コース、5万7000名の講師が登録しています。
隙間時間にPC・スマートフォンなど好きなデバイスからのアクセスが可能で、学習期限はないため、必要なときに必要なだけ学習を進められます。
Udemyは、C to C（Consumer to Consumer）プラットフォームで世界中の「教えたい人（講師）」と「学びたい人（受講生）」をオンラインでつなげます。
最新のIT技術からビジネス、趣味まで幅広い領域の学びをオンラインで学ぶことができ、世界で約15万コース、5万7000名の講師が登録しています。
隙間時間にPC・スマートフォンなど好きなデバイスからのアクセスが可能で、学習期限はないため、必要なときに必要なだけ学習を進められます。
難しそうに見えて実は簡単！ HTMLの基本構造
HTML文章の基本構造はこのようになっています。
DOCTYPE宣言とは、文章がどんなプログラミング言語によって書かれているのかを宣言するものです。今回は、HTMLを宣言します。
HTML要素とは、HTML文章の最上位要素。
head要素とは、文章タイトル、文字コード、キーワード、説明文、関連ファイルなどの文章の基本情報です。
ここに記述されたものはブラウザに表示されず、ユーザーからは見えません。
最後に、body要素とはコンテンツを記述する部分です。ここに記述した内容が、ユーザーから見える部分です。
DOCTYPE宣言とは、文章がどんなプログラミング言語によって書かれているのかを宣言するものです。今回は、HTMLを宣言します。
HTML要素とは、HTML文章の最上位要素。
head要素とは、文章タイトル、文字コード、キーワード、説明文、関連ファイルなどの文章の基本情報です。
ここに記述されたものはブラウザに表示されず、ユーザーからは見えません。
最後に、body要素とはコンテンツを記述する部分です。ここに記述した内容が、ユーザーから見える部分です。
また、HTMLの基本構文は、「コンテンツ」を「開始タグ」「終了タグ」で囲む形になります。
たとえば、段落をつくる役割のある「pタグ」の開始タグと終了タグで、「初めてのHTML」というコンテンツを囲むような書き方をします。
HTMLの基本的なタグ
それでは、さっそくHTMLの基本的なタグについて見ていきましょう。
基本的なタグ① hタグ
代表的なタグは「見出し要素」と呼ばれる「hタグ」です。
「h1」から「h6」の6段階があり、右上のように数字が小さいほど重要度が高く文字サイズも大きくなっています。
基本的なタグ② pタグ
つづいて、先ほども登場した「pタグ」をご紹介します。
「p」とはパラグラフの頭文字で、右上のように段落を表すときに使います。
基本的なタグ③ brタグ
ちなみに、「pタグ」のなかで改行しても、ブラウザ上で改行はおこなわれません。
段落のなかで改行したいときは、左上のように「brタグ」を差し込みます。
段落のなかで改行したいときは、左上のように「brタグ」を差し込みます。
基本的なタグ④ strongタグ
重要な部分を強調したいときには「strongタグ」を使います。
強調したい文字列を「strongタグ」で囲むと、右上のように太く表示されます。
強調したい文字列を「strongタグ」で囲むと、右上のように太く表示されます。
基本的なタグ⑤ iタグ
「iタグ」を使うと、文字をイタリック表示にすることができます。
映画や書籍の名称や用語の定義を参照するなど、テキストを通常の文から抜き出すときに使いましょう。
映画や書籍の名称や用語の定義を参照するなど、テキストを通常の文から抜き出すときに使いましょう。
基本的なタグ⑥ aタグ
「aタグ」は文字列にリンクを差し込むときに使います。
まず、上画像のように文字列を「aタグ」で囲みます。
そして、「aタグ」のなかに「href=“URL”」を記載します。
その際、URLは「http://」から記入してください。
その際、URLは「http://」から記入してください。
左上のようにリンクが表示されました。
基本的なタグ⑦ リストタグ
最後にご紹介するのが「リストタグ」です。
箇条書きのようなリストをつくるときに使用します。
箇条書きのようなリストをつくるときに使用します。
まずは、リスト化したい文字列全体を「ulタグ」で囲みます。
そして、箇条書きしたい項目をそれぞれ「liタグ」で囲むと以下のようにリストが表示されます。
つづいて、順序つきのリストをつくってみましょう。
順序つきリストの場合は「olタグ」で文字列全体を囲みます。
それぞれの項目を「liタグ」で囲むのは先ほどと同じです。
それぞれの項目を「liタグ」で囲むのは先ほどと同じです。
プログラミングは意外と簡単!? 続きの動画講座で本格的にプログラミングを学ぼう
続きの動画講座では、演習用の資料をダウンロードし、動画を見ながら一緒に手を動かしてプログラミングを学ぶことができます。
さらに現在、対象の講座が1380円から受講できるキャンペーンを実施中なので、学び始めるなら今がチャンス！（※）
さらに現在、対象の講座が1380円から受講できるキャンペーンを実施中なので、学び始めるなら今がチャンス！（※）
（※）表示している価格は本キャンペーン期間中の価格で、期間終了後の価格は異なります。また、紹介した講座名や講座内容は3月17日時点のものです。あらかじめご了承ください。
期間：2020年3月16日～20日
価格：対象の講座が1380円～
表示している価格は本キャンペーン期間中の価格で、期間終了後の価格は異なります。また、紹介した講座名や講座内容は3月17日時点のものです。あらかじめご了承ください。
ぜひチェックしてみてください！
価格：対象の講座が1380円～
表示している価格は本キャンペーン期間中の価格で、期間終了後の価格は異なります。また、紹介した講座名や講座内容は3月17日時点のものです。あらかじめご了承ください。
ぜひチェックしてみてください！
プログラミングを学ぶ第一歩として、ぜひチェックしてみてください！
また、「Udemy」ではほかにも若手ビジネスパーソンが習得しておきたい必須スキルの動画講座が充実しているので、要チェックです！