HTMLとは？

こんな言語です

HTMLとは、HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、インターネット上のWebページを表現するために使われている言語です。

言語と言っても英語や日本語のような「ことば」ではなく、マークアップ言語と呼ばれる、情報をブロックのように組み立ててリンクでつなぎ、整理する書き方のことを言います。

マークアップ言語は、タグと呼ばれる＜　＞（カッコ）で情報に目印をつけて、コンピューターが理解しやすく記述されています。Webブラウザは、HTMLやCSSで書かれた文章を解読し、文字の配置、大きさやレイアウト、色、画像、リンクの設定などを行います。解読した結果、今あなたが閲覧しているようなWebサイトが表示されるのです。

Webサイト上で、右クリック→ソースを表示としてみてください。今見ているサイトのHTMLをみることができますよ。

HTMLの活用事例

実際に、どんなタグがあるのか、どんなふうに表示されるのか、いくつかサンプルをみてみましょう！

1.見出し

<h◯>のタグを使うと、文章の見出しを作ることができます。

<h1>見出しです</h1>
<h3>見出しです</h3>
内容です

表示結果です。

2.リンク

<a>のタグを使うと、文章にリンクを貼ることができます。

<a href="https://blog.codecamp.jp/">Tech2Goへのリンク</a>

表示結果です。

3.画像

<img>のタグを使うと、画像を挿入することができます。

<img src="neko_gazou_url.jpg">

(注)実際には、自分でアップロードした画像ファイルの場所を記載してくださいね。

表示結果です。

4.表

<table>のタグを使うと、表を作成することができます。

<table>
    <tr>
        <td></td><td>姉</td><td>弟</td>
    </tr>
    <tr>
        <td>好きなご飯</td><td>カレー</td><td>そうめん</td>     
    </tr>
    <tr>
        <td>好きな色</td><td>赤</td><td>緑</td>       
    </tr>
    <tr>
        <td>好きな動物</td><td>きりん</td><td>ねこ</td>       
    </tr>
</table>

表示結果です。

CSSってなに？

よくHTMLとセットで現れるCSSとは何でしょう？CSSとは、Cascading Style Sheets(カスケーディング・スタイル・シート）の略で、HTMLが文章や情報を分類整理するのに対し、表示の見た目を設定する役割を持つものです。例えば文字のサイズ、余白、色など、細かなデザインの設定ができる項目がたくさんあります。

現在、スマートフォンやタブレットの普及によるブラウザの多様化や、型にはまらない大胆なデザインのWebサイトの流行などにより、CSSの活用の幅がとても広がっています。HTMLを学習する際には、切っても切れない関係となっているのです。

HTMLでこんなことができる！

HTMLがわかると、以下のようなメリットがあります。

ブログパーツを編集できる

自分のWebサイトが作れる

制作ソフトがなくてもWebサイトが作れる

手持ちの環境で始められる

他のプログラミング言語の入り口にピッタリ

HTMLの勉強にオススメの書籍

デザインの学校 これからはじめる HTML & CSSの本

img	text
	デザインの学校 これからはじめる HTML & CSSの本 著者：千貫 りこ 出版社：技術評論社 出版年月：2017/5/26 単行本価格：2,138円 ページに記載されているタグや説明も少しずつなので、まったくの入門者も安心して読みすすめられる本です。HTMLを初めて書いてみよう、という方にオススメします。サンプルのCD-ROMもついているので、本の説明に沿って画像入りのホームページの作成にトライできます。

HTML5&CSS3レッスンブック

img	text
	HTML5&CSS3レッスンブック 著者：エビスコム 出版社：ソシム 出版年月：2013/5/24 単行本価格：2,592円 サンプルホームページを作りながらすすむ、たくさんの画像と詳しい説明のある初心者にもやさしい本です。最新のHTML5,CSS3についてきちんと解説もしてくれています。

いちばんよくわかるHTML5&CSS3デザインきちんと入門

img	text
	いちばんよくわかるHTML5&CSS3デザインきちんと入門 著者：狩野祐東 出版社：SBクリエイティブ 出版年月日：2016/10/27 単行本価格：2,678円 Kindle価格：2,678円 やさしい構成や平易な言葉づかいがうれしい、敷居の低い本です。スマートフォンでもPCでも閲覧できるWebページデザイン(レスポンシブWebデザイン)についても、基礎からきちんと学べる内容になっていますので、初心者からステップアップしても使える内容の本となっています。

これからWebをはじめる人のHTML＆CSS、JavaScriptのきほんのきほん

img	text
	これからWebをはじめる人のHTML＆CSS、JavaScriptのきほんのきほん 著者：たにぐちまこと 出版社：マイナビ出版 出版年月：2017/3/27 単行本価格：2,786円 Kindle価格：2,580円 JavaScriptの解説も含まれているので、HTMLとCSSのWebサイトから、少しステップアップしたい方にオススメします。動きのあるホームページを作ってみるもよし、Webエンジニアを目指す方の最初の一歩としてもおすすめです。

HTML勉強におすすめの無料学習サイト

ドットインストール

画像出典：ドットインストール

• こんな人にオススメ：コツコツ学習ができる方、細切れ時間しか取れない方
• 受講形態：動画講座の閲覧
• 有料プラン：あり(月額プラン)

おもに入門者向けの無料講座を307講座も公開しているドットインストールは、3分の学習動画で、スキマ時間に学習を進めていける便利なサイト。こまぎれ時間しか取れない忙しい方にもオススメです。入門者向け講座としておすすめなのは、HTML入門やCSS入門です。

中上級者向け講座は、月額料金制の有料プラン(980円/月)に加入すると閲覧できます。有料プランでは講義動画の文字起こしが閲覧できたり、授業で使われているソースコードがダウンロードできたりなど、より便利に利用できるようになっています。

CODEPREP

画像出典：CODEPREP

• こんな人にオススメ：HTMLに苦手意識がある方、どんどん使って覚えたい方
• 受講形態：スライド＆プログラミング実践
• 有料プラン：なし

CODEPREPは、プログラミングが楽しい！と誰もが思えるように、というコンセプトで作られた学習サイトです。穴埋め式の練習画面で、クイズのようにテンポよくHTMLやCSSが学べます。プログラムの醍醐味である、「手を動かしながら試してみる」が味わえるので飽きずにテンポよく学習が進められます。

schoo

画像出典：schoo

• こんな人にオススメ：じっくり学習を進めたい方、講義で学びたい方
• 受講形態：動画講義の閲覧
• 有料プラン：あり(プレミアムプラン、マスタープラン)

幅の広いスキルアップのための動画講座を放送しているschoo。スライド教材をベースに、1〜2時間じっくりと授業を聞く形式です。HTML,CSSの入門講座が現在無料公開されています。学習時間をしっかり確保できる方にオススメです。

中上級者向けの動画講座を全て閲覧したいなら、プレミアムプラン(980円/月, 1,980円/月）があります。授業資料がダウンロードできたりなど、より便利に学習を進められるようになっています。また、独学に不安がある、スクールに通う安心感が欲しいという方には、課題添削やメールサポートがつくWebデザイナーマスタープラン(99,800円)もあります。こちらはHTMLだけでなくCSS,JavaScript、Photoshopやillustratorなどを含んだ、Webデザイナーを目指す方向けの講座です。

progate

画像出典：progate

• こんな人にオススメ：実践的な技術を身に着けたい
• 受講形態：スライド＆プログラミング実践
• 有料プラン：あり（月額プラン）

スライドを見ながら、実際のプログラムをブラウザ上で書ける手軽さが魅力のprogate。先に紹介したサイトよりも少し難易度が高いので、より実践的な技術を身につけたい方におすすめです。

入門講座だけでなく、応用的な講座も受講したい場合には月額プラン(980円/月)に加入する必要があります。HTMLの応用講座をクリアすると、提携しているクラウドソーシングサイトクラウドワークスの仕事依頼に応募できるような仕組みがあり、学習を実際の仕事につなげたい方にもぴったりですね。

HTMLクリックリファレンス

画像出典：HTMLクイック・リファレンス

• こんな人にオススメ：どなたにも！
• 形態：辞典

あれ？あのタグ、どうやって書くんだっけ？と忘れたときや、こういう機能はあったかな？と調べたいときに便利なのが、こちらのリファレンス。入門者を脱出してからも、逆引き、プロパティの参照など使用頻度が高いです。ブックマークしておくと便利ですよ。

無料サービスで納得がいかないときは

無料サービスでは、わからない点や疑問に思ったことなどを自力で解決する必要があり、どうしても詰まってしまう場合が出てきます。

質問の仕方がわからない、周りにアドバイスをもらえる詳しい人がいない、などでお困りの場合は、有料のプランやサービスも検討されてみてはいかがでしょうか。上記にあげた無料学習サービスでも、有料プランではメールサポートなどで質問を受け付けてくれるものがあります。

そもそも質問の仕方がわからない！こんなこともわからないの？と周りに思われたくない！などとお悩みの方は、マンツーマン指導の学習サービスはいかがでしょうか。

こちらCodecampではオンラインのマンツーマンビデオレッスンを行っており、あなたの理解内容、進捗具合に合わせてレッスンが進みますので、安心して学習を進めることができます。例えば実践的なHTML、CSS、JavaScript、PHPなどが学べるWebマスターコースはレッスン30回の1ヶ月プランで148,000円です。

まとめ

高い本を買ったり、スクールに通っても、挫折してしまってはもったいないですよね。ひとまず最初は、無料のサイトや初心者向けの書籍でHTMLとは何か？をつかんでみましょう！

おすすめの学習の進め方は、こんな手順です。

1. 初心者向けの本や学習サイトで概要をつかむ
2. サンプルのHTMLを真似して書いて、Webサイトを作ってみる
3. 作ったサンプルをいじってみる(文字の大きさやリンク、画像など変更してみる)
4. 作りたいサンプルの載っているサイトや本を使い、様々な種類のサイトを作ってみる

ぜひ楽しんでHTMLを身につけてくださいね！