1.HTMLの学び方

1. 新人エンジニアが最初に知っておきたいHTMLの学び方

1.1 なぜ、新人エンジニア研修でHTMLを学ぶのか、その理由

2020年にはインターネットにつながる端末の数は530億個だそうです。（IHS Technology調べ）必然的に新人エンジニアのみなさんが関わるシステムも何らかの形でインターネットに接続されていることでしょう。インターネットのWebページはWebブラウザで表示できますね。Webブラウザで見られるファイルを作るだけでしたら簡単です。以下の3ステップでできます。

テキストエディタを用意して、「Hello World」という文字列を入力してください。
ファイルを保存するときに「index.html」と名前を付けてデスクトップなどに保存してください。ブラウザで見られるWebページの拡張子は「html」です。
index.htmlをgoogle Chromeなどのブラウザで開くと、書いた文字列が見えますね。

しかし、この方法は本来のWebページを作成する方法ではありません。

Webページの見かけに騙されずに、真の姿を見てみましょう。例えば、ブラウザのこの画面で、右クリックしてコンテキストメニューから「ソースを表示」といった意味のメニューを選択してみて下さい。タグ【tag】＜＞で囲まれた多くの文字列が現れると思います。これがWebページの真の姿です。Webブラウザによって解析されて今までご覧いただいたようなグラフィカルなページが生成されるのです。ちなみに英語でtagとは荷札のことですので、データに標識を付けてデータの構造を示しているのです。

以下では正しいWebページ作成の方法、HTMLとCSSファイルの書き方を学んでいきます。

HTMLはプログラミング言語ではない

厳密にいうとHTMLはプログラミング言語ではありません。HTMLはマークアップ言語です。マークアップ言語とは，文書の構造のための言語のことで、HTMLの他にはXMLなどがあります。プログラミング言語は、コンピューターに広い意味での計算処理をさせるものをいいます。

1.2 HTMLの雛形を作成する

HTML【HyperText Markup Language】は、見出しや段落などWebページの構造と、文字や画像など表示する要素を定義する言語です。

しかし、HTMLの機能だけでは、記述された要素を上から順番に表示していくことしかできません。

そこで、各画面要素の色や大きさ、表示位置など修飾部分を担当するCSS【Cascading Style Sheets】を使います。

つまり、HTMLで「何を」画面に表示するかを決め、CSSで「どう」表示するのかを記述するのです。

なぜ、構造部分（HTML）と修飾部分（CSS）を分けるのでしょうか？

その理由は、その方がWebを作りやすく修正しやすくなるからです。例えば家でも基礎や柱の部分はあまり変化しませんが、壁紙やカーテンは変化します。また、同じ壁紙やカーテン（CSS）を違う構造の建物（HTML）に使うこともできていますね。それと同じというイメージです。

まずは、後々まで使えるようなHTMLとCSSの雛形を作成しましょう。

先に実行例をブラウザで見てみます。

＜アウトプット＞

ブラウザで見てみる

＜HTMLのソースコード＞

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link href="css/mystyle.css" rel="stylesheet" type="text/css"/>
        <title>このタイトルはブラウザのタブに表示されます</title>
    </head>
    <body>
        本文はここに書きます<br>
        <a href="https://saycon.co.jp">当社サイトへ</a>
        <!--これはコメントなのでブラウザには表示されません。-->
    </body>
</html>

＜CSSのソースコード＞

body {
    background-color:  green;
}

EclipseなどのIDEでソースを書いていきます。上記のソースコードを入力（またはコピー＆ペースト）してください。

最初にHTMLの基本を上の行からみていきます。

<!DOCTYPE html>は、文書がHTML5で作成されたものであることを宣言するための文です。

HTMLには基本的に開始タグ、終了タグがあります。

開始タグは<html>

終了タグは</html>

のように違いは“/”が入るか入らないかです。また、現在ではタグは全て小文字で書きます。

HTMLのタグには下図のような意味があります。

上図のように属性の＝の右側にはダブルクオーテーションが付きます。

属性の例として、index.htmlの4行目の「meta charset="UTF-8">」というのもそうです。

metaというのは超えるという意味ですが、この場合はHTMLの「情報に対する情報」という程度の意味です。文字コードがUTF-8ですよということをブラウザに伝えているのですね。

今回は文字コードのみを設定しています。文字コードはインターネット上で標準的な文字コードであるUTF-8にしています。

実験

例えばここで文字コードを「UTF8」のように間違えて設定すると日本語の場合、ブラウザの種類によっては文字化けが起こる可能性がありますので試してみてください。最新のブラウザですとおそらく大丈夫ですが。

