コーディング

【HTML入門】HTMLとは何か？HTMLの基本を学習しよう！

2016.05.17
- HTML
- コーディング

今回から何回かに分けてHTMLを学習していきましょう。
まず、最初はHTMLとは何かというところと、簡単なホームページを画面に表示させる基本を身につけましょう。

HTMLとは

HTML: HyperText Markup Languageの略で、ホームページの文章構造を記す為の言語。

なんか難しいですね。

結論から言うと、HTML = ホームページの情報そのものです。

今見ているこのホームページもHTML で書かれていますし、あのホームページも、そのホームページもHTML で書かれています。
つまり世界中のホームページはHTML で書かれています。

で、文書構造って一体何かっていうと、ホームページ上の文章に、「ここから、ここまでは段落」、「ここは見出し」、「ここは箇条書き」、「これは表」などのように文章に意味や役割を持たせるという事です。

なぜそんな意味や役割つけるかって言うと、視覚的に（目で）ホームページを見ている人は、視覚的に、「ここから段落」、「ここは見出し」、「ここは箇条書き」ってのがわかるのですが、「目」以外でホームページを見てるユーザーや人間以外のユーザーにはなかなかその意味や役割が伝わりません。

「目」以外でホームページを見てるユーザー？人間以外のユーザー？

って思ったかもしれませんが、ホームページは目の不自由なユーザも見ますし、機械だってホームページを見ます。

どうやってみるかっていうと、目の不自由なユーザは音声ソフトを導入することで、HTMLの内容を音声が読み上げてくれますし、目も耳も不自由なユーザは、点字ディスプレイを導入すると、HTMLの内容を点字で読む事ができます。

また、Google先生は、クローラーと呼ばれるコンピューター・プログラム（機械）がホームページを訪れて、HTMLを読みます。そして、HTMLで付けられた意味や役割によってホームページの内容を人間と同じように理解、解釈します。もちろん、それを元に検索結果の順位も影響します。

このようにホームページは、どんなユーザーであろうと情報を提供する事ができるメディアなので、全てのユーザーにきちんと情報が伝わる文章構造を記す必要があるのです。これがホームページの特徴でもあります。

じゃあ、どうやって文章構造を記すのか？というとそれは「タグ」と呼ばれるものを使います。

文書構造はタグで記す

HTMLでは、文書構造を記す為にはタグと呼ばれるものを使います。

例えば、以下の様な文章があったとします。

僕は、これからホームページの作り方を勉強して、立派なWEBデザイナーになる！

この文章に「段落」という役割を与えたかったら、イメージは以下の様な感じです。

<段落>
    僕は、これからホームページの作り方を勉強して、立派なWEBデザイナーになる！
</段落>

<段落>で、「ここから段落ですよー」
</段落>で、「ここまでが段落でした」

みたいな感じです。
このように「段落」という印を文章に挟む事で意味や役割を定義します。
で、この印の事を「タグ」と言う訳です。

ただ、実際に上の様な「段落」という日本語は使えません。
なので、段落を英語にします。

段落 -> Paragraph

ここからさらに省略して、頭文字だけにします。

Paragraph -> p

実際にこの「<p>」がHTMLで定義されている段落のタグになります。
つまり、先ほどの文章を正しくHTMLで記述するとこうなります。

<p>
    僕は、これからホームページの作り方を勉強して、立派なWEBデザイナーになる！
</p>

これで、段落という役割を持たせれました。
このようにタグは、意味や役割を表す単語を< 〜 >で囲みます。

ちなみに意味や役割を表す単語の事を「要素名」と呼びますので、これも合わせて覚えておきましょう。

<要素名>
    内容
</要素名>

まずは、上記のように、「内容」をタグで挟むという基本を理解しましょう。
これが、 HTMLの「ML」部分
つまり、マークアップ言語ということです。

また、開始を表すタグ（<要素名>）を「開始タグ」と呼び、
終了を表すタグ（</要素名>）を「終了タグ」と言います。

終了タグは、要素名の前に「/（スラッシュ）」という記号を付けるので注意してください。

そして、開始タグ〜終了タグまでを含む全体を「要素」と言います。

なお、HTMLの要素は、100種類程度あります。

