僕は高校を卒業してから、アカデミーでweb制作の一通りの知識は勉強してきましたが、今なら正直そこまでしなくても良かったんじゃないかとも思えます。
実際、WordPressでブログを運営している人の中には、全くの素人からスタートして、webに落ちている知識を拾いながら覚えていく人も多いです。
知識ゼロから自分でWordPressを開設できた人の持つ情報検索力があれば、独学でHTMLを勉強することは全く難しくはないと思うんです。
長くサイトを運営していると「HTML知識があればもっと自由度が広がるのに…」なんて思う場面が必ず出てくるはず。
「これやりたい！」と思ったときにすぐにカスタマイズできるのは正直超助かってます。
実際のカスタマイズにはcssの知識も必要ですが、まずはwebサイトの基礎を構成するHTMLから勉強しないと始まりません。
HTMLとは？
HTMLはweb制作の要となる言語ですが、いわゆるプログラミング言語ではありません。
なんとなくのイメージだけで、プログラミング言語と同じくくりで考え、はなから難しいものと決めつけている人もいるんじゃないでしょうか。
HTMLはマークアップ言語
HTMLはマークアップ言語と呼ばれる言語です。
プログラミング言語との違いはこんな感じ。
- プログラミング言語・・・コンピューターに命令をするための言語
- マークアップ言語・・・文章の意味（構造）をコンピューターに伝えるための言語
HTMLは、文章の意味をコンピューターに伝えるための言語です。
例えば「新聞」をイメージしてみてください。
僕たちは新聞を見た時に、全体（見出し、本文、写真など）の構成を一目で認識できます。
「ここが見出しで、ここが本文です」なんて説明書きがいちいちなくても、文章全体の大まかな構造とその意味が分かるじゃないですか。
しかし、コンピューターは自分でこの判断ができません。
コンピューターは文章をただの文字列としか認識できず、文章の全体の構造とその意味を理解することはできないんです。
この構造を伝えるのがHTMLの役割。
「マークアップ」という言葉が使われているように、記事内にある「見出し」「本文」「画像」「リンク」などをコンピューターに分かりやすく印付けして伝えてあげるための言語なんです。
webページを構成するHTMLの大枠
HTMLの正体がなんとなくわかったところで、ここからは実際にHTMLに触れてみましょう。
具体的な印付けの方法ですが、HTMLは「タグ」と呼ばれるものを使って文章の構造を組み立てていきます。
まずはwebページの大枠が、どんなタグによってマークアップされているのかを紹介します。
こちらをご覧ください。
<html> <head>webページの情報を記述する場所</head> <body>実際に画面に表示されるコンテンツを記述する場所</body> </html>
webページの大枠はこんな感じで記述されています。
「htmlタグ」「headタグ」「bodyタグ」の3つのタグです。
htmlタグ
<html>～</html>
htmlタグはページ全体を囲むタグです。
ここはカスタマイズするうえでさほど重要ではないので、適当に聞き流してもらって構いません。
headタグ
<head>～</head>
headタグは、webページに関する情報を記述する場所を表します。
ヘッダ内は主に「webページのタイトル」や「ページの説明文」といった、ページの情報を記述するための場所です。
この他にも「ファイルを読み込ませる記述」など、ページ全体に適用したい動きはこのタグの中に記述します。
bodyタグ
<body>～</body>
bodyタグは、実際にブラウザに表示させたいコンテンツを記述する場所を表します。
画面で見えている情報はすべてこの中に集約されているんです。今見えているこのページの内容もこの中に記述されています。
「ページにコンテンツを追加したい」と思ったときにカスタマイズするはこの中ってことですね。
文章を構成する代表的なHTMLタグ
ここまでは簡単にHTMLの大枠を紹介してきましたが、サイトをカスタマイズしたいときに知っておきたいのは「bodyタグ」の中身です。
bodyタグの中で使われるタグを知ることで、好きな場所に好きなコンテンツを表示させることが可能になります。
それでは代表的なタグを見てみましょう。正直これを知ってるだけで脱初心者といっても良いと思います。
h1～h6タグ
<h1>～</h1> <h2>～</h2> <h3>～</h3> <h4>～</h4> <h5>～</h5> <h6>～</h6>
hタグは文章中の見出しを表すタグです。
数字が大きくなるにつれて、見出しの重要度が下がっていきます。
つまりこんな使い分けです。
- h1・・・ページのタイトル
- h2・・・記事中の小見出し
- h3・・・h2見出しの中の小見出し
h1はページのタイトルなので問題ないと思いますが、h2以降の見出しタグは使い方に注意が必要。
例えば記事の中で、h2タグがないのに急にh3タグ以降の見出しタグが出てくるのは、構造的におかしいマークアップとなります。
文章の構造を考え、正しい順番で使ってください。
pタグ
<p>～</p>
pタグは文章を表すタグです。
今書いたこの一文。
これがまさしくpタグでマークアップされています。
aタグ
<a href="ここにリンク先URLを記述">～</a>
aタグはリンクを表すタグです。
文字や画像をリンクにしたいときはこのタグで囲むだけ。
divタグ
<div>～</div>
divタグはそれ自身に意味はありませんが、囲んだ範囲をひとくくりにまとめる役割があります。
記事中のコンテンツを自由にグループ分けすることができるので、cssを使ってレイアウトするときの起点に使います。
ul、liタグ
<ul> <li>～</li> <li>～</li> <li>～</li> </ul>
ul、liタグは、リスト（箇条書き）を表すタグです。
他にも、数字付きのリストを作るol、liタグなどがあります。
table、tr、tdタグ
<table>
<tr>
<td>～</td>
<td>～</td>
</tr>
<tr>
<td>～</td>
<td>～</td>
</tr>
</table>table、tr、tdタグはテーブル（表）を作るときに使われるタグです。
imgタグ
<img src="画像のパス">
imgタグは画像を表示するときに使うタグです。
他にもタグはありますが、まずはこの辺りを知っておけばOK。
そんなに種類はないので、あとはやっているうちに自然と触れていくことになると思います。
好きなサイトを覗いてリアルなHTMLに触れてみよう
最後に、HTMLの面白い学習方法を１つ紹介しておきたいと思います。
代表的なタグは紹介したので、あとは実際のwebページのソース（HTMLコード）を見て慣れていくのが早いんですが、実はweb上にあるすべてのページは、その裏側のソースを誰でも見れるようになってるんですよ。
自分が運営しているWordPressのサイトでも、普段見ているお気に入りのサイトでも良いので、まずはPCのブラウザで1つページを開いてみてください。
ブラウザによって多少表記は変わりますが、chromeの場合は右クリックより「ページのソースを表示」または「検証」を選択すると、そのページのソースが表示されます。（Firefoxは「要素を調査」、IEは「要素の検査」）
実際に細かく解析していくときは検証を使うのが便利です。
マウスポインターを見たい要素の上にホバーした状態で、右クリックより検証すると、ちょうどその箇所のHTMLやcssを見ることができます。
つまり、サイトのデザインがどのように作られているのかは丸見えってことです。
web制作現場では当たり前に使われているツールですが、最初の学習段階でこれを知っているのといないのでは大きな差が出ます。
リアルなコードを見ながら学習していくのはかなり効率的です。
僕も初心者の頃は、いろんなサイトのコードを見まくって、サイトがどんな風に作られているのかを勉強してました。
HTMLはプログラミング言語と違って初心者でも読みやすいので、この手法はかなり効果的だと思います。