試した結果：

属性は複数設定することもできます。

上記index.htmlの5行目ではlinkタグにhref,rel,typeの3つの属性がありました。

属性と属性の間はスペースで区切ります。

<head>タグ内には、Webページを表示する前提条件を記述します。文字コードや言語、フォントの指定、CSSやJavaScriptの読み込みタグを書くわけです。 Webページに表示する内容は、<body>タグ内に記述していきます。

タグは入れ子にすることもできます。以下の例はaタグをdivタグで囲んで入れ子にしています。

<div><a href="https://www.saycon.co.jp">当社サイトへ</a></div>

また、タグには開始タグのみで終了タグのない空要素と呼ばれるものもあります。上記index.htmlの9行目のbrタグがそうです。

本文はここに書きます<br>

スタイルシートの設定

次にスタイルシートの設定を担っているのが5行目のlinkタグです。

適用させたいスタイルシートは<link>のhref属性の属性値で指定します。今回は、HTMLファイルと同じフォルダにcssという名前のフォルダを作り、その中に“mystyle.css”を作っています。rel属性、type属性は決まり文句です。

ファイルの命名規則

HTMLやCSSさらにはJavaScriptなどのファイル名にはケバブケースを使用します。（例:sample-table.html）

ケバブケースというのは単語と単語を“-”つなぐ書き方です。日本の焼鳥のように串が刺さった肉のようにみえることからくる命名です。また、小文字を使い大文字は使わないことが一般的です。インターネット(UNIX)では大文字と小文字が区別されるため小文字に統一することにしているようです。例えばURLもそうなっていると思います。さらにアンダーバー“_”は使わないほうが良いとされています。

CSSの記述ルール

CSSを記述するには下図のように書きます。「何の」「何を」「どうする」と考えると分かりやすいでしょう。

セレクタ【selector】とは、CSSの装飾をかける対象のことです。

セレクタにはHTMLの要素名や後で学ぶid属性とclass属性を指定することができます。また、属性の指定はコロン「:」です。HTMLでは「⁼」でしたのでお間違いのないように。ちなみに英文でのコロン記号（：）の意味は一般に「⁼」と同じで等しいということです。

なお、属性は以下のように複数設定することもできます。

セレクタ {

　　　　　属性１: 属性値１;　

　　　　　属性２: 属性値２;

}　

属性の行末にセミコロン（;）を打ちます。HTMLではスペースで区切るだけでしたね。JavaやMySQLと同じく「CSSでも文末にセミコロンを打つ」と覚えてください。

「どのセレクタのどの属性をどの値にするか」と日本語の順番に読めば理解しやすいと思います。今回はbodyタグの内容をグリーンにしています。

CSSの属性はとても種類が多いのでリンク（目的別スタイルシート一覧）のような辞書がとても役に立ちます。

CSSの上書きに注意

CSSは、Cascading Style Sheets（カスケーディングスタイルシート）の略です。

【Cascading】には滝状の流れという意味があります。つまり、同じ属性に複数の指定がある場合には優先度が一番高い指定だけが有効になります。例えば、後に書いたものが先に書かれたものに優先します。（優先度の概念は大変複雑なため本研修では割愛します。）

このような仕組みのため画面全体の文字を大きくした後、Aの領域の文字色を黒、Bの領域の文字色は赤、というように、全体から部分へ連鎖的にデザインを設定できるようになっているわけです。

タイトルの設定

次にこのページのタイトルを設定します。タイトルはひな形のtitileタグに書いていきます。

bodyタグ内にコンテンツ本体を書く

bodyタグ内に文字などを書くと、基本は上から下、左から右に書いた順番に画面に表示されます。

人間も体【body】は外から見えますが、頭【head】の中は外からは見えません。HTMLも同じと覚えてください。(実はheadタグ内の内容も表示されてしまうのですが…　正体不明な出力があったらheadタグ内も疑ってください)

以降では、この雛形を使ってHTMLを学んでいきます。

コメントはブラウザには表示されない

HTMLのコメントの例は上記index.htmlの11行目をご覧ください。

コメントには将来の自分自身や他者へのメッセージを書いておきます。コメントはブラウザの通常の表示では見えません。ただし、ソースコードを表示すると見えてしまいますので、読まれて困ることは書かないようにしましょう。

2. リクエストとレスポンスを確認する

Webページを表示するこの仕組は、ワードやエクセルの文書がパソコンに表示されるのとは少し違う仕組みです。HTTP/1.1では、実行した瞬間に主として下図の3ステップが実行されるのです。