多いですよね。
でも、これ全部が必ず必要というわけではありません。

僕らも普段会話する時に、国語辞典に載っている全ての単語を使っては会話していないですよね？

それと同様で、よく使う要素を覚えておけばだいたい大丈夫です。

その他の要素は必要に応じて調べればいいと思います。

では、実際に簡易的なホームページを作ってみましょう。

まずは、開発環境を用意してください。

HTMLの開発環境

HTMLは文書が書けるソフトと、ブラウザがあれば作れます。
文書が書けるソフトに関しては、一般的にテキストエディタと呼ばれるソフトを使う事が多いのです。

Windowsの方は最初から「メモ帳」というソフトが入っていますし、Macの方は「テキストエディト」というソフトが入っています。

なので、これらのソフトでHTMLを作る事が可能です。

別に、Wordでも作れます。

ただ、これらのソフトはHTMLを作るのに特化したソフトでは無いので、少し作りにくいです。

なので、HTMLを作るのに便利なテキストエディタをいくつか紹介します。

テキストエディタ

TeraPad（Windowsのみ）: Windows用のとってもシンプルな無料のテキストエディタです。HTML形式で保存するとタグの部分の色が変わるので見やすいです。
窓の杜（TeraPadダウロードページ）

mi（Macのみ）: Mac用のとってもシンプルな無料のテキストエディタです。HTML形式で保存するとタグの部分の色が変わるので見やすいです。
miダウロードページ

Atom: タグの自動補間機能など、便利な機能がある無料のテキストエディタです。2016年5月現在僕もメインで使ってるテキストエディタです。
Atomダウロードページ

Sublime Text3: 「恋するテキストエディタ」と呼ばれる話題のテキストエディタです。Atomとも良く似ているのですが、こちらは有料ソフトです。ただし、無期限で無料お試しができます。
Sublime Text3ダウロードページ

ホームページ・ビルダー: ドラック操作で簡単にホームページが作れる、高機能な有料ホームページ制作ソフト。
ホームページ・ビルダー製品紹介ページ

Dreamweaver: プロ御用達の高機能なホームページ制作ソフト。Word感覚でタグが付けれます。
Dreamweaver製品紹介ページ

他にも「さくらエディタ」や「秀丸エディタ」などさまざまテキストエディタがあるので、お好みのものをインストールしてください。

個人的には、「Atom」とか「Sublime Text」が使いやすくておすすめです。が、勉強中は自動でタグが入力されることで、記述ミスは減る反面、タグを覚えなくなる可能性もありますね。

ちなみに、僕は「TeraPad」でHTMLの勉強をしました。

ブラウザ

ブラウザとは、ホームページを見る為のソフトです。

Windowsであれば最初から「Internet Explorer」というブラウザが入っていますし、Macであれば「Safari」というブラウザが入っています。

なので、これらだけでも十分ですが、ほかにもよく使われているブラウザがあるので、持っていないブラウザがあればインストールしておくといいかと思います。

Internet Explorer: Microsoft社が出しているブラウザ。2016年5月現在、PC環境においてのシェアは1位です。Windows環境のみインストールできます。
Internet Explorerのダウンロードページ

Safari: Apple社が出しているブラウザ。Mac、iPhone、iPadなどに最初から入ってます。2016年5月現在、モバイル環境においてのシェアは1位です。
Safariのダウンロードページ

Firefox: Mozira社が出しているブラウザ。機能を拡張できたり、業界では使っている人が多いブラウザ
Firefoxのダウンロードページ

Google Chrome: Google社が出しているブラウザ。ブラウザとしては後発組だが、機能を拡張できたりセキュリティも高く、業界では使っている人が多い
Googleのダウンロードページ

Opera: Opera社が出しているブラウザ。この中では知名度は低いですが、歴史は古いブラウザ。TVのブラウザとしても採用されている
Operaのダウンロードページ

以上が、主要のブラウザです。
ホームページの制作者は上記のブラウザで表示が崩れていないかなどの表示確認を行なう必要があるので、いつかは全部インストールしておくといいと思います。

【演習】HTMLを書いてみよう！

それでは、実際に書いて行きましょう。

注意点は2つです。

