webサイト制作を勉強する方やweb担当なった社会人の方がまず勉強するコンピューター言語であるhtmlの基本概念と使い方をイラストや写真を用いてわかりやすく解説していきます。htmlは何をするためのもので何ができるのか？やどのようにファイルを作って書いていくのか？という初心者が気になる疑問を一挙解消していきます。
本記事ではhtmlの概要・何ができるのか？・勉強するにあたっての疑問点を解消することを目的にしているので超初心者向けの内容になっています。そのためなるべく技術的な内容には触れません。
そのためファイル作成の仕方やコードの書き方を紹介していますが本記事では流れを見るだけでもOK！とりあえずhtmlをなんとなくでいいので理解しましょう！
htmlとは？を理解できたらこちらの記事でhtml入門をしてみてください。実際に手を動かしながらhtmlのタグの使い方を覚えることができます。
htmlとは？
htmlとはwebサイトをつくるために世界中で使用されているコンピューター言語です。またhtmlは略称で正式には「Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」
みなさんがよく利用するこれらの有名なwebサイトにもhtmlが使われています。
実は、これらのwebサイトがどんなhtmlで書かれているのかを確認することができます。それでは実際にどんなものがhtmlなのかを見てみましょう。
すると新しいタブで左のようなコードがずらっと書かれている画面が開きましたね。ここに書かれているものがhtmlという言語です。
このhtmlをwebブラウザ（Google ChromeやInternet Explorerなど）が人間にわかる形に変換してくれることで私たちはwebページを見ることができます。
つまりhtmlとはwebブラウザに対して「どのようにwebページを表示するか」を指示するための言語といえます。
詳しくは後述しますが画像のように各文章をタグと呼ばれるもので囲むことで、ブラウザにここは「〇〇で表示してね」という指示をしていきます。
htmlのざっくりとした概念がわかったところで、名前の由来である「ハイパーテキスト」の意味について解説していきます。
ハイパーテキスト
ハイパーテキストとは世界中のwebサイトを繋げるための仕組みです。
みなさんが普段使うwebサイトにも色々なところにリンクが設置してありますよね。そしてそのリンクから別のwebページやwebサイトへ移動することができます。このリンクによって世界中のwebサイトは繋がっており、その仕組みを利用しているのがhtmlという言語なのです。
少し難しい話になってしまったので「htmlはリンクで別のページと繋がっている」とだけわかっていればOKです！
xhtmlやhtml4・html5の違い
htmlを調べているとxhtmlやhtml4.01、html5と似たような言葉がでてくるので混乱してしまいますよね。これらはhtmlのバージョンであり、それぞれ以下のような違いがあります。
- HTML4.01：少し前のwebサイトで使われているバージョン
- XHTML1.0：記述ルールが厳密でHTML4.01/HTML5と書き方の異なる部分が多い
- HTML5：HTMLの中で最新のバージョン。モダンなサイトはこれ
バージョンが異なると記述のルールが異なるため「どれを勉強したらいいの？」という疑問がでてきますが、現代のwebサイトはhtml5が主流なので「HTML5」を勉強すればOKです。
htmlはプログラミング言語？
htmlはプログラミング言語ではありません。htmlとあとで少しだけ紹介するcssという言語は「マークアップ言語」という種類の言語に位置付けられています。
ちなみにマークアップ言語とプログラミング言語の違いは「コンピューターに対して計算処理をさせるかどうか」です。htmlでは文章に対してブラウザでどう表示するかを指示するだけなので計算処理ができないため「マークアップ言語」というわけです。
htmlの勉強だけでwebサイトは作れる？
理論上は可能ですが、きちんとしたwebサイトを作りたいならhtmlを勉強しただけではwebサイトをつくることができません。
実はhtmlは文章に意味付けをしていくだけの言語なので見た目を調整することができません。
- 文字の大きさ・色
- 背景の色
- 画像やボックスの横幅や高さ
など見た目全般の指示はcssという言語を使用して行います。実際にcssを使えず見た目が調整できない場合とcssで見た目を整えた場合を比較してみましょう。
比べるとよくわかるようにhtmlだけでは配色が白黒で文字の大きさや位置も単調なものになっていますよね。右の画像のように綺麗に見た目を整えるためにはcssが必要ということがわかります。
これからwebサイト制作を勉強する人にとっては覚えることが2倍になったように感じるかもしれませんが心配はいりません。htmlもcssもコンピューター言語の中では難易度が低いほうですので慣れれば簡単に扱うことができます。まずは焦らずにhtmlから学んでいきましょう。
htmlファイルの作り方
まずhtmlファイルの作り方を覚えましょう。htmlを書いていくにはテキストエディタというコードを書く専門のツールを用意する必要があります。
テキストエディタのインストールについてはこちらの記事で紹介しています。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サイトのタイトル</title>
<meta name="description" content="サイトの説明文">
</head>
<body>
</body>
</html>左のコードを全てコピーします。これはhtml5を書いていく時に必ず書かなければいけないコードです。
コードの意味は今回割愛し「入門編の記事」で詳しく解説します。
Sublime Textを開いて先ほどコピーしたコードを貼り付けます。
貼り付けたコードの<body>〜</body>の間に<h1>はじめてのhtml</h1>と書きます。
後ろのコードが「</h1>」とスラッシュを含んでいることに注意してください。
名前をつけてファイルを保存します。
Windows：Ctrl + S
Mac：Command + S
保存名を「sample.html」とします。このように拡張子をhtmlにすることでhtmlファイルは作成できます。
保存先はわかりやすい場所ならどこでもOKです。
保存したファイルをダブルクリックもしくは右クリックのメニューから開きます。今回はGoogle Chromeで開いてみました。
すると開いたブラウザに
「はじめてのhtml」
と表示されましたね。
htmlの基本的な書き方
続いてhtmlの基本的な書き方について学んでいきましょう。
htmlは前述した通り、コンピューターにわかるように文章に意味付け（指示）をしていく言語です。
ではどのように意味付けするかというと
文章を<開始タグ>〜</終了タグ>で囲むことで
「これは◯◯である」と意味付けします。
終了タグ（閉じタグとも呼ぶ）にスラッシュが入っていることに注意しましょう。
たとえば、大見出しで表示したければ<h1></h1>で囲み、段落（≒通常の文章）を入れたい場合は<p></p>で囲みます。
するとそれぞれブラウザに大見出しと段落として認識されます。
このように「〇〇の要素で表示したいなら〇〇のタグで囲う」とあらかじめ色々なタグが用意されています。
htmlでよく使うタグを覚えよう
先ほどの説明であらかじめタグが用意されていると説明しましたね。つまり「見出しを表示するタグ」「リンクを表示するタグ」「画像を表示するタグ」など、表示したい要素はどんなタグで書くのかを覚える必要があります。
実は、html5のタグは100種類以上ありますがメインで使うタグはその10分の1程度です。また、繰り返し使ううちに勝手に覚えていくので英単語のように暗記するよりもとりあえず調べながら使っていくというのが効率の良い学習方法でしょう。
今回はその中でも特によく使われるタグを6つ紹介します。実際に書く必要はないので「こんなものがあるんだ」とhtmlのタグを見慣れるところからはじめましょう。
見出しを表示するhタグ
webページには必ず見出しがあります。見出しとはwebページの各セクションのタイトルのようなものです。
ブログサイトのページにもこのようにそれぞれのセクションによって適切な見出しがつけられています。
hタグの書き方
<h数字>〇〇</h数字>というように書きます。数字が1に近いほど見出しの重要性が高まり、大きなテキストで表示されます。
（※見出しの使い分けは入門編で解説）
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>
見出し1
見出し2
見出し3
見出し4
見出し5
見出し6
段落を挿入するpタグ
段落を挿入するにはpタグを使用します。pタグは文章を書いていく場面でよく使用され、文章の内容が変わり改行したい場合などに使用します。
pタグの書き方
<p>これは段落です</p><p>春はあけぼの。やうやう白くなりゆく山際、少し明
かりて、紫だちたる雲の細くたなびきたる。</p>
<p>夏は夜。月のころはさらなり、闇もなほ、蛍の多く
飛びちがひたる。また、ただ一つ二つなど、ほのかにう
ち光て行くもをかし。雨など降るもをかし。</p>春はあけぼの。やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。
夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。
夏は夜の部分で改行されていますね。
リンクを設定するaタグ
リンクテキストを作成するにはaタグを使用します。テキストや画像をaタグで囲むことでクリックした時に、別ページへ移動させることができます。
pタグの書き方
<a href="リンク先URL">リンクテキスト</a>と書きhref=""の部分にリンク先のURLを記述します。<a href="https://www.yahoo.co.jp/">yahooのトップページ</a>画像を表示するimgタグ
画像を表示するにはimgタグを使用します。htmlで画像を表示するにはimgタグを使い画像ファイルを読み込む必要があります。
pタグの書き方
<img src="ファイルの保管場所パス/ファイル名" alt="画像の説明">と書きます。imgタグは閉じタグがない特殊なタグなので注意してください。src=""の部分に画像の保管場所のパス（URL）とファイル名を記述alt=""には画像がうまく読み込めない時に代わりに表示されるテキストを記述（※パスの理解は難しいので入門編で解説）
<img src="images/dog.png" alt="犬">
箇条書き（リスト）を表示するul / ol / liタグ
箇条書きを表示したい場合はulタグ、olタグ、liタグを使用します。先ほどまでのタグと違い複数のタグがでてきましたね。その分書き方も少し特殊です。
ul / ol / liタグの書き方
- リストの各項目を
<li>項目</li>で囲む - そのリストの順番に意味があれば
<ol></ol>、順番に意味がなければで<ul></ul>でリスト全体を囲む
<ul>
<li>山で散歩</li>
<li>川で釣り</li>
<li>海でBBQ</li>
</ul>
<ol>
<li>これは1番目</li>
<li>これは2番目</li>
<li>これは3番目</li>
</ol>
- 山で散歩
- 川で釣り
- 海でBBQ
- これは1番目
- これは2番目
- これは3番目
例のようにリストの項目の順番が意味を持っている場合はolタグでli要素を囲みます。順番が関係なければulタグで囲めばOKです。
表を作成するtable / tr / th / tdタグ
表を作成するためのタグもhtmlには用意されています。先ほどのリスト用のタグと同様で複数のタグを使用して作成します。
table / tr / th / tdタグの書き方
- 表の中の見出しとなる部分を
<th>見出しセル</th>とし、その項目を<td>データセル</td> - 一行を
<tr></tr>で囲む - 全体を
<table></table>で囲む
<table>
<tr>
<th>血液型</th><td>A型</td><td>O型</td>
</tr>
<tr>
<th>性格</th><td>几帳面</td><td>おおらか</td>
</tr>
</table>
| 血液型 | A型 | O型 |
|---|---|---|
| 性格 | 几帳面 | おおらか |
htmlを勉強する流れ
ここまでで「htmlとは一体なんなのか？」というものがざっくりとでもわかってもらえたらOKです。本記事の内容を理解した時点では習得度はだいたい5%〜10%といったところですのでまだまだ先はあるといえます。ということでこれからどのように学んでいくのかを解説していきます。
webサイトを一人で作れるようになるための3ステップ
htmlの基礎と各タグの使い方を覚える
まずは焦らずhtmlに慣れるところからはじめましょう。ネットのサービスや記事でhtmlの記述のルールとwebサイトの表示される仕組みを理解し、色々なタグに触れてみます。
デザインするためのcssを覚える
見た目を調整するために必要なcssを覚えましょう。最新版のcss3の記述ルールと基本的なプロパティ（htmlでいうタグ）に慣れましょう。
webページをつくってみる
htmlとcssに慣れてきたら参考書を書いましょう。なぜ最初から参考書を買わないかというと参考書は内容が細かすぎて挫折する可能性が高いからです。
ある程度htmlとcssに慣れた段階の方が知識の吸収がグッと楽になります。
webサイトの作り方が1から乗っている本のwebサイトを参考書をみずにつくれるようにしましょう。
htmlとcssの入門をするなら
htmlとcssを初めて勉強する方はぜひ以下のページを活用してね。weblikerでは現役webデザイナーが初心者の目線に立ってわかりやす〜くhtmlとcssの基本〜応用までを解説しているんだ。今後質問ボックスなども用意する予定だからチェックしてみてね！
記事のポイントまとめ
本記事で学んだhtmlを学ぶ上でのポイントをまとめましょう。
- htmlはwebページをつくるためのマークアップ言語（≠プログラミング言語）
- ブラウザがコードを変換することでヒトがwebページを閲覧できる
- xhtmlやhtml4.01はバージョンが違う。html5を勉強すればOK
- htmlは文章に意味付けをする言語なので、cssを使わないと見た目を調整できない
- htmlファイルを作るにはファイルの拡張子を「.html」にする
- 書き方の基本は「<開始タグ>〇〇</終了タグ>」
- 学習のポイントはまずhtmlに抵抗をなくすこと！