ブラウザからWebサーバーにリクエストが送られます
WebサーバーがレスポンスとしてHTMLファイルを送り返します
ブラウザがHTMLファイルを解析して表示します

今回少し分かりにくいのは、新人エンジニアの皆さんのパソコンが1台2役でクライアント（Webブラウザ）とサーバー（Webサーバー）を兼ねているからですね。

そこで確かに「クライアントとサーバーの間でリクエストとレスポンスが行き来している」という証拠を見てみましょう。

最初にインターネット上のサーバーとの通信

次にローカルホスト（皆さんのパソコン）との通信

の順で見てみましょう。

2.1 インターネット上のサーバーとの通信

先ほども見た以下のHTMLの雛形を使います。

ブラウザで見てみる

このHTMLファイルは当社のWebサーバーにあります。

皆さんのパソコンがクライアントです。

ブラウザでF12キーを押してみましょう。

下図のようなディベロッパーツールという画面になったかと思います。（ディベロッパーツールは画面の右または下に表示されます）

「ネットワーク」のタブを開いてみましょう。

requestAndResponse1 — Google Chromeのデベロッパーツールを開いたところ

「Ctrl + R」で画面を再読込します。

①index.htmlを選択して、②「ヘッダー」のタブを選択すると③「リクエストURL」が見えています。

「https://saycon.co.jp/html/format.html」というURLを確認してください。

また、あとでWebアプリケーションを学ぶところで大事になりますので、この図にある「リクエストURL」、「リクエストメソッド」、「ステータスコード」といったところを確認して下さい。特にhttpではWebページをリクエストする際にGETというメソッド使うという点は重要です。

また、レスポンスとしてHTMLデータが返って来ていることも確認しましょう。

下図のように「Response」のタブを開けてレスポンスのHTMLを見てください。レスポンスで返ってくるのはこのようなテキストデータです。もしも、みなさんが見ている画面そのものが1枚の画像として返ってくるとしたら容量が大きすぎて時間がかかってしまうでしょう。しかし、テキスト（と所々画像）がレスポンスであるためにそれほど時間がかからずWebが表示されるのですね。

requestAndResponse3 — Google Chromeのデベロッパーツールでレスポンスを確認する

2.2 ローカルホストとの通信

今度はローカルサーバーとの通信を見てみます。（研修中はこちらになります）

IDEでindex.htmlを実行してから同じようにディベロッパーツールを開いてみてください。

下図のように基本は同じ表示ですが、リクエストURLが「http://localhost:8080」と変化しているのが見て取れると思います。

今はピンとこないかもしれませんが、リクエストとレスポンスは今後Webアプリケーションを学ぶ上で大変重要です。

さらに詳しく知りたい方は補講.「Chrome DevToolsでサイトの見た目を変更する」を参照ください。

2.3 プロジェクトを実行すると起動するのがウェルカムファイル

「index.html」をウェルカムページといいます。ウェルカムページは、フォルダ（ディレクトリ）だけを指定してアクセスしてきた場合に表示するページです。
弊社のURLを例にとると「https://saycon.co.jp/」でアクセスした場合でも「https://saycon.co.jp/index.html」として解釈される特別なファイル名です。

プロジェクトを実行する際に起動するのがこのウェルカムファイルです。みなさんもウェブアプリを入れるフォルダの直下に「index.html」を作成してから、プロジェクト名（例えば、「04_HTML」を選択してから「サーバーで実行」してみてください。このファイルが立ち上がるはずです。）

実験2

本章の最初にアプリケーション・サーバーを起動せずにローカルのindex.htmlファイルをブラウザで開きました。その場合のディベロッパーツールの「ネットワーク」の「ヘッダー」の「全般」のところの表示はどうなっているでしょうか？

実験結果のメモ：

<まとめ：隣の人に正しく説明できたらチェックを付けましょう>

□ HTMLのタグの意味は次の通り、＜要素名　属性=“属性値”＞内容＜/要素名＞

□ CSSの記述の意味は次の通り、セレクタ {属性: 属性値;}

□ httpプロトコルではブラウザからのリクエストに対して、サーバーがHTMLファイルをレスポンスして、ブラウザがWebページを表示する

□httpではWebページをリクエストする際にGETというメソッド使う

□index.htmlはウェルカムファイルと呼ばれ、ファイル名を指定しなくても起動する

以上、今回は「HTMLの雛形」を作りました。

次回は、「文章の構造を表現するタグ」を学びます。

新人エンジニア向けHTML講座の一覧に戻る

HTMLの学び方（新人エンジニア研修向け解説）　最後までお読みいただきありがとうございます。

研修のカリキュラムを見てみる