HTMLの基礎を初心者向けに徹底解説！元ぼっち大学生のフリーランスエンジニアがおすすめの本を紹介しつつ詳しく説明します
今回はプログラミング初心者のぼっち大学生のみなさんに向けて、大学ぼっち時代にプログラミングを学び始め、在学中にフリーランスエンジニアとして独立した経歴を持つ僕が、HTMLの基礎知識について、できるだけ分かりやすく解説していきます。初心者におすすめの本も何冊か紹介しますので、興味のあるぼっち大学生はぜひ一度読んでいってください。
たっちゃん
ぼっちユニバーシティの運営者です。
大学ぼっち時代にプログラミングを学び始め、在学中にフリーランスのWebエンジニアとして独立。
本業はWebアプリケーションやWebサイトの受託開発がメインですが、最近はFlutterにハマっています。
趣味はバックパッカー旅行と立ち飲み屋さん巡り。
現在は都内でひとり法人を経営しながら、現役のぼっち大学生のみなさんへお役立ち情報を発信しています。
0. はじめに
ぼっち大学生のみなさんこんにちは！今日はプログラミングに興味のあるぼっち大学生のみなさん向けに、HTMLの基礎的な知識を解説していきます。
Webサイト制作やWebアプリケーションの開発に興味のあるみなさんにとって、HTMLの知識は必須と言っても過言ではありません。
今回は、初めてHTMLを学ぶ人にもできるだけ分かりやすい内容にしていますので、興味のあるぼっち大学生はぜひ読んでいってください。
また、こちらの記事では、CSSについて解説をしていますので、併せて読んでみていただけたら嬉しいです。
1. HTMLの基本を学ぼう
まずはじめに、この章ではHTMLの基本について解説していきます。
HTMLが初めてのぼっち大学生でも心配無用です！
もしよく分からないところがあったら、何度も見返しながら読んでみてくださいね。
1-1. この記事の目的
この記事の目的は、HTMLの基本を知りたいぼっち大学生のみなさんに、なるべく分かりやすい表現でHTMLの基礎を教えることです。
せっかくプログラミングに興味を持ったのですから、ぼっち大学生のみなさんはぜひ一緒に楽しく学んでいただいて、最後には簡単なWebページが作れるようになっちゃいましょう！
1-2. HTMLって何？
HTMLは、HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、Webページを作るための言語です。
パソコンやスマホで見るWebサイトは、HTMLという言語で書かれています。
例えば、下記のようなコードがHTMLになります。
<!DOCTYPE html>
<html>
<head>
<title>私のWebページ</title>
</head>
<body>
<h1>こんにちは！</h1>
<p>これは私のWebページです。</p>
</body>
</html>
1-3. HTMLの役割
HTMLの役割は、Webページの構造を作ることです。
文章や画像、リンクなど、Webページに表示したいものを、HTMLのタグ（指示を書く印）を使って並べていきます。
例えば、 <h1> タグは大きな見出しを作り、<p> タグは文章の段落を作ります。
<h1>大きな見出し</h1>
<p>ここに文章が入ります。</p>
HTMLタグはこの他にもたくさん種類があるので、最初は戸惑ってしまうかもしれませんが、最初から全てのタグを覚える必要はありません。
まずはHTMLの基礎をしっかりと固めながら、自分のペースでタグの種類を覚えていきましょう。
2. HTMLの基本を知ろう
ぼっち大学生のみなさんがHTMLを学ぶにあたって、まずはHTMLの基本構造を覚えることが大切です。
HTMLの基本構造を覚えることで、後々自分でWebページを作るときに、どこに何を書くべきかが分かるようになります。
2-1. 基本構造を覚えよう
HTMLには、決まった形があります。
一旦それを覚えてしまえば、ぼっち大学生のみなさんが自分でWebページを作るときに、スムーズに進めることが可能になります。
2-1-1. DOCTYPE宣言
HTMLファイルの一番最初に書くのが、DOCTYPE宣言（ドキュメントタイプ宣言）です。
これは、パソコンやスマホに、このファイルがHTMLだと教えてあげるためのものです。
<!DOCTYPE html>2-1-2. htmlタグ
DOCTYPE宣言の次に、<html> タグを書きます。
<html></html> タグは、HTMLの始まりと終わりを示します。
最後に </html> を書いて閉じます。
<!DOCTYPE html>
<html>
</html>2-1-3. headタグとbodyタグ
<html> タグの中には、<head> タグと <body> タグが入ります。
<head> タグは、Webページの情報（タイトルや文字コードなど）を書くところで、 <body> タグは、Webページに表示する内容（文章や画像など）を書くところです。
<!DOCTYPE html>
<html>
<head>
<title>私のWebページ</title>
</head>
<body>
</body>
</html>
2-2. タグと属性ってなに？
タグと属性は、HTMLの大切な要素です。
タグは、Webページの構造を作る指示を書くもので、属性は、その指示をどのように実行するかを定めるものです。
2-2-1. タグの役割
タグは、Webページに表示するものをどのように並べるかを決める役割があります。
例えば、 <h1> タグは大きな見出しを作り、 <p> タグは文章の段落を作ります。
<h1>大きな見出し</h1>
<p>ここに文章が入ります。</p>
2-2-2. 属性の役割
属性は、タグの動作を調整する役割があります。
例えば、 <img> タグで画像を表示するとき、src属性に画像の場所を指定します。
また、 <a> タグでリンクを作るとき、 href 属性にリンク先のURLを指定します。
<img src="画像の場所.jpg" alt="画像の説明">
<a href="リンク先のURL">ここをクリックするとリンク先に移動します</a>
2-2-3. よく使われるタグと属性
HTMLにはたくさんのタグと属性がありますが、ここではよく使われるものをいくつか紹介します。
<h1>～<h6>: 見出しを作るタグ。<h1>が一番大きく、<h6>が一番小さい見出しです。<p>: 段落を作るタグ。文章を書くときに使います。<ul>: 点字リストを作るタグ。<li>タグと一緒に使います。<ol>: 順序付きリストを作るタグ。<li>タグと一緒に使います。<li>: リストの項目を作るタグ。<ul>や<ol>タグの中で使います。<img>: 画像を表示するタグ。src属性で画像の場所を指定し、alt属性で画像の説明を書きます。<a>: リンクを作るタグ。href属性でリンク先のURLを指定します。<table>: テーブル（表）を作るタグ。<tr>（行）、<th>（見出しセル）、<td>（データセル）タグと一緒に使います。
これらのタグと属性を使って、自分だけのWebページを作成してみましょう！
3. テキストをきれいに見せる方法
Webページに書く文章を、きれいに見せる方法を学んでいきましょう！
文字の装飾や段落、改行の仕方を覚えることで、ぼっち大学生のみなさんは、見やすくて素敵なWebページが作れるようになります。
3-1. 色々な文字の装飾
文字には、いろいろな装飾をすることができます。
太字や斜体、下線など、どんな装飾があるか見ていきましょう。
3-1-1. 太字・斜体・下線
- 太字:
<strong>タグや<b>タグで囲むと、文字が太くなります。 - 斜体:
<em>タグや<i>タグで囲むと、文字が斜めになります。 - 下線:
<u>タグで囲むと、文字に下線が引かれます。
<strong>太字になります</strong>
<em>斜体になります</em>
<u>下線が引かれます</u>
3-1-2. 文字サイズと文字色
<span> タグと style 属性を使うと、文字サイズや文字色を変えることができます。
<span style="font-size: 24px; color: red;">大きくて赤い文字です</span>3-2. 段落や改行の仕方
文章を書くとき、段落や改行を使って、見やすく整えることが大切です。
どのように段落や改行を作るか見ていきましょう。
3-2-1. 段落の作成
段落は、 <p> タグで作ることができます。
<p> タグで囲まれた文章は、自動的に改行されて新しい段落が始まります。
<p>これは1つ目の段落です。</p>
<p>これは2つ目の段落です。</p>
3-2-2. 改行の方法
文章の途中で改行したいときは、 <br> タグを使います。
<br> タグを置くところで、改行されます。
<p>これは1行目です。<br>これは2行目です。</p>これらの方法を使って、自分のWebページの文章をきれいに整えましょう！
4. ページに彩りを加えよう
続いては、Webページに彩りを加える方法を学びましょう。
画像を表示したり、リンクを作ったりすることで、ページの情報量が増えて、より魅力的になります。
4-1. 画像を表示しよう
Webページに画像を表示する方法を見ていきましょう。
画像をうまく使うことで、ページが華やかになります。
4-1-1. 画像ファイルの準備
まず、表示したい画像ファイルを用意します。
画像ファイルは、JPEGやPNG、GIFなどの形式があります。
用意した画像ファイルを、Webページと同じフォルダに入れておくと、簡単に表示できます。
4-1-2. imgタグの使い方
画像を表示するには、 <img> タグを使います。 src 属性に画像ファイルの場所を指定し、 alt 属性に画像の説明を書きます。
<img src="画像ファイルの場所.jpg" alt="画像の説明">4-1-3. 画像サイズの調整
画像の大きさを変えたいときは、 width 属性と height 属性を使います。
数字を入れると、その大きさになります。
<img src="画像ファイルの場所.jpg" alt="画像の説明" width="200" height="100">4-2. リンクを作ろう
次は、Webページにリンクを作る方法を学びましょう。
リンクを作ることで、他のページへの移動が簡単にできます。
4-2-1. aタグの使い方
リンクを作るには、 <a> タグを使います。
<a> タグで囲むと、その部分がリンクになります。
<a>ここをクリック</a>4-2-2. リンク先の設定方法
リンク先を設定するには、 href 属性を使います。
href 属性にリンク先のURLを指定すると、クリックするとそのURLへ移動します。
<a href="リンク先のURL">ここをクリックするとリンク先に移動します</a>4-2-3. 別タブで開くリンクの作成
リンクをクリックしたときに、新しいタブで開くようにしたい場合は、 target 属性を使います。
target="_blank" と書くと、新しいタブでリンク先が開きます。
<a href="リンク先のURL" target="_blank">ここをクリックすると新しいタブでリンク先に移動します</a>5. 情報を整理する方法を学ぼう
この章では、Webページの情報を整理する方法を学んでいきます。
具体的には、リストやテーブルを使うことで、Webページの情報を見やすくすることができます。
それでは、簡単な方法から見ていきましょう。
5-1. リストを使ってみよう
リストは、順番があるものや、順番がないものに使えます。
どんなリストがあるか見ていきましょう。
5-1-1. 順序付きリスト
順序付きリストは、 <ol> タグと <li> タグを使って作ります。
<ol> タグで囲むと、リストが始まります。
<li> タグで囲むと、リストの項目ができます。
<ol>
<li>一番目の項目</li>
<li>二番目の項目</li>
<li>三番目の項目</li>
</ol>
5-1-2. 点字リスト
点字リストは、 <ul> タグと <li> タグを使って作ります。
<ul> タグで囲むと、リストが始まります。
<li> タグで囲むと、リストの項目ができます。
<ul>
<li>リストの項目1</li>
<li>リストの項目2</li>
<li>リストの項目3</li>
</ul>
5-2. テーブルでデータを整理しよう
テーブルを使って、データを整理する方法を学びましょう。
表を作ることで、情報が見やすくなります。
5-2-1. テーブルの基本構造
テーブルは、 <table> タグ、 <tr> タグ、 <th> タグ、 <td> タグを使って作ります。
<table> タグで囲むと、テーブルが始まります。
<tr> タグで囲むと、行ができます。
<th> タグで囲むと、見出しのセルができます。
<td> タグで囲むと、データのセルができます。
<table>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
<tr>
<td>データ3</td>
<td>データ4</td>
</tr>
</table>
5-2-2. 表のデザインを整える
表のデザインを整えるには、 border 属性や style 属性を使ってみましょう。
border 属性で表の線の太さを指定できます。
style 属性で、色や幅など、もっと細かいデザインを指定できます。
<table border="1">
<tr>
<th style="background-color: lightblue;">見出し1</th>
<th style="background-color: lightblue;">見出し2</th>
</tr>
<tr>
<td style="width: 100px;">データ1</td>
<td style="width: 200px;">データ2</td>
</tr>
<tr>
<td>データ3</td>
<td>データ4</td>
</tr>
</table>
これで、情報を整理する方法を学びました。
リストやテーブルを使って、情報が見やすいWebページを作りましょう。
これまで学んだことを活用して、自分だけの素敵なWebページを作成してください。
これからもどんどんHTMLの知識を増やしていきましょう！
6. お問い合わせフォームを作ろう
この章では、Webページでシンプルなお問い合わせフォームを作る方法を学びます。
フォームを使うことで、ぼっち大学生のみなさんのサイトにアクセスした人からのメッセージや、意見などを受け取ることができるようになります。
6-1. フォームの基本
フォームを作るには、 <form> タグ、 <label> タグ、 <input> タグが必要です。
それぞれのタグの使い方を見ていきましょう。
6-1-1. formタグの使い方
<form> タグで囲むと、フォームが始まります。
action 属性で、フォームが送信されたときにどこにデータを送るかを指定します。
<form action="お問い合わせ先のURL">
<!-- ここにフォームの内容を書きます -->
</form>
6-1-2. labelタグとinputタグ
<label> タグは、入力欄の説明文を表示します。
<input> タグは、入力欄やボタンを作ります。
<label for="name">お名前：</label>
<input type="text" id="name">
6-2. 入力欄やボタンの設置
さまざまな入力欄やボタンを設置して、お問い合わせフォームを充実させましょう。
6-2-1. テキスト入力欄
テキスト入力欄は、 <input type="text"> で作ります。
<label for="email">メールアドレス：</label>
<input type="text" id="email">
6-2-2. ラジオボタンとチェックボックス
ラジオボタンは、 <input type="radio"> で作ります。
チェックボックスは、 <input type="checkbox"> で作ります。
<label>性別：</label>
<input type="radio" id="male" name="gender" value="男性">
<label for="male">男性</label>
<input type="radio" id="female" name="gender" value="女性">
<label for="female">女性</label>
<label for="newsletter">ニュースレターを受け取る</label>
<input type="checkbox" id="newsletter">
6-2-3. 送信ボタンの設置
送信ボタンは、 <input type="submit"> で作ります。
これで、お問い合わせフォームの作成ができました。
お疲れ様でした！
7. プログラミング初心者のぼっち大学生におすすめのHTML本を紹介します
この章では、HTMLを学ぶぼっち大学生のみなさんに、ぜひおすすめしたい書籍を紹介していきます。
HTMLを取り扱った書籍はたくさん存在しますが、今回は現役のWebエンジニア目線で、初学者のみなさんにピッタリな本を揃えてみましたので、ぜひ参考にしていただけたらと思います。
7-1. 1冊ですべて身につくHTML＆CSSとWebデザイン入門講座
1冊目に紹介するのは、「1冊ですべて身につくHTML＆CSSとWebデザイン入門講座」です！
著者のManaさんは、Web制作者の方々は必ずお世話になっているであろう人気Webサイト、Webクリエイターボックスの運営者としても有名なお方。
また、この「1冊ですべて身につくHTML＆CSSとWebデザイン入門講座」、発売されたのは2019年の3月なのですが、それから4年連続で売上1位を誇っているというのですから驚きです。
これだけでも、いかに本書の内容が分かりやすいか、そして初心者に優しい内容であるかということが伝わるかと思います。
「1冊ですべて身につくHTML＆CSSとWebデザイン入門講座」は、
- これからWebサイトを作り始める初心者
- HTMLとCSSを基本から学びたい人
- 美しいデザインのWebサイトを作りたい人
- Webの最新技術を学びたい人
全てに文句なしでおすすめできる素晴らしい入門書となっておりますので、ぼっち大学生のみなさんも、この機会にぜひチェックしてみてくださいね。
8. まとめ
今回は、プログラミング初心者のぼっち大学生向けに、HTMLの基礎知識を解説させていただきました。
今回紹介したHTMLは、これからぼっち大学生のみなさんがWebサイト制作やWebアプリケーション開発をしようと考えた場合、絶対に必要となるスキルです。
プログラミングを学ぶぼっち大学生のみなさんは、ぜひこの記事の内容を参考にしていただき、HTMLの知識をしっかりと身につけていって欲しいと思います。
最後に、これからHTMLについて本格的に学んでみようと考えるぼっち大学生のみなさんに、おすすめのプログラミングスクールを紹介させていただきます。
ぼっち大学生のみなさんは、サブスク型プログラミングスクールのSAMURAI TERAKOYA（侍テラコヤ）であれば、飲み会1回分ほどの費用で、HTMLを効率的かつ確実に学ぶことが可能です！
SAMURAI TERAKOYA（侍テラコヤ）の詳細については、こちらの記事で詳しく解説していますが、
- 40種類以上に及ぶ学び放題の教材
- 平均回答スピード30分以内のQ&A掲示板
- 月1回〜の現役エンジニアとのオンラインレッスン
- プログラミング学習を継続できる学習ログ
を、月額2,980円〜という破格の料金で利用することができます。
もちろん、独学でHTMLの知識を習得することは不可能ではありません。
しかし、実際に業務でHTMLを毎日のように使用するエンジニアのメンターに、HTMLについて直接質問ができる環境で学んだほうが、より実践的な知識が身に付きますし、みなさんのHTMLを習得するスピードは圧倒的に速くなります。
プログラミングスクールで学ぶことも視野に入れていたが、その費用面がネックとなり、なかなかプログラミングの学習に本格的に手を付けられなかったというぼっち大学生のみなさんは、ぜひ一度SAMURAI TERAKOYA（侍テラコヤ）に無料で相談をしてみてはいかがでしょうか？
