HTMLとは
HTMLとは、「HyperText Markup Language(ハイパーテキストマークアップランゲージ)」の略で、Webページを作成するための基礎となるマークアップ言語です。ほぼ全てのWebサイトはHTMLで書かれています。世界中のサイトはHTMLで書かれており、HTML = ページ情報と捉えてもらってOKです。
マークアップ(言語)って？
Webサイトでは、タイトルや見出しが大文字や太文字になっていたり、画像があったりと色々なものが配置されています。このタイトルや見出しなどをHTMLで設定するために「タグ」というものを使います。例えば、サイト上に「タイトル！」という見出しをつけたい場合は
html
<h1>タイトル！</h1>とHTMLに書くと見出しとして「タイトル！」という文字が表示されます。 このように、サイトの要素の情報をコンピューターが正しく認識できるようにすることをマークアップといいます。 今回のHTMLだと、タグを用いて各要素に意味付けをしていき、コンピューターが正しく認識させていくことで結果的にWebサイトが表示されることができる、ということになります。
HTMLの開発準備
HTMLで開発するために必要なものは、以下の二つです。
- (テキスト)エディタ
- ブラウザ
流れとしては、(テキスト)エディタでHTMLをあれやこれやして、そのHTMLをブラウザで開いて確認する、です。
(テキスト)エディタは、文字通り「文章を編集できるソフト(アプリ)」が使えればよく、デフォルトでPCに入っている「メモ帳」でも正直問題ないのですが(ちょっと使いずらいので...)、今回はVisual Studio Codeを使っていきます。
ブラウザも正直なんでもいいです(笑)。ブラウザは、インターネットでWebサイトなどを閲覧するために使われるソフトの事で、よく皆さんが使っているものとしては、デフォルトで入っているMicrosoft Edge,safariやGoogle Cromeかなと思います。 今回はdevツール(開発時に使える便利なモノ)が揃っているGoogle Cromeを使っていきます。
HTMLの基礎知識
さっそくHTMLを書いて覚えていこう！とその前に、先ほどのタグの部分をちょっと深掘り、HTML全体のイメージを掴んでいただきたいと思います。 まず、以下のようなWebサイトのページを作るとしましょう。
見出し:恋は突然に。 内容:「いっけな〜い、遅刻遅刻！」 私、はなこ！高校1年生よ！ ちょっとドジだけど、元気が取り柄の女の子！...
今回は「恋は突然に。」という見出しと、その内容の段落があります。HTMLは、このような「見出し」や「段落」といった文章構造をタグを使って記述する必要があります。イメージとしては以下です。
html
<見出し開始>恋は突然に。<見出し終了>
<段落開始>
「いっけな〜い、遅刻遅刻！」
私、はなこ！高校1年生よ！
ちょっとドジだけど、元気が取り柄の女の子！...
<段落終了>このように、要素をタグで挟むことでPCが認識できるようになります。「ここからここまでが見出しです！」とPCに伝えるためですね。でも実際にHTMLで↑のように書いても動きません。この書き方は人間が理解できているだけでPCが理解できる状態ではないからです。
ではちゃんとPCが認識できるようにHTMLで書くと以下のようになります。
html
<h1>恋は突然に。</h1>
<p>
「いっけな〜い、遅刻遅刻！」
私、はなこ！高校1年生よ！
ちょっとドジだけど、元気が取り柄の女の子！...
</p>↑をみてみると、見出しはh1(heading1の略)で段落はp(paragraphの略)となっています。また、タグは<>で囲んで使用し、終了のタグは</タグ名>となります。
HTMLの基本構造
HTMLを書いていくにあたり、事前に決まっているルールに従って記述する必要があります。HTMLの基本的な構造として、まずこれから書くものがHTMLに関連するものであることを宣言するために使われるDOCTYPEを記述し、その下にHTMLを宣言してから中身を書いていきます。 ↓実際に書いてみます。
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
<p>内容</p>
</body>
</html>ここで出てきた各要素についての解説をしていきます。
DOCTYPE
この文書(ファイル)がHTMLやXHTMLのどのバージョンで作成されているかを宣言するものです。Document Type Definition、DTD、文書型宣言とも言われます。 今回の場合、このWebサイトがHTML5(HTMLの最新バージョン)で作成されたものである事を宣言しています。ちょっと変わった特殊なタグで、一番最初に記述する必要があります。 ※このDOCTYPE宣言が無くてもWebページとして表示できますが、昔のホームページと認識されてデザインやレイアウトが崩れる可能性があります。 ※DOCTYPE宣言の記載なしだと互換モードになります。詳細は割愛します。
HTMLタグ
この文書がHTMLで作成されている事を宣言するために使うもので、DOCTYPEは書かなくても問題はないがこのHTMLタグは記載する必要があります。 このHTMLタグの中に、どんなサイトなのか、どんな要素があるのかなどのサイト全ての情報が入る大枠のタグとなります。
headタグ
検索エンジン(Googleとか)に伝える情報や、利用するファイルなどを指定する時に使用します。google検索時にこのサイトはこんなことを書いてますよ、という情報を伝えたり、「このファイルの他にも■■ファイルも読み込みます」というのをPCに伝えるために使用します。
先ほどの例でいうと、titleタグでページのタイトルを「タイトル」と設定したり、metaタグを使って文字化け対策を行なっています。
※metaタグのように終了部分(</meta>)が必要ないタグ(自己終了タグ)が存在します。
bodyタグ
実際にユーザーに見える情報を記述する場所です。ページの内容をここに書いていきます。 見出し(h1)や段落(p)などはここに書いていきます。
HTMLを実際に使ってみよう
HTMLのイメージがつかめたところで、実際にHTMLを書いてブラウザで表示してみましょう！ まずは好きな場所にhtmlフォルダーを準備してください。
※例ではデスクトップのprofactフォルダ→htmlフォルダとなっています。 デスクトップ |- profact |- html
作成したらそれをVS Code(Visual Studio Code)で開きたいので、そのファイルをVS Codeにドラック&ドロップします。
開いたら、このフォルダの中に新しいHTMLファイル(index.html)を作成します。
- 左バーの紙が2枚重なっているアイコンを押し(エクスプローラー(ファイル管理)画面を開く)
- htmlフォルダーをクリック(対象フォルダを選択する)
- 紙+アイコンをクリック(ファイル作成する)
- できたファイルを「index.html」にする
これで今回扱うHTMLファイルを作成できました。この中に実際にコードを書いていきましょう。このindex.htmlをクリックするとこのファイルを開くことができ、右側でいろいろと書けるところが出てきます。ここでクリックしたファイル(今回で言うとindex.html)を編集していきましょう。
まずは基本構造を書いていきたいが、ちょっと書くのがめんどくさいので楽しましょう。index.htmlを開いたらdocと入力してください。すると以下のようなものが出てくるので選択もしくはそのままenterを押してください。
これで基本構造が速攻でできました。そしたら保存(ショートカット「ctrl + s」 or 左上「ファイル」→「保存」をクリック)をしてください。
※できたやつの各要素の説明は一旦置いときます。
保存したらこれをブラウザで表示させます。このindex.htmlをブラウザアプリにドラック&ドロップしてみると、おそらく真っ白な画面で上のタブに「Document」と書かれたページが表示されます。
※すでにブラウザで開いている場合は更新・再読み込みボタン(左上のくるっとなっているアイコン or ショートカットctrl + R)を押すと最新のHTMLの状態になります。
※Windowsの方はF5を押しても更新できます。
これでHTMLの作成 → ブラウザ表示までOKですね！ 次章ではよく使う・出てくるタグについて解説します。
よく使うタグ
前章でHTMLの最低限(基本構造)を学びました。この章では先ほど出てきた見出しや段落といった、よく使うタグを紹介したいと思います。基本的にはbodyタグの中に記述するタグで、画像などの特別な要素を配置できたり、SEO対策(検索した時に上位に出るようにするワザ)に効果的なものもあるのでしっかりと覚えましょう。 また、紹介するタグを先ほどの index.html に実際に書いていって、どのように表示されるかの確認もしてみましょう。
h1～h6タグ
最初の例で出てきたもので、Webサイトに見出しを示す際に使用するタグ h(ヘッダー:header)タグです。厳密には、headingの略というか頭をとったものです。また、hタグは h1～h6まであります。h1:一番大きな見出し、h2:次に大きな見出し、~h6:一番小さな見出し となります。
html
<h1>見出し１</h1>
<h2>見出し２</h2>
<h6>見出し６</h6>これを使うと文字が太・大文字で表示されます。視覚的に「ここ見出しだ」とアピールすることができます。また、SEO対策としても非常に重要な役割を持っており、PCに「ここだ見出しなんだぞ。」と認識させるためにも使います。他にも「こんな章立てになってます」のアピールにも使います。例でいうと、
h1:HTML入門ページ ↓ h2:HTMLとは？ h2:HTMLのタグについて ↓ h3:pタグについて 〜〜〜
このような構造でhタグを使い分けていくと、サイト的にもSEO的にも良いHTMLになります。
p・brタグ
こちらも例で出てきたもので、Webサイト上の段落を示す際に使用するタグ**p(段落:paragraph)**です。こちらも英語の頭文字を使っていますね。
html
<p>(これは改行されません)ここは段落ここは段落ここは段落ここは段落ここは段落ここは段落ここは段落ここは段落
(これは改行されません)ここは段落ここは段落ここは段落ここは段落ここは段落ここは段落ここは段落
(これは改行されません)ここは段落ここは段落ここは段落ここは段落ここは段落
</p>段落というと少しイメージしにくい方もいると思います。ざっくりと文章のまとまりというイメージ大丈夫です。よく見るネット記事もよくよく考えると、文章のまとまりで少し間が空いてみやすくなるように段落が付いています。シンプルに内容的な文章を入れるところと思ってもらっても大丈夫です。
また↑で紹介した「(多分改行されません)ここは段落〜」ですが、実際にHTMLに入れて表示までしてみると、改行されずに真っ直ぐ一文で表示されます。実はHTMLの中では、改行は無視されるか、1文字分のスペースとして扱われます。そのためいくらVSCode上で改行しても、それが反映されることはありません。そこで使うタグがbr(改行:break)タグです。HTML上で文章の改行を示すにはこのタグを使用します。
html
<p>ここは段落ですここは段落ですここは段落ですここは段落ですここは段落です<br>
ここは2段落目ですここは2段落目ですここは2段落目ですここは2段落目です<br />
ここは3段落目ですここは3段落目ですここは3段落目です<br><br><br>
ここは段落ですここは段落です<br>ここは段落です
</p>このようにbrタグは終了タグは必要なく(自己終了タグ)、改行したいところに置けばブラウザ表示時に改行されます。<br> == 1改行なので3つなど複数のせて使うこともできます。
このように終了タグを必要としないものがいくつかあります。このとき、後ろの閉じは>と/>どちらでもOKです。
strongタグ
文章中の文字をこのように強調させたい時に使用するタグがstrong(強調:strong)タグです。言葉通り文字の強調をしたい時に使用します。
html
<p>このタグはテキストを<strong>強調</strong>することができます</p>このタグの注意点としては、「ただ単に太字にしたいから」という使い方はNGです。これはSEOの内容になってきますが、あくまでこのタグは「内容の強い重要性」を示す時に使うものです。そのため単純に太字にしたい時はCSS(別講座で解説)で設定する必要があります。
imgタグ
サイト上に画像を配置したい際に使用するタグがimg(画像:image)タグです。 このimgタグでは、表示させたいファイル名と、任意で画像の大きさとalt属性(代替テキスト)を設定することができます。
html
<img src="https://bulma.io/assets/images/placeholders/128x128.png" width="100" height="100" alt="ここに代替テキスト" />これも終了タグは必要なく(自己終了タグ)、srcのところで画像の場所を指定します。使い方としては
・width="100":横幅を100に設定
・height="100":縦幅を100に設定
・alt="ここに代替テキスト":altを"ここに代替テキスト"を設定
となります。
aタグ
サイト上にリンクを置く際に使用するタグa(anchor:アンカー)タグです。厳密にいうと、ホームページ内の指定の場所に移動できるようにユーザーを誘導する文字のことをアンカーテキストと呼びます。シンプルに「クリックしたらページに飛ぶ文字のことかぁ」でOKです。
html
<a href="https://programing-factory.raimuproject.com/">プロファク公式</a>
<a href="https://programing-factory.raimuproject.com/" target="_blank">別タブでプロファク公式</a>使い方としては、 ・href:飛び先のURL ・target:飛んだ先のページをどう表示するか _self:このタブ(ウィンドウ) ←デフォルトで設定されている, _blank:新タブ, _top:トップフレームへ(あんま使わん), _parent:親フレームへ(あんま使わん) ・aタグで挟むところ:表示する文字
tableタグ
サイト上で表を作りたい時に使用するタグがtable(テーブル:table)タグです。例えば成績表を出したい時、
| 国語 | 数学 | 英語 | 社会 | 理科 | 合計 | |
|---|---|---|---|---|---|---|
| Aさん | 60 | 70 | 80 | 50 | 40 | 300 |
| Bさん | 100 | 100 | 100 | 0 | 0 | 300 |
これをHTMLで表現する時にtableタグを使用します。
html
<table>
<tr>
<th></th>
<th>国語</th>
<th>数学</th>
<th>英語</th>
<th>社会</th>
<th>理科</th>
<th>合計</th>
</tr>
<tr>
<td>Aさん</td>
<td>60</td>
<td>70</td>
<td>80</td>
<td>50</td>
<td>40</td>
<td>300</td>
</tr>
<tr>
<td>Bさん</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>0</td>
<td>0</td>
<td>300</td>
</tr>
</table>tableタグを使うには別途tr,th,tdタグも理解する必要があります。 ・tableタグ:「これから表を作りますよ！」を示すタグ ・trタグ:テーブルの行を示すタグ(Table Rowの意味) ・thタグ:テーブルのヘッダー部分を示すタグ(Table Headerの意味) ・tdタグ:テーブルのセル部分を示すタグ(Table Dataの意味) ※他にもtbody,thead,tfootがあるが今回は割愛
ol,ul,liタグ
サイト上で箇条書きを表示したい際に使用するタグがul(順序無しリスト:unordered list)タグ です。また、頭に数字がついた順序付きリストを表示したい時はol(順序ありリスト:ordered list)タグを使用します。まずは例をみてみましょう。
html
<ul>
<li>箇条書き１</li>
<li>箇条書き２</li>
<li>箇条書き３</li>
</ul>html
<ol>
<li>順序１</li>
<li>順序２</li>
<li>順序３</li>
</ol>よくみてみると、ulもしくはolで囲んだ中身が全てliとなっています。これはli(リスト要素:List Item)タグで、こういったリストを作る際に使うタグです。なので使い方としては、
・必要な要素をliタグで書く
・olもしくはliで囲む
これでリストを作ることができます。
HTMLコーティングのコツ
HTML(というかプログラミング全般)でコードを書いていく際に役にたつコツを一つ紹介します。それはインデントを揃えることです。
インデントとは？ インデントとは字下げの事で、半角スペースや、タブ（キーボードの[tabキー]）を使ってつける。一般的にインデントは半角スペース2 or 4つ分つける事が多い。タブを使う場合のスペース量はエディタによって異なる。
どういうことか？ちょっと例を見てみましょう。表(テーブル)を書く際に
html
<table>
<tr>
<th></th>
<th>国語</th>
<th>数学</th>
<th>英語</th>
</tr>
<tr>
<td>Aさん</td>
<td>60</td>
<td>70</td>
<td>80</td>
</tr>
</table>と
html
<table>
<tr>
<th></th>
<th>国語</th>
<th>数学</th>
<th>英語</th>
</tr>
<tr>
<td>Aさん</td>
<td>60</td>
<td>70</td>
<td>80</td>
</tr>
</table>どちらが表の構造理解的にみやすいでしょうか？ １つ目の方は「行(tr)が2行あって、その中に4つ要素があるのかー」に対し、 ２つ目は「trあるけどどこまでが行なんだ？」とパッと構造が把握できないですね。
これ、HTMLの構造でも同じことが言えるんです。このpタグはどこまでなんだ？pタグの中のstrongタグはどこまでいってるんだ？などの開始・終了タグがパッと把握できるように各タグでインデントを意識して書く癖をつけておくと良いです！ ※VSCodeでは保存時に自動でインデントを揃えてくれるので便利です！
まとめ
いかがだったでしょうか？今回は、Webサイトを制作する際に必須となるHTMLの基本構造やタグの使い方について解説しました。HTMLは、Web開発をする基礎中の基礎であり、今後扱うNuxt(Vue)などでも幅広く使用する機会があるので、エンジニアの第一歩としてちゃんと押さえておきましょう！