「プログラミングを学んでみたい」「自分でブログやWebページを作ってみたい」という人は、HTMLを学ぶのがおすすめです。プログラミングをするための環境の準備が簡単なので、初心者でも気軽に始められます。
この記事では、HTMLの基礎やおすすめの学習方法、さらにWebページを作成するための手順を初心者の方にもわかりやすいように解説します。
この記事の目次
HTMLとは
HTML（Hyper Text Markup Language：えいちてぃーえむえる）とは、ホームページやブログなどのWebページの構造（土台）を作るためのマークアップ言語です。
例えば本や雑誌は、表紙、タイトル、目次、見出し、本文など複数の要素から成り立っており、それぞれに役割があります。同じようにWebページにもタイトルや見出しがあり、それらはHTMLの「タグ」と呼ばれる文字列で定義されています。
HTMLの主なタグについては、この記事の後半で詳しく紹介しましょう。
HTMLの役割
記事の冒頭でHTMLはプログラミングのマークアップ言語であると解説しました。マークアップ言語とは文字通り、文字や画像にマーク（印）をつけるための言語のことです。
Webページのタイトルや見出し、画像、文字などをタグでマークすることで、Webページの構成と各要素がWebページ上でどのような役割を持っているのかを明確にします。これによりGoogleなどの検索エンジンはWebページの内容をより正確に理解できます。
つまりブログやホームページを検索エンジンで上位に表示させたい場合、適切にHTMLを利用することが大切というわけです。
Webページを作るために必要なもの
HTMLだけでもWebページは作ることはできますが、それでは色や動きのない読みづらいWebページになってしまいます。
例えばこのブログは大切な部分を赤字で強調したり、リンクにカーソルを当てると色を変化させたりして、読みやすいようにしています。このようにWebページの見た目や読みやすさを向上するにはCSS、JavaScriptが必要です。
CSS
CSS（Cascading Style Sheets：カスケーディング・スタイル・シート）とはWebページ内の文字の色やサイズ、装飾などを変えるためのスタイルシート言語です。ブログなどのWebサイトを自分で作ってみたい人は、HTMLにあわせてCSSも学習する必要があります。
CSSについてはこちらの記事で詳しく解説しているので、ぜひあわせてご参考ください。
CSSとは何か？できることや学習に役立つサイト・書籍を紹介JavaScript
Webページの骨組みを作るHTML、色やレイアウトを整えるCSSの他に必要なのが、Webページに動きをつけるJavaScript（ジャバスクリプト）です。
例えばWebページの会員登録画面でIDやパスワードを入力した時「このIDはすでに利用されています」「パスワードは◯文字以上で設定してください」といったメッセージが出てきたことはありませんか？
これらはJavaScriptで実装されています。つまりJavaScriptはユーザーが行った操作に応じて画面に画像やメッセージを表示したり、文字の色を変化させたりといった「動き」を実現するのです。
JavaScriptも現在のWeb制作には欠かせない技術の1つ。詳しくはこちらの記事で解説しているので、ぜひあわせてご参考ください。
JavaScriptでできること・できないこととは？初心者におすすめの学習方法も解説初心者におすすめのHTMLの学習方法
HTMLはプログラミング言語の中でも初心者向けの言語なので、パソコンや本などで独学することも可能です。
ここからは初心者におすすめのHTML学習方法についてメリットやデメリット、どのような人におすすめなのかを解説します。なお各方法の詳しい学習方法（ツール、本など）はこちらの記事で詳しく解説しています。
HTML勉強法おすすめ10選！無料学習サイト・アプリ・本を紹介オンラインコース
プログラミング人気の高まりにより、最近は無料・有料問わず様々なオンラインコンテンツが登場しています。特にHTML、CSS、JavaScriptは初心者向けの言語であることから、多くのコンテンツが無料で視聴可能です。
オンラインコースでHTMLを学ぶメリット・デメリットはこちらです。
【メリット】
- 無料で気軽に学べる
- 空いた時間を活用できる
- 自分のペースで学べる
【デメリット】
- 実践が少ないので、スキルが身につきづらい
- スケジュール、モチベーション管理を自分で行う必要がある
- 無料の場合、コンテンツの内容が限定されている
- 疑問があった時に質問できない
オンラインコースはプログラミングに触れてみたい人や気軽に学んでみたい人におすすめです。もっと深く学びたい、実践的なスキルも身につけたいと思ったら、有料コースに切り替えることも可能。
オンライン講座の他にはYouTubeでもHTMLなどのプログラミング解説をしている動画が多くあるので、お気に入りのYouTuberを探してみてはどうでしょうか。
本・参考書
本や参考書を使って学ぶ方法もあります。オンラインコースと同じく、複数の出版社から多数販売されています。本によって内容や解説の仕方が異なるので、メインとサブといったように複数本で学習する方法やオンラインコースを併用する方法がおすすめです。
また「どうせなら色んな情報が載っていたほうがお得」と分厚い本を買ってしまうと、内容が難しくて初心者には理解できなかったり、なかなか読み終わらなかったりして挫折してしまう可能性も。
初心者向けの軽めの本から始め、中級～上級と徐々にレベルアップしていくと良いでしょう。
【メリット】
- 移動時間などを活用して学べる
- パソコンがなくても学習を進められる
- 自分のペースで学べる
【デメリット】
- スキルを身につけるためには、自主的に実践の機会を設ける必要がある
- スケジュール、モチベーション管理を自分で行う必要がある
- 疑問があった時に質問できない
アプリ
もっと気軽に空き時間で学習したい場合はスマホアプリがおすすめ。ただしアプリで学べる範囲は限られているので、教養としてプログラミングの基礎を知りたい人、ちょっと興味があって試してみたい人向けと言えるでしょう。
【メリット】
- 移動時間などを活用して学べる
- パソコンがなくても学習を進められる
- 自分のペースで学べる
【デメリット】
- 学べる範囲が基礎知識に限定される
- スキルを身につけるためには、自主的に実践の機会を設ける必要がある
勉強会
外部の勉強会に参加すると、本やオンラインコースでは学べない実践的なプログラミング手法を習得することも可能です。東京や大阪などの都市部で開催されることが多いですが、最近ではオンライン開催も多いので地方に住んでいる人でも参加しやすくなっています。
【メリット】
- 現場で使える実践スキルが身につく
- 疑問点を先輩エンジニアに質問できる
- 学習者同士で情報交換ができる
- 集中して学べる
【デメリット】
- 基礎知識を持っていることが前提の勉強会がある
- 多くの場合が有料である
- 時間の制約がある
プログラミングには理論として参考書などに載っているルールの他に、システム開発現場で暗黙の了解として使われているルールもあります。後者の方はオンラインコースなどの学習では学びづらいので、勉強会に参加して実践的な知識を得るのがおすすめです。
HTMLでWebページを作るための3STEP
HTMLに限らずプログラミング学習の王道は、自分で手を動かしながら知識やスキルを習得していく方法です。
HTMLの場合はオンラインコースなどで基礎知識を理解したら自分でWebページを作ってみましょう。
CSS、JavaScriptも使った本格的なWebページは少し難易度が上がりますが、HTMLだけのWebページは比較的簡単に、気軽にできます。
【STEP1】開発環境を整える
まずはHTMLでWebページを作るための環境を整えます。と言っても必要なのはパソコン、インターネット、テキストエディタだけ。
テキストエディタとはいわゆる「メモ帳」で、ここにHTMLを記述していきます。Windowsなどに標準インストールされているメモ帳でも可能ですが、プログラミングに便利な機能が搭載されているテキストエディタを使うのがおすすめです。
人気のツールはこちらです。たいていのテキストエディタが無料なので、いくつか試してみて使いやすいものを選びましょう。
- Visual Studio Code
- Atom
- サクラエディタ
この記事もオススメ
【STEP2】HTMLファイルを作成する
ツールの準備ができたら、早速ファイルを作成しHTMLを書いていきましょう。テキストエディタでファイルを新規作成し、保存します。ファイルの拡張子は「.html」にします。
<!DOCTYPE html>でHTMLファイルであることを宣言
HTMLを記述する際には、文頭に<!DOCTYPE html>と書きましょう。こうすることで「このファイルに書かれているのはHTMLである」と宣言されます。
この記述がないとWebブラウザがファイルをHTMLとして認識してくれないので、忘れずに書いておきましょう。
【STEP3】Webにアップロードする
HTMLが完成したら、結果を確認しましょう。個人で結果を確認するだけであれば、作成したHTMLファイルをブラウザにドラッグするだけで見られます。
ブログなどインターネットで公開したい場合には、FTPソフトを使ってWebサーバーにアップロードする必要があります。
HTMLの基本知識
プログラミング言語は日本や英語と同じく「言語」と呼ばれるように、記述する際には文法、ルールがあります。最後にHTMLの基礎となる知識を解説します。
なお前述した通りプログラミングは実際に手を動かしながら体で覚えていくことが大切です。この時点ですべての知識を暗記する必要はありませんので、まずは理解することを意識して読み進めてください。
<head>と<body>
Webページは大きく「head」と「body」の2つの要素から構成されており、それぞれ次のような役割があります。
- <head>要素：Webページの設定や基本的な情報を記述する。Webブラウザに表示されない。
- <body>要素：見出しや本文などのユーザーに見てもらうためのコンテンツを記述する。Webブラウザに表示される。
タグ・要素
「タグ」とはHTMLで見出しや文字、画像、リンクなどを挟むための記号です。タグには「開始タグ」と「終了タグ」があり、用途にあわせて適切なタグを選ぶ必要があります。
開始タグから終了タグまでの塊を「要素」と呼び、タグで挟むことでWebページはそれぞれの要素を正しく認識できます。
主なタグは次の通りです。
- pタグ：段落
- hタグ：見出し
- imgタグ： 画像
- aタグ：リンク
- olタグ, ulタグ：リスト
これらのタグはWebページを構造を決定するためのもの。これ以外にも構造には関係しないが、可読性や利便性を高めるため使われる汎用的なタグ（divタグ,spanタグ）もあります。
タグは利用頻度が高いものから順番に覚えていきましょう。主なタグについてはこちらの記事で紹介しています。
【プログラミング初心者必見】初めに覚えるべきHTMLタグ15選！初心者向けHTML入門 まとめ
HTMLは初心者にもやさしいプログラミング言語の1つです。最初はプログラミングの概念や仕組みを理解するのが大変かもしれませんが、理解していくうちにプログラミングの楽しさに気づいていくはずです。この記事を参考に早速HTML学習を始めていきましょう。
【転職実績No.1👑】年収アップと自由な働き方を実現したいならITエンジニア転職！
こんな希望はありませんか？
- もっと年収アップできる仕事がしたい
- 時間や場所に縛られず自由に働きたい
- 専門スキルで手に職をつけたい
という方は、ITエンジニア転職がおすすめです
テックキャンプなら、完全未経験🔰でも大丈夫！プログラミング学習〜エンジニア転職支援、副業案件獲得まで個別にサポートします👌
さらに給付金活用で受講料最大70%OFF！※
※2020年12月時点 3.テックキャンプ エンジニア転職は経済産業省の第四次産業革命スキル習得講座の認定も受けており、条件を満たすことで支払った受講料の最大70％(最大56万円)が給付金として支給されます
興味がある方は、以下よりIT転職のプロにキャリアのお悩み相談から始めてみましょう！
