Webサイトの制作をやってみたいという場合、最初にとりかかるべきなのは「HTML」の理解です。
HTMLはWebサイト制作の基本であり、これを理解し、使い方を身につけることが、Webサイト制作のはじめの一歩、になります。
ここでは、初めてHTMLにふれる人のための導入編として、HTMLとは何か、どう使えばいいのかを、極力わかりやすくまとめていきます。
Contents
基本中の基本「HTMLとは何か?」を理解しよう
クイックリファレンスで「HTML」を検索すると、次のように書かれています。
HTML（エイチティーエムエル、HyperText Markup Language）は、ウェブページを作成するために開発された言語です。 現在、インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されています。
ただ、これだけでは初心者にはわかりにくいはずなので、少し補足しておきます。
HTMLをプログラミング言語だと思っている人もいるようですが、それは間違いで、正しくは「マークアップ言語」です。
マークアップ(Mark up)は「～に印をつける」という意味で、この場合、文書の各部分が、どのような役割を持っているかを示すということです。 見出し・段落・表・リストなど、文書の中で各部分が果たしている役割が、分かるように目印をつけます。
HTMLとは、Webページを作成するためのマークアップ言語であり、PCやスマホで見ているWebページのほとんどは、このHTMLという言語によって作られています。
HTMLがなければ、ブラウザにWebページを正しく表示することができないほど、重要な存在なのです。
HTMLは何の略なのか?
では「HTML」とは何の略なのでしょうか。
調べればすぐにわかりますが、HTMLは「Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略です。
「Hyper Text:ハイパーテキスト」を直訳すると「高機能なテキスト」ですが、要は、Webサイトを閲覧しながらクリックすると別のページに飛ぶリンクなど、通常の文字だけではない別の機能を持ったテキストのことです。
前述しましたが、「Markup:マークアップ」というのは「～に印をつける」という意味で、文字にタグという印をつけ、それぞれに役割を持たせることで、ブラウザで画像や表が見られるようになります。
HTMLは、「ハイパーテキストというテキストを使って印をつけ、文字、画像、表などを表示する言語」と理解しておけばいいでしょう。
HTMLを自分の目で確認してみる
詳しくは知らなくても、HTMLという言葉だけは知っている人が大勢います。その理由は、毎日ほぼ、我々はHTMLの恩恵を受けているからです。
HTMLの役割は、PCやスマホのブラウザでWebページを見られるようにすることです。
どんなWebページでも文字を入力しただけでは表示できず、ブラウザに対して「これはWebページです」とわかってもらう必要があります。
Webアプリに表示される文字や画像を指定するなど、ブラウザに情報を表示する部分を担当するのがHTMLで、Webに関わるさまざまなものに使われるため、HTMLはWebの基本なのです。
では試しに、今閲覧しているWebページで右クリックをして、「ページのソースを表示」を選択してみてください。
このような画面が出るはずです。
文字が記号のように並んでいますが、これが閲覧しているWebページを構成しているHTMLで、ブラウザで読み込まれるとWebページが正しく表示されます。
HTMLだけでWebページが構成されるわけではない
ここまでふれてきたように、HTMLはWebサイトに欠かせない、「骨組み」ともいえる役割を持っています。
Webサイトのソース画面を確認すると、多くのHTMLが使用されていますが、HTMLだけでWebサイトが構成されるわけではありません。
Webサイトを構成する要素には、HTMLの他にCSS、そしてJavaScriptなどがあります。
人にたとえるなら、HTMLは骨格、CSSは皮膚、皮膚や骨格を動かす筋肉がJavaScriptともいえるでしょう。
他に、どんなサイトを作るかによって必要な言語は変わっていきます。
基本的なHTMLの構成
前述したように、HTMLはタグを使ってテキストに印をつけることで、ブラウザに正しく表示される役割を持たせます。
タグには、始まりを表す「開始タグ」、終わりを表す「終了タグ」があり、それらで文字などを囲うことをマークアップと呼びます。
簡単な例をあげてみましょう。
<html><!–ここからHTMLが始まりますよという開始タグ–>
文字や画像表示のタグが入ります
</html><!–ここでHTMLが終わりますよという終了タグ–>
コンピューターとコミュニケーションするためのもの
タグをつけ、リンクを貼るというと、経験がないと専門的で難しいことに思えるかもしれません。
なぜ、こうした作業が必要なのかというと、書いた言語をコンピューターに理解させるためです。
文書内の各部分に印をつけて、その部分が「見出し」「改行」など、どんな役割を持っているのか明確にすることで、コンピュータが文書の構造を理解し、ブラウザで表示できるようになります。
外国人と会話するには英語が必要なように、コンピューターとコミュニケーションをとるにも、それに合った方法、つまりHTMLが必要なのです。
HTML作成に必要なのはこの2つ
では、HTMLを作成するには何が必要なのでしょうか。
まず、「テキストエディタ」と呼ばれるソフトですが、これは無料でもダウンロードできます。
そしてブラウザがあれば、誰でもHTMLの作成に着手できます。
「テキストエディタ」 HTML作成の機能が充実
テキストエディタは、簡単にいうと文書を書くためのソフトウエアで、珍しいものではありません。その証拠に、Windowsには最初から「メモ帳」というソフトが、Macには「テキストエディット」というソフトがあらかじめインストールされています。
メモ帳でも、テキストエディットでも、HTMLを作成するのは可能ですが、HTML作成に特化したソフトではないため、機能に限界があります。
もし、HTMLをちゃんと学びたいというのなら、テキストエディタをインストールすることをおすすめします。
おすすめできるテキストエディタを2つ紹介しておきましょう。
「Brackets」
タグの自動補完機能など、便利な機能がある無料のテキストエディタですが、日本語表示がデフォルトのため、初心者でもとても使いやすくなっています。
「Atom」
こちらも、便利な機能が用意された無料のテキストエディタです。拡張機能も豊富で高機能なため、ある程度経験のある人も使用しています。
これ以外にも、テキストエディタは種類が豊富に揃っているので、いくつか試してみて、自分に合うものをインストールすればいいでしょう。
「ブラウザ」 HTML通りにページを表示する
テキストエディタの他に、HTMLを作成するために欠かせないのがブラウザです。
改めて説明するまでもありませんが、Webページを閲覧するためのソフトがブラウザです。
Windowsなら「Microsoft Edge」、Macなら「Safari」というブラウザがあらかじめインストールされていますが、他のブラウザでも問題ありません。
「Firefox」
Mozilla社が出しているブラウザで、機能の拡張性にすぐれ、Web業界では使っている人が多いブラウザになります。
「Google Chrome」
Google社が出しているブラウザで、Googleの様々なサービスと簡単に連携でき、セキュリティも高いため人気のブラウザです。
他にもありますが、まず、日頃使い慣れたブラウザを利用したほうがやりやすいでしょう。
HTMLはどんな構造になっているのか?
では、ここでHTMLの基本的な構造について説明していきましょう。簡単にあらわすと、以下のようになります。
1.まず先頭に<!DOCTYPE html>と記述する
2.<html>で大きくくる
3.htmlの中の前半を<head>でくくる
4.htmlの中の後半を<body>でくくる
この4点と、補足項目についてふれていきます。
<!DOCTYPE html> HTMLを書くと宣言するタグ
<!DOCTYPE html>は、htmlの文章を書きますよという宣言の印をつけるタグで、最初の行に記述します。
実は、HTMLとひと言でいってもいくつかのバージョンがあり、以前のHTML4.01から、現在はHTML5が主流となっています。
ただ、最初からバージョンまで意識する必要はなく、まずは決まりとして、最初にから始めるようにしてください。
<html>～</html> HTML文書の範囲を決める
最も基本的なタグの1つが<html>～</html>で、これはページがHTMLページであることを宣言するタグです。
htmlタグの範囲内にhtml文を記述していきますが、言語指定を厳密にする場合は、
<html lang=”en”>～</html>を使います。
headタグ ブラウザで表示されないことが多い
headタグで印をつけたところには、Webページのタイトルや、検索エンジン向けの説明文、文字コード、外部のCSSファイルやjavascriptファイルなどを記入します。
記述した内容は、タイトル(titleタグ)などの一部を除いて、基本的にブラウザ上には表示されません。
headタグを人にたとえるなら、外見以外の属性情報（生年月日、氏名、血液型など）を入れる部分を指定する、とイメージすればわかりしやすいかもしれません。
bodyタグ ブラウザで表示される部分を示す
前述したheadタグが人間の生年月日、性別、血液型などの属性を示すものだったとすれば、bodyタグで指定される範囲では、人体そのものをあらわします。
つまり、実際にブラウザで表示される中身を記述していくのがbodyタグです。
見出し、文章、画像などの要素を指しますが、1つのHTML文書の中に、headタグやbodyタグが出現する回数は1回だけです。
現在、HTMLの主流バージョンである「HTML5」では、以前より使えるタグが増えています。
具体的には、より意味付けを意識したタグが新たに登場しました。
例えば、<header>タグはヘッダー部分に利用できますが、文書のヘッダ情報を表すタグとは意味が異なるので注意が必要です。
また、<footer>タグはフッター部分、人間でいうと足の部分であることを示す際に使用します。
例をあげると、サイトの最下部にあるcopyrightや、Webページ上部のナビゲーションバーをheaderタグで囲んだりすることが多いようです。
この2つは、HTML5のタグとしてはよく使われるので、覚えておいて損はないでしょう。
ただ、厳密な決まりはなくあくまで意味づけなので、Webページを制作するとき、ヘッダーと思う部分はheaderタグ、フッターと思う部分はfooterでくくればいいようです。
(補足2) 文字の装飾などを示すid属性とclass属性
これは少し突っ込んだ補足になりますが、HTMLのそれぞれのタグには属性の設定ができます。
その属性が「id属性」や「class属性」です。
例をあげてみましょう。
<h1 id=”top-h”>はじめてのCSS</h1>
<p class=”red-text”>この文章は赤色になります</p>
id属性、class属性を設定することで、ブラウザに表示する際のレイアウト装飾、「このid名がついているタグは背景を青色に」、「このclass名がついているタグは文字色を赤色に」などの指定ができるのです。
以下は内部スタイルシート形式で記述した例です。
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <title>はじめてのHTMLセミナー</title>
6 <style media="screen">
7 #top-h{
8 background: blue;
9 }
10 .red-text{
11 color:blue;
12 }
13 </style>
14 </head>
15<body>
16 <h1 id="top-h">はじめてのCSS</h1>
17
18 <p class="red-text">この文章は赤文字になっています</p>
19
20 <h2 class="red-text">この見出しも赤文字になっています</h2>
21</body>
22</html>
使用頻度の高いタグの書き方
では、ブラウザに表示されるbodyタグで示した範囲には、どんなタグが使われるのでしょうか。
頻度の高いタグの使用例をまとめていきます。
「pタグ」 文章の段落をあらわす
HTMLのタグの中でも、最もよく使われるものの1つがpタグ<p>~</p>です。
pはParagraph（パラグラフ）のPで、文章のかたまりをあらわし、ブログなど文章の多いWebページでは何度も使われます。
このブログの文章も、pタグではさむことで段落になっています。
<p>〇〇〇。</p>など、〇〇〇の部分に文章を書けば1つの文章のかたまりとして認識されます。
「h1～h6タグ」 タイトルや見出しをあらわす
Webページを読みやすくするために使う見出しですが、これを示すのが「h1～h6タグ」です。
h1が１番大きな見出し、ページのタイトル的なもので、数字が大きくなるほど小さい見出しになります。
Webメディアやブログなどは、記事のタイトルはh1で書き、小見出しをh2以下で書くことが多いようです。
<h1>ｈ１は１番大きい見出し</h1>
<h2>ｈ２は２番目に大きい見出し</h2>
<h3>ｈ３は３番目に大きい見出し</h3>
<h4>ｈ４は４番目に大きい見出し</h4>
<h5>ｈ５は５番目に大きい見出し</h5>
<h6>ｈ６は１番小さい見出し</h6>
「imgタグ」 画像を貼るために必要
Webページには写真、イラスト、表などの画像が多く使われますが、画像を貼るために使うのがimgタグで、imgは「image＝イメージ」からきています。
少し書き方が特殊なので、注意点をまとめておきます。
・imgでは終了タグは使わない。
・貼ることができるのはJPEG/PNG/GIF形式の画像だけ。
imgタグで貼れるのはJPEGやPNG、GIF、SVGなどの画像形式に限られます。PDFデータや動画データを貼れませんが、GIFアニメは貼ることができます。
imgタグの中には様々な属性を書いていきます。
src=”” には画像のファイル名と、どこにあるのかを書きます。ページを開くとき、srcに書かれた画像が読み込まれるわけです。
alt=”” には代替テキストを書きます。代替テキストとは、画像が読み込めなかった場合、代わりに表示してくれる文のことです。
最後にスラッシュ/を書きますが、これは「終了タグはない」と示すものだと思ってください。
imgタグに書かれる属性は他にもありますが、まずは「src=”” 」「alt=”” 」の2つを押さえておけば十分です。
試しに書いてみましょう。
<p>はじめまして</p>
<p><img src=”画像の保管場所のURLとファイル名を記載してください” alt=”プロフィール画像” /></p>
注意点として、imgも文字と同じと認識されるため、段落と同じように<p>〇〇〇</p>ではさむようにします。
「aタグ」 他のページへのリンクを貼る
Webページから、他のWebページへのリンクを貼るために使うのがaタグです。
書き方は、<a>の中に「href=”リンク先のURL”」を書けばOKで、aタグにはさまれた部分がリンクボタンになります。
また、aタグではテキスト以外に画像をはさむ場合にも使えるため、画像のリンクボタンを作ることもできます。
試しに「プロフィール画像をクリックすると、ブログのトップページに飛ぶボタン」を作ってみましょう。
<p>顔をクリックしてちょうだい↓</p>
<p>
<a href=”リンク先となるURLを記載してください”>
<img src=”画像の保管場所のURLとファイル名を記載してください” alt=”プロフィール画像” />
</a>
</p>
「ul、ol、Liタグ」 箇条書きで強調いる時に使う
Webページを見ていると、重要な項目を箇条書きにしている部分があります。
HTMLでは箇条書き用のタグも用意されおり、<ul>と<li>のペア、または<ol>と<li>のペアで使用します。
ulとliのセットで使う場合、<li>～</li>の中に箇条書き文を好きなように書き、その前後を<ul>～</ul>ではさむだけです。
実際の書き方、表示はこんなふうになります。
<ul>
<li>ひとつめの項目</li>
<li>ふたつめの項目</li>
<li>みっつめの項目</li>
</ul>
olとliで番号付の箇条書きにする場合は、ulの代わりにolを使うとポッチが番号になります。
実際の書き方、表示はこんなふうになります。
<ol>
<li>ひとつめの項目</li>
<li>ふたつめの項目</li>
<li>みっつめの項目</li>
</ol>
というふうに書くと、箇条書きの頭が数字になります。
liの数に制限はないので、箇条書きしたいものが多ければ、どんどん<li>～</li>の数を増やしてください。
「brタグ」 どうしても改行したい時に
HTMLを学び始めて「なんで?」と感じる人が多いのは、「HTMLコード内でEnterキーを押して改行しても、ブラウザに表示される文ではその改行が反映されない」です。
普通にテキストを作成する時、Enterキーを押せば改行しますが、HTMLコード内は勝手が違うのです。
もちろん、pタグなどを使えばその前後で改行を入れられますが、「どうしてもここで改行したい!」という場合は「brタグ」を使います。終了タグは必要なく、<br>だけで大丈夫です。
<p>これは
例です</p>
<p>ここで<br>改行します。</p>
ただ、ある程度以上のレベルになると、<br>をほとんど使いません。規則正しい文章を書けば
の改行だけで十分なので、ここでは「どうしても改行したくなったら<br>」と覚えておいてください。
<!- -～- -> 自分用のメモ書きに使う
ソースコードを見ていくと、<!- -〇〇〇- ->という部分がありますが、これはコメントアウトと呼ばれ、ブラウザには表示されません。
自分用にメモ書きをするときなどに使うもので、Webページを訪れた人が読むことはないので、自分が分かりやすい形で書いて問題ありません。
<h1>タイトル例です</h1>
<!- – -下にpタグ- – ->
<p>文章の例です</p>
習うより慣れろ! がHTMLを身につける近道
HTMLの基本と書き方について解説してきました。
頭で理解しても、実際に書いてみると「?」となることも多いので、手を動かして、失敗しながらでも覚えるのが習得のための近道になります。
スクールで学ぶのも可能ですが、HTMLだけなら本を数冊購入して、独学することもできます。ハードルは最初に感じたほど高くないので、興味がある人は勉強してみてください。
その際に注意したいのは、「最初からきれいなページを作れると思わない」ことです。
まずテキストリンクを作ったり、画像を１枚表示させたりなど、簡単なところからタグの使い方を覚えていきましょう。
HTMLのタグの使い方はほぼワンパターンなので、一度覚えればどんどんラクになり、クオリティも作業スピードも向上するはずです。
