HTMLコーダーへの道 (2)

うそっち

2023年7月5日 19:36

簡単なウェブページを作成してみる

パソコン設定の下準備

まずパソコンの設定で、ファイル名に拡張子が付くように設定変更をしてください。

『ファイルの拡張子を表示する方法』などでGoogle検索すると詳しい解説ページがたくさん出てきます。
Macなら『Macでファイルの拡張子を表示する方法』です。

テキストエディタを用意する

最初はWindowsの「メモ帳」でいいです。

『Windows メモ帳』『Mac テキストエディット』『ChromeOS Text』などのキーワードでGoogle検索するとアプリがどこにあるかや使い方などを教えてくれるページがたくさん出てきます。

HTMLファイルの作成

テキストエディタを起動して新規作成を行ってください。

白紙のウィンドウが開いたら「Hello World!」と入力して作業は完了。
ファイルの保存作業を行なってください。

保存するときのファイル名は「index.html」として、保存場所はデスクトップにしてください。
保存時の文字コードは「UTF-8」、改行コードは「LF」を指定します。
※文字コードと改行コードの設定は、他のHTMLファイルを保存する時でもこの先ずっと同じです。

ブラウザで表示

index.htmlのアイコンをブラウザのアイコンの上にドラッグ&ドロップします。
ブラウザはEdge、Chrome、Safari、Firefox、なんでもいいです。

ブラウザのウィンドウが開いて左上の端っこに「Hello World!」という文字が出たら、あなたにはコーダーとしての適性が備わっています。

次に進みましょう。

ちゃんと整えてみる

実は先ほど作ったファイルは省けるものは全部省いたという極端なもので、初期のHTMLでは違反ではなかったのですが、現在は書式的に許されない不完全なものです。

必要なものを加えて最小構成でコーディングしたものが以下になります。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width">
		<title>TEST</title>
	</head>
	<body>
		<p>Hello World Again!</p>
	</body>
</html>

再びテキストエディタで新規作成を行い、上の記述を丸々コピーして保存作業を行なってください。
今度は「index2.html」の名前でデスクトップに保存してみましょう。
index2.htmlのアイコンをブラウザのアイコンにドラッグ&ドロップします。

index.htmlのときとまったく同じように、ブラウザの左上の端っこに「Hello World Again!」という文字が出たら成功です。
そして今回はブラウザのタブに「TEST」と表示されているはずです。

いかがでしょう？
テキスト量が一気に増えたにも関わらず、ブラウザに表示されるのは結局のところ「Hello World Again!」だけなんてちょっと面白いと思いませんか？
これから先、ウェブページが凝ったものであればあるほど、本文よりもずっと大量の表には出てこない記述をすることになります。

タグを理解する

（※HTMLのタグとTwitterのハッシュタグはまったく無関係です）

HTMLのタグは「要素」というものを作るためのパーツです。

任意のテキストを「開始タグ」と「終了タグ」で挟むと「要素」になります。

HTMLファイルは「要素」が集合したもので、HTMLファイルを構成するものはあらかじめ何かしらの「要素」に整形しておかなければなりません。

Hello World Again!
の場合、がp要素の開始タグ、がp要素の終了タグです。

開始タグから終了タグまでの『Hello World Again!』全体が「p要素」というものになります。

ウェブページがブラウザに表示される際に、タグ部分は非表示になります。タグは、たとえばドラマの脚本でいうところの「柱書き」や「ト書き」のような役割なので、最終的にはウェブページの閲覧者には見せないのです。

以上の説明は「通常の要素」についてのものです。「要素」にはもう1種類、「空要素」（からようそ）と呼ばれるものがあります。

「空要素」には「開始タグ」だけが存在し、「終了タグ」と間に挟むテキストは存在せず、「開始タグ」が「要素」そのものになります。
たとえばimg要素やbr要素が空要素ですが、詳しくはまた今度解説します。

「空要素」の「空」とは間に挟むものが無いという意味で、「何も意味がない空虚な要素」という意味ではありません。
要素として中身は詰まっています。

ここまでのまとめ

HTMLファイルは「要素」というものだけで構成されていて「要素」化されていないものを含んではならない。
「通常の要素」は、任意のテキストを開始タグと終了タグで挟んで作られる。
終了タグが存在せず、開始タグだけで要素となるものがあって、そういったものを「空要素」という。
まとめると「要素」には「通常の要素」と「空要素」の2種類がある。

