目次
1. 新人エンジニアが最初に知っておきたいHTMLの学び方
1.1 なぜ、新人エンジニア研修でHTMLを学ぶのか、その理由
ここでは、IT系企業の新人エンジニア研修向けにHTMLを解説しています。
デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、そんなあなたのためのページです。
2020年にはインターネットにつながる端末の数は530億個だそうです。（IHS Technology調べ）
必然的に新人エンジニアのみなさんが関わるシステムも何からの形でインターネットに接続されていることでしょう。
インターネットのWebページはWebブラウザで表示できますね。
Webブラウザで見られるファイルを作るだけでしたら簡単です。以下の3ステップでできます。
- サクラエディタのようなテキストエディタを用意して、表示させたい文章を入力してください。
- ファイルを保存するときに「index.html」と名前を付けて保存してください。
- index.htmlをgoogle Chromeなどのブラウザで開くと書いた文字が見えますね。
※ちなみにこの「index.html」をウェルカムページといいます。ウェルカムページは、ディレクトリだけを指定してアクセスしてきた場合に表示するページです。
弊社のURLを例にとると「https://saycon.co.jp/」でアクセスした場合でも「https://saycon.co.jp/index.html」として解釈される特別なファイル名です。
ウェルカムファイルはデフォルトファイルと呼ばれることもあります。
しかし、この方法は本来のWebページを作成する方法ではありません。
Webページの見かけに騙されずに、真の姿を見てみましょう。
例えば、ブラウザのこの画面で、右クリックしてコンテキストメニューから「ソースを表示」といった意味のメニューを選択してみて下さい。
タグ＜＞で囲まれた多くの文字列が現れると思います。
これがWebページの真の姿です。
Webブラウザによって解析されて今までご覧いただいたようなグラフィカルなページが生成されるのです。
以下では正しいWebページ作成の方法、HTMLとCSSファイルの書き方を学んでいきます。
HTMLはプログラミング言語ではない
厳密にいうとHTMLはプログラミング言語ではありません。
HTMLはマークアップ言語です。
マークアップ言語とは，文書の構造のための言語のことで、HTMLの他にはXMLなどがあります。
プログラミング言語はコンピューターに広い意味での計算処理をさせるものをいいます。
1.2 HTMLの雛形を作成する
HTMLは、「HyperText Markup Language」 の略で、見出しや段落などWebページの構造部分を担当する言語です。
CSSは、「Cascading Style Sheets」の略で、色や大きさなどHTMLの修飾部分を担当する仕様です。
まずは、後々まで使えるようなHTMLとCSSの雛形を作成しましょう。
先に実行例をブラウザで見てみます。
＜アウトプット＞
＜HTMLのソースコード＞
＜CSSのソースコード＞
テキストエディタでソースを書いていきます。
上記のソースコードを入力（またはコピー＆ペースト）してください。
まず、最初にHTMLの基本をみていきます。
<!DOCTYPE html>は、文書がHTML5で作成されたものであることを宣言するための文です。
HTMLには基本的に開始タグ、終了タグがあります。
開始タグは<html>
終了タグは</html>
のように違いは“/”が入るか入らないかです。
HTMLのタグには以下のような意味があります。
＜要素名 属性=“属性値”＞内容＜/要素名＞
属性の例は例えば「meta charset="UTF-8">」というのがそうです。
メタというのは超えるという意味ですが、この場合はHTMLの情報に対する情報という程度の意味です。
文字コードがUTF-8ですよということをブラウザに伝えているのですね。
今回は文字コードのみを設定しています。
文字コードはインターネット上で標準的な文字コードであるUTF-8にしています。
（テキストエディタで保存する際の文字コードもUTF-8を選んでくださいね）
例えばここで文字コードを「UTF8」のように間違えて設定すると日本語の場合文字化けが起こる可能性があります。
なお、属性は以下のように複数設定することもできます。
＜要素名 属性１=“属性値１” 属性２=“属性値２”＞内容＜/要素名＞
例えば以下の例では3つの属性があります。
「<link href="css/mystyle.css" rel="stylesheet" type="text/css"」
属性と属性の間はスペースで区切ります。
<head>内には、サーチエンジン向けのキーワードや説明、文書のタイトル利用するスタイルシートなど
その文書に関する情報を記述します。
スタイルシートの設定
次にスタイルシートの設定を担っているのが以下の記述です。(再掲)
<link href="css/mystyle.css" rel="stylesheet" type="text/css"/>
適用させたいスタイルシートは<link>のhref属性の属性値で指定します。
今回は、HTMLファイルを同じファイルにcssという名前のフォルダを作り、その中に“mystyle.css”を作っています。
rel属性、type属性は決まり文句です。
CSSの記述ルール
CSSを記述するにはこう書きます。
セレクタ {属性:属性値;}
セレクタ【selector】とは、CSSの装飾をかける対象のことです。
セレクタにはHTMLの要素名や後で学ぶid属性とclass属性を指定することができます。
また、属性の指定はコロン「:」です。
HTMLでは 「⁼」 でしたのでお間違いのないように。
ちなみにコロン「:」 は「⁼」と同じ意味です。
なお、属性は以下のように複数設定することもできます。
セレクタ {
属性１: 属性値１;
属性２: 属性値２;
}
属性の行末に;（セミコロン）を打ちます。
HTMLではスペースで区切るだけでしたね。
セミコロンを打つCSSはJavaやMySQLと同じと覚えてください。
「どのセレクタのどの属性をどの値にするか」と日本語の順番に読めば理解しやすいと思います。
今回はbodyタグの内容をグリーンにしています。
タイトルの設定
次にこのページのタイトルを設定します。
タイトルはひな形のtitileタグに書いていきます。
今回は説明のため、
<title>このタイトルはブラウザのタブに表示されます</title>
としました。
bodyタグ内にコンテンツ本体を書く
bodyタグ内に文字などを書くと、画面に表示されます。
今回は下記のように書いています。
<body>
本文はここに書きます </body>
以降では、この雛形を使ってHTMLを学んでいきます。
人間も体（body）は外から見えますが、頭（head）の中は外からは見えません。
HTMLも同じと覚えてください。
(実はheadタグ内の内容も表示されてしまうのですが… 正体不明な出力があったらheadタグ内も疑ってください)
コメントはブラウザには表示されない
HTMLのコメントは<!-- と --> に囲まれた部分です。
コメントには将来の自分自身や他者へのメッセージを書いておきます。
コメントはブラウザの通常の表示では見えません。
ただし、ソースコードを表示する（グーグルクロームならページ上で右クリックして「ページのソースを表示（V）を選択」）と見えてしまいますので、読まれて困ることは書かないようにしましょう。
2. リクエストとレスポンスを確認する
Webページを表示するこの仕組は、ワードやエクセルの文書がパソコンに表示されるのとは少し違う仕組みです。
HTTP/1.1では、実行した瞬間に主として下図1.1の3ステップが実行されるのです。
- ブラウザからWebサーバーにリクエストが送られます。
- WebサーバーがレスポンスとしてHTMLファイルを送り返します。
- ブラウザがHTMLファイルを解析して表示します。
今回少し分かりにくいのは、新人エンジニアの皆さんのパソコンが1台2役でクライアント（Webブラウザ）とサーバー（Webサーバー）を兼ねているからですね。
確かに「クライアントとサーバーの間でリクエストとレスポンスが行き来した」という証拠を見てみましょう。
ここからは以下の3つのものが必要になります。（教室により微妙に異なります）
- ChromeやEdgeのようなブラウザのデベロッパーツールという開発者用のツールを使います。（ショートカットはF12です）
- NetBeansやEclipseのようなIDEを使いWebページを作成していきます。
- GlassfishやTomcatのようなアプリケーション・サーバーを準備します。
詳細な使い方は講師から説明があります。
あとでWebアプリケーションを学ぶところで大事になりますので下図2にある「Network」の「Headers」の「General」の「Request URL」、「Request Method」 、「Status Code」といったところを確認して下さい。
下図1.2の表示になればOKです。
また、レスポンスとしてHTMLデータが返って来ていることも確認しましょう。
下図1.3のように「Response」のタブを開けてレスポンスのHTMLを見てください。
今はピンとこないかもしれませんが、リクエストとレスポンスは今後Webアプリケーションを学ぶ上で大変重要です。
実験1
本章の最初にアプリケーション・サーバーを起動せずにローカルのindex.htmlファイルをブラウザで開きました。
その場合のディベロッパーツールの「Network」の「Headers」の「General」のところの表示はどうなっているでしょうか？
| 実験結果のメモ： |
以上、今回は「HTMLの雛形」を作りました。
次回は、「見出しで文章を構造化する方法」を学びます。
<まとめ：隣の人に正しく説明できたらチェックを付けましょう>
□HTMLのタグの意味は次の通り、＜要素名 属性=“属性値”＞内容＜/要素名＞
□CSSの記述の意味は次の通り、セレクタ {属性: 属性値;}
□httpプロトコルではブラウザからのリクエストに対して、サーバーがHTMLファイルをレスポンスして、ブラウザがWebページを表示する