タグは必ず半角英数で
終了をタグの「/（スラッシュ）」を忘れずに

では、テキストエディタを開いて、下記をおもむろに書いてみて下さい。

index.htmlの作成

まずは、テキストエディタを開き開きましょう。

下記のHTMLをそのまま書いてください。

<html>
<head>
<title>ここにタイトル</title>
</head>
<body>
<p>ここに本文を入れる</p>
</body>
</html>

書けたら、今回は、デスクトップに「index.html」というファイル名で保存しましょう。
（ほとんどのテキストエディタは左上の「ファイル」->「保存」で保存で来ます。）

HTMLのファイル名

HTMLのファイル名は必ず「◯◯.html」という形式で保存する。（拡張子：.html）
◯◯の部分は任意で記入するが、必ず半角英数字で命名する。なお、使える記号は「-（ハイフン）」と「_（アンダーバー）」のみ。
デスクトップに保存したHTMLファイル（index.html）をダブルクリック
勝手にブラウザが開きます。

スクリーンショット

こうなっていれば正解です。
おめでとうございます。これがホームページです。

タイトルの文字はブラウザの上に表示されます。

画面が真っ白の時は、どこかが間違っていますので、もう一度確認しましょう。

ファイルを編集するときは、ダブルクリックではなく、テキストエディタのアイコンや、テキストエディタの画面の中にファイルをドラック&ドロップすれば、開けます。

解説

きちんと表示できましたか？
それでは、「index.html」で使った要素の解説をします。

結論からいうと、p要素を除いた4つの要素はどのホームページにも存在する、HTMLの基本構造の要素です。

HTMLの基本構造の要素

html要素: ルート要素と呼ばれ、他の全ての要素はこのhtml要素の中に存在しなければなりません。

head要素: このページの情報であることを表す要素で、タイトルや文字コードなどの情報を中に含める事ができます。※head要素の中身は基本的には画面に表示されません。

body要素: ホームページのコンテンツ（内容）であることを表す要素。画面に表示したい情報は全てこのbody要素の中に配置する

title要素: このページのタイトルを表す要素。ブラウザの上部や、検索エンジンの検索結果ページに表示される

この4つのタグは毎回使うタグになるので、何度も書いて覚えましょう。

【演習】HTMLコードを見やすくしよう

さて、上記の内容でホームページ的には問題ないのですが、これからたくさん文章を書いて行くと、
HTMLファイル内で、どの要素の中にどの要素が挟まれているのかがわかりにくくなっていきます。

そこで、今後HTMLの要素を見やすくする為に「インデント」を付けます。

インデント: インデントとは字下げの事で、半角スペースや、タブ（キーボードの[tabキー]）を使ってつける。一般的にインデントは半角スペース2つ分か、4つ分つける事が多い。タブを使う場合の半角スペースの数はテキストエディタによって異なる。

具体的には、中に入っている要素になればなるほど、インデントの量を多くします。

index.htmlの編集

テキストエディタを開く
index.htmlをテキストエディタの画面内にドラックしたファイルを開く

以下を参考にインデントをつける
（この例のインデントは、半角スペース2つ分にしています。）

<html>
  <head>
    <title>ここにタイトル</title>
  </head>
  <body>
    <p>ここに本文を入れる</p>
  </body>
</html>

ファイルを上書き保存
デスクトップのHTMLファイル（index.html）をダブルクリックしブラウザで確認

この様に、要素の外であれば半角スペースやタブを付けても、ブラウザ上では何も影響しませんので、HTMLファイルのコードは誰もが見やすいように調整しましょう。

要素内でのスペースはスペースとして反映してしまいますから、そこは注意してくださいね。

まとめ

HTMLは、ホームページの文章に意味や役割を持たせる言語です。

意味や役割を持たせるには、タグという印を使い文章を挟みます。意味や役割を表す単語の事を要素名と呼び、開始タグから終了タグまでを含む全体を「要素」と呼びます。

<要素名>
    内容
</要素名>

まずは、この「内容をタグで挟む」という基本を覚えましょう。

次回は、「HTMLの属性と属性値」を学習しましょう。

【HTML入門】HTMLの属性ってなに？属性の役割と書き方

2016.05.18