各行解説

先ほどコーディングしたものを解説します。

<!DOCTYPE html>
は「ドキュタイプ宣言」というものです。
HTMLのバージョンごとにさまざまなドキュタイプ宣言がありますが、これからHTMLを学ぶ人はこれ1択です。
さきほど、『HTMLファイルを構成するものはすべて何かしらの「要素」にしなければなりません』と書きましたが、ドキュタイプ宣言は厳密にいうと要素ではありません。
初っ端から申し訳ないですが、例外はこれだけです。

<html lang="ja">
は、html要素の開始タグです。
全記述の一番最後に終了タグが出てきます。
タグの中に「lang="ja"」という属性が挿入された状態です。
この属性を入れておかないと『中国語のフォントと日本語のフォントのどちらで表示する？』とブラウザに尋ねられることがあるので必ず入れましょう。

このように、開始タグには属性というものが挿入されることがあります。
終了タグに属性が挿入されることはありません。

あと、タグの中身（「<」と「>」の間の文字）は基本的に半角アルファベットの小文字を使用します。
HTMLにおいては大文字と小文字は同じものだと捉えられて区別されないので大文字を使用しても問題は発生しないのですが、ウェブ制作を複数人で共同で作業する場合、小文字を使用するというのが暗黙の決まりです。
小文字で書くことを習慣付けてください。

<head>
はヘッダ情報を格納するhead要素の開始タグです。
あとで終了タグが出てきます。
ヘッダ情報はブラウザや検索エンジンのクローラーにHTMLファイルとしての概要を伝えます。

「UTF-8」以外の日本語用のキャラクターセットは「JIS」「Shift_JIS」「EUC-JP」などがありますが、現在は世界中の全ての国で「UTF-8」1択です。
UTF-8の中には日本語も韓国語もフランス語もアラビア語も何もかも入っています。
なので、いずれこれがデフォルトになればわざわざ指定などしなくても良くなるかもしれませんが、現状では入れておかないと不具合が出ます。

「キャラクターセット」と「文字コード」は厳密には違うものですが、ほぼほぼ同義と考えてもらって差し支えないです。

なお、meta要素は「空要素」なので終了タグがありません。

<title>TEST</title>
はtitle要素です。
Googleの検索結果で表示される各ウェブページへのリンクの部分にtitle要素内の文字列が使用されます。

</head>
は先ほど後で出てくると書いたhead要素の終了タグです。
ここでhead要素が終了しました。

<body>
はbody要素の開始タグです。
あとで終了タグが出てきます。

Hello World Again!
はp要素です。
やっと本文の要素が出てきました。
pはパラグラフ（段落＝テキストのひとかたまり）の意味です。
p要素については今度またもう少し詳しく解説します。

</body>
は先ほど後で出てくると書いたbody要素の終了タグです。

</html>
は先ほど後で出てくると書いたhtml要素の終了タグです。
HTMLファイルの最後の1行は必ずこれになります。

要素は入れ子にするもの

ここまでの説明で気付いたでしょうか？
HTMLファイルは「要素」というものだけで構成されると説明したのですが、

要素
要素
要素
要素

という単純なブロックの積み重ねではないのです。

「要素」は箱の形をしていると想像するとわかりやすいです。
まずhtml要素という大きな箱があり、ここに中身を詰め込んでいきます。
html要素を包むさらに大きい箱というのはありません。
html要素が一番外側の箱です。

html要素の中には何でも無秩序に放り込めるというわけではありません。
html要素の中に直接入れることができるのはhead要素とbody要素という2種類の箱だけです。
順番もhead要素、body要素という具合に決まっています。
この際、『head要素とbody要素はhtml要素の子要素』という言い方をします。
html要素、head要素、body要素の出現回数は1ファイルにつきそれぞれ1回づつです。

body要素の中にブラウザに表示される情報を入れていくわけですが、デザイナーさんの希望通りの見映えを実現するために知恵を絞っていくという作業がここから始まります。
body要素の中も「要素」を入れ子入れ子にしながら整理して情報を詰め込んでいくのです。

本日はここまでです。
お疲れ様でした。