2.1.1HTMLを触ってみよう
まえがき
この回から、いよいよ本題となる
「プログラミング」
の部分を解説していきます。
HTMLって何？
htmlとはwebサイトをつくるために世界中で使用されているコンピューター言語です。またhtmlは略称で正式には「Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」
プログラミング言語には他にも
CSS、JavaScript(この2つもスロットで使われています)
など、沢山あります。
そして、それらの言語には
それぞれの「できること」や「コードの書き方」などがあります。
HTMLができることは、
webブラウザに対して
「どのようにwebページを表示するか」を指示すること
という認識で大丈夫だと思います。
簡単な話だと、文字を表示するところから始まり、
そこから 文字を改行したり、文字の大きさや段落を設定する
ということができます。
なので、プログラミング言語というより
「書式（フォーマット）付きテキスト」いわゆる「リッチテキスト」
という認識も少なくありません。
このスロットのプログラミングはWeb上で動かすこと前提で作られたので、
HTMLがないと何も始まりません。
HTMLを書くために便利なソフト
実際にプログラムを書いてみる前に、
コードを書くための便利な無料ソフトがあるので、
そちらを先に用意してもらいます。
そのソフトは、
VisualStudio Code (略VSCode)
です。
インストール方法はこちらにて解説していますので、
先にVSCodeをインストールしてからここに戻ってきてください。
VSCodeでHTMLを書いてみよう
それでは、VS Code で新しいファイルを作成していきましょう。
メニューの 「ファイル」 から 「新規ファイル」 を選択すると新しいファイルを作成できます。
Mac の場合、画面の最上部にメニューが表示されているはずです。
もし表示されない場合、 VS Code のウィンドウをクリックして、アクティブな状態にしてみてください。
VS Code は、テキストを入力でき、保存したり読み込んだりできます。
名前をつけて保存
ファイルに名前をつけて保存してみましょう。 左上の ファイル から 名前を付けて保存… を選択します。
「名前」欄の右側のボタンをクリックします。
すると、保存先などを詳細に指定できるようになります。「デスクトップ」をクリックし、名前欄に my-first.html と入力した上で保存ボタンをクリックします。
保存が完了すると、先ほどまで Untitled-1 のように表示されていた部分が my-first.html に変わります。
untitled（アンタイトルド） : タイトルが付けられていないという意味。ファイル名を指定する前はこの表示になっていた。
なお、HTML Language Server や [object Object] などのエラーメッセージが、画面下部に表示される場合があります。
こちらは右上の小さな × ボタン（閉じるボタン）をクリックして閉じてかまいません。
VS Code で書く HTML
VS Code の HTML を書く機能を使ってみましょう。
VS Code の画面の中に半角で html:5 と入力し、 Tab を押しましょう。: は、コロンといい、キーボードの : を押すと入力できます（一般的な日本語キーボードであれば、 : にはひらがなの「け」が書かれているはずです）。
キーボードの左上の方にある Tab を押すと、HTML ファイルのひな形（テンプレート）が自動で入力されます。
Tab を押してもこのようにテンプレートが入力されない場合、HTML ファイルとして保存されていないことが考えられますので、保存のステップからやり直してみてください。
Mac のキーボード
比較的新しい Mac のキーボードでは、一部のキーの文字が省略され、記号だけで示されているものがあります。今回使った Tab キーもその 1 つです。また、 Esc （エスケープ）キーが Touch Bar（タッチバー）と呼ばれるタッチパネル上に表示されるモデルもあります。
慣れないうちはわかりづらですが、いずれもプログラミングでよく使っていくキーなので、この機会に覚えておきましょう。
HTML をざっくりと見てみよう
１行目は「この文章が HTML」で、2 行目は「ページの中身は英語で書かれている」という意味です。
よく見ると en と書かれている部分がありますね。この en が English （英語）を意味しているのです。
<!DOCTYPE html>
<html lang="en"></html>以下の部分は、この HTML ページが UTF-8 という文字セットで書かれていて、ページのタイトル（ブラウザに表示される名前）が Document という意味です。
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head><body>
</body>
</html>VS Code はプログラムを編集して保存できること以外に 補助 の機能があります。
補助の機能には
・プログラミングに関する単語を 補完 してくれる機能 (インテリセンス)
・HTML を手軽に記述するための機能 (Emmet)
・単語の色を変えてくれる機能 (シンタックスハイライト)
などがあります。便利ですね。Tips VS Code のアップデート（更新）
VS Code は最新バージョンが公開された場合、自動でお知らせしてくれます。
最新バージョンでは不具合が修正されたり、 新しい機能が追加されたりします。 ソフトウェアによっては安易に最新版をインストールすると動作に支障をきたしてしまうものもありますが、 VS Code は更新によって大きな問題が発生することは少ないため、出来る限り最新版にアップデート（更新）しておきましょう。
VS Code の画面下部に「利用可能な更新プログラムがあります」と表示されたとき、「更新プログラムのインストール」をクリックすることで最新バージョンに更新されます。Tips 文字セット
先ほど UTF-8 という単語が出てきました。
これは文字セットと呼ばれるものの一種で、あるテキストがコンピューターの中でどのように表現されるのかを表しています。
テキストをコンピューターが取り扱う方式を文字コードと言います。文字コードが違うと、テキストは異なる処理が成されるため、文字化けします。
たとえば「あ」という文字は、 UTF-8 では「E38182」という形で表されますが、 別の Shift_JIS という文字セットの中では「82A0」と表現されます。
このように、文字セットごとに違った変換表を持っています。 たとえば UTF-8 で書かれたテキストを、Shift_JIS で読み込もうとすると正しく読み取ることができません。
このように、文字セットの違いによって文字列が正しく表示されない現象を 文字化け と呼びます。
基本的に、Windows では Shift_JIS 、Mac や Linux では UTF-8 という文字セットが使われています。
HTML を編集してみよう
今度は HTML を編集してみましょう。
「ページの中身は英語だ」という内容が書かれていた部分を「日本語だ」という内容に変えます。
en の二文字を削除して、代わりに日本語 (Japanese) を表す ja を半角で入力します。
<html lang="en"></html>↓
<html lang="ja"></html>このHTMLページのタイトルを変更します。
<title>Document</title>↓
<title>はじめてのHTML</title>画面に表示されるページの中身として、こんにちは と書きます。
<body></body>↓
<body>
こんにちは
</body>このようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>はじめてのHTML</title>
</head>
<body>
こんにちは
</body>
</html>
メニューの 「ファイル」 から 「保存」 をクリックしてファイルを保存してみましょう。
Command を押しながら S を押すことで、メニューを開かずにすぐ保存することもできます。
この同時に押す操作を「ショートカットキー」といい、普通 ⌘ + S のように書いてあります。下の図でも「保存」の項目に、この書き方でショートカットキーが書かれていますね。
これで、編集した HTML がデスクトップにある my-first.html というファイルに上書き保存されました。 デスクトップから my-first.html を探して、ダブルクリックしてみましょう。
先ほど作った HTML が表示されます。 Chrome のタブの部分が「はじめての HTML」となっていて、ページの中身として「こんにちは」が表示されていれば成功です。
ページがうまく表示されない場合、一度書かれている HTML をすべて消して、ひな形から慎重にやりなおしてみましょう。
HTML のようなコードは、一文字でも間違えるとうまく表示されない場合があります。
これで HTML が書けるようになりました。
今度は、こんにちはをよろしくに書き換えます。その後、忘れずに保存も行いましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>はじめてのHTML</title>
</head>
<body>
よろしく
</body>
</html>また、VS Code のファイル名が表示されている部分を見ると、そのファイルが保存済みかどうかが分かります。
編集した後に保存し忘れていないかチェックする際に便利な機能なので、活用しましょう。
Chrome の再読み込みボタンを押してみましょう。 Command + R を押しても同じ結果が得られます。
「よろしく」に変更されていることが確認できます。
再読込しても変更されない場合、 Command + Shift + R を押してみてください。
HTML のしくみ
HTML とは、Hyper Text Markup Language を略記したものです。
文字や画像などを組み合わせ、文書を表示するための言語（マークアップランゲージ）の一種です。
マークアップ (Markup)とは、機械が読めるように内容に目印をつけることです。
<html> のような見た目をしたカタマリを、HTML タグといいます。 HTML では、この HTML タグで文章を囲むことでマークアップを実現します。
また、HTML はタグでマークアップすると、
- 内容の意味を決める
- 別のページへのリンクを作る
- 内容を装飾する
ということができます。こういった詳しいマークアップについては、また後で説明していきます。
HTML のタグは入れ子の構造を表現できます。 入れ子とは
上の図のように、親要素の中に子要素が入り込める構造のことです。
先ほどの HTML を例にすると、html というタグの要素の子要素に、head と body というタグを確認できます。
html というタグの開始タグ <html lang="ja"> と、終了タグ </html> の間にこれら子要素が含まれています。
まとめ
- VS Code というエディタを使って、手軽に HTML を書くことができる
- HTML は構造を持った文書を作るための言語
- HTML タグ は入れ子にできる