（1）HTMLはメモ帳とブラウザだけで簡単に表示できる!!―導入編
もはやスマートフォンやタブレット、パソコンなどの情報端末は生活の中で欠かせないものになりましたね。特に昨今は在宅勤務やリモート会議、コミュニケーションツールを利用したオンライン飲み会や遠隔授業など時勢に合わせてIT（information technology / 情報技術）の使い道もどんどん変化しています。
この波や時間の使い方の変化を機にブログやYouTubeなどの配信を始めた方も多いのではないでしょうか。
さて、YouTubeを始めその他の動画配信サービスや「アプリ」などとなると正直その仕組みはさっぱりですが、例えば身近な何かを思い浮かべてその情報をブラウザで検索して閲覧してみてください。
するとブラウザのURL欄の末尾に「.html」という拡張子※1が付いているかもしれません。設定によって表示されない場合もありますが、これは「HTML（HyperText Markup Language）という言語を使用して記述したファイルですよ」ということを示しています。
いわゆる「言語」というとプログラミング用に使用される言語が思い浮かぶかもしれませんが、同じ「コンピュータ言語」でもHTMLは「データ記述言語」と呼ばれ「プログラミング言語」とは違います。ただ、HTMLもデザインやユーザビリティ※2などに趣向を凝らしていこうとすると「PHP」や「Java」などのプログラミング言語も必然的に使用することになるので全く接点がないとも言えません。
※1 ファイルの種類を表す末尾の文字列
※2 利用者がストレスを感じることなく満足できるかどうか
小難しいことはともかく、ブラウザはこの「HTMLファイル」を受け取ることでその記述通りに情報を表示するアプリケーションになる訳ですが「そもそもどうしたらこんな風に表示できるの??基礎から知りたいよぉ!!」という方に是非参考になればと思い『メモ帳（テキストエディタ）』と『ブラウザ』だけでHTMLを作成する方法を自分でも復習しながらなるべく丁寧に記載したいと思います。無料ブログやその他SNSなどを頻繁に利用していると文字を打って画像やURLを指定するだけで簡単に華やかな見栄えに仕上げてくれますが、果たしてその裏では何が起きているのでしょうか。
ちなみにこのサイトもMicrosoft社の『Visual Studio Code』というエディタを使用して作成しています。視認性も良くコード記述の際のアシストなど便利な機能が多く便利です。
私はHTML等に関しては実務経験はなくあくまで趣味の基礎レベルなので、現場で通用する知識までみっちり鍛えたい方は!!…共に地道に頑張りましょう。
メモ帳とブラウザを起動しよう
まずHTMLファイルを作成するために『メモ帳』と『ブラウザ』を起動しましょう。
一般的にコンピュータ言語の作成というとApple社のMacの方が（PhotoshopやIllustratorもサクサク動いてウェブデザインにも応用できるので）使い勝手が良いようですが、私の力量ではそこまで専門性も出せないのでここから先はOSは常にMicrosoft社のWindows10でご説明します。
まず、画面左下の「スタート」ボタンの「よく使うアプリ」から「Windows アクセサリ」→「メモ帳」の順で探してみましょう。
どうしても見つからない場合は「スタート」ボタン右側の「ここに入力して検索」という欄に「メモ帳」と打てば「最も一致する検索結果」に出てきます。これから頻繁に使用するかなと思ったら「メモ帳」のアイコンをデスクトップにドラッグすればショートカットが作成できます。
ブラウザ（ウェブブラウザ）は普段使用しているもので構いません。シェアで言うとパソコンなら『Google Chrome』、モバイルなら『Safari』あたりが有名かもしれませんが、『Firefox』でも『Edge』でも『Internet Explorer（IE）』でも今のところは何でも問題ありませんのでお気軽に。
ブラウザに「宣言」しよう
１）メモ帳を起動したら早速以下の文字列を頭に記述してみましょう。
<!DOCTYPE html>
これは「これから記述する言語はHTML5という（HTMLの現時点最新）バージョンに基づくものですよ」ということをブラウザに宣言するものです。これがないと後々ブラウザ側が記述ルールを判別できず「この記述はどう表現したらいいんだろう??」とわからなくなってしまう場合があるので、最初にそれを明記することでブラウザを導いてあげます。
２）次は「ここからHTMLですよ」というはじまりを伝えるタグ（半角の<>で囲まれた文字列）の開始タグです。
<html>
とてもシンプルですが、これがないとブラウザはHTMLファイルを受け取ってくれません。アルファベットを囲む<>のカッコ（タグ）はこれからずっと使います。全角の＜＞ではなく半角の<>に注意です。
３）そしてブラウザに「ここまでがHTMLですよ」とおしまいを伝えるための終了タグも必要になります。
</html>
htmlの前に半角の /（スラッシュ）を付けると「おしまい」という意味になります。
間違いやすい例
・/<html>
・<html/>
・<html>/
カッコ内から飛び出したり、間違えてお尻に付けるとブラウザは認識しないので注意です。空白なども入れないようにしましょう。
<html>～</html>のような開始タグから終了タグまでのかたまりを「要素」といいます。<!DOCTYPE html>は文書型宣言（DOCTYPE宣言）と呼ばれる「宣言」を示すものであり、要素とは性質が異なるため終了タグの必要ありません。
ここまででメモ帳には以下の記述が記載されているかと思います。
ここまでの記述
<!DOCTYPE html>
<html>
</html>
タグを使用してあいさつ文を書いてみよう
４）ではブラウザに文字を表示させるためにはどうするかというと、以下のタグを使います。
<body></body>
これを<html>と</html>の間に記述します。
ここまでの記述
<!DOCTYPE html>
<html>
<body>
</body>
</html>
５）ちょっと駆け足ですが、次にこのタグを<body></body>の間に記述してみましょう。
<p></p>
このpは段落を意味するパラグラフ（paragraph）を表しています。ここに文字を打つことでブラウザは「あ、これが表示させたい文章なんだな」と認識してくれます。
ここまでの記述
<!DOCTYPE html>
<html>
<body>
<p></p>
</body>
</html>
なんとなくおわかりになるかもしれませんが、HTMLは入れ子構造での記述が基本となります。よく例えに挙がるのはマトリョーシカですね。
６）それではこの<p>と</p>の間に文字を打ってみましょう。よくテスト用に使用されるのは「Hello World」ですが、ここではとりあえず「こんにちは」と日本語で打ってみましょう。
ここまでの記述
<!DOCTYPE html>
<html>
<body>
<p>こんにちは</p>
</body>
</html>
これで下準備はOKです。
注）上記の簡易的なコードのままですと旧バージョンの『Edge』や『Internet Explorer（IE）』だと文字化けしてしまいますので、文字化けを防ぐためには<html>の下に以下のタグを記述してください。
文字化け対策の記述
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>こんにちは</p>
</body>
</html>
<head></head>はいわゆる「メタ（meta）的な情報を含んでいますよ」ということをブラウザに知らせる要素で、この中に記述した文字列がブラウザに表示されることは一部を除いてありません。
<meta charset="utf-8">は、ブラウザに「このファイルはUTF-8という文字コードで表示してください」と指定するものです。これにより文字化けが起こらなくなるので『Edge』や『Internet Explorer（IE）』を使用したい方は試してみてください。もしくは常に最新バージョンにアップデートしておくことをおすすめします。参考までに以下が文字化けの例です。
縺薙ｓ縺ｫ縺｡縺ｯ
テキストファイルをHTMLファイルに変換しよう
いったんメモ帳を保存しましょう。左上の「ファイル」から「名前を付けて保存」を選択し、ファイル名「*.txt」を「index.txt」と打ち直します。
HTMLには「index」という名称のファイルを作成しなければならないという共通のルールがあります。
ちなみに「ファイルの種類」は「テキスト文書（*.txt）」、「文字コード」は「UTF-8」のままで大丈夫です。
保存先はどこでも構いませんがとりあえずデスクトップに指定しましょう。デスクトップに「index.txt」というメモ帳のアイコンが出てくると思います。アイコンをゆっくりダブルクリック、もしくは右クリックで「名前の変更」を選択してください。
ファイル名が青くなったら、「index.txt」の「.txt」つまりファイルの種類を示す拡張子を「.html」に書き換えます。すると「拡張子を変更すると、ファイルが使えなくなる可能性があります。変更しますか？」という一瞬ぎょっとする警告文が出ますが、躊躇なく「はい」をクリックしましょう。名前の変更と同時にメモ帳のアイコンが何らかのブラウザのアイコンに変わったらHTMLファイルに変換できた証拠です。
また「名前を付けて保存」する時点で「ファイルの種類」を「すべてのファイル」に変更して「index.html」と拡張子を指定して保存することも可能です。やりやすい方法で問題ありません。
HTMLファイルをブラウザで開いてみよう
それでは作成したHTMLファイルをブラウザで開いて「こんにちは」がきちんと表示されるか確認してみましょう。
表示させるには、先ほど作ったアイコンをダブルクリックして開くか、既定のブラウザを開いてドラッグすると「+コピー」と出るのでそのままブラウザに落とします。アイコンを右クリックして「プログラムから開く」を選択して任意のブラウザで開くこともできます。
ブラウザ左上に以下のように表示されれば成功です。
こんにちは
こんな面倒なことをしなくてももっと簡単に表示できるのでは??と感じた方はどんどん実験してみましょう。私も最初は疑心暗鬼でトライアル＆エラーを繰り返していましたが、その過程も大事だなということを現在進行形で嫌というほど学ばせていただいております
ちなみに「こんにちは」とだけ打ったテキストファイルをブラウザで開くことも可能ですが、これですとHTMLとは関係なくなってしまうのでスルーしてください。
はじめての方にはちんぷんかんぷんな部分もあったかもしれませんが、私も最初は謎の記号や独特な規則の連続で頭を悩ませていました。それでも今では独学でブラウザで表示される前のHTMLファイルを見ただけでも何となくどう表示されるか感覚でわかるようになってきたので、好奇心さえあれば誰でも実務経験やスクール利用がなくても初歩的なスキルは獲得できると思います。
これだけではまだまだHTMLの真価が発揮できていないので、次回はもう少し踏み込んだ記述をしてだんだん情報量を多くしてみましょう!!
＼気になったらSHARE!!／
ナインティナイン岡村隆史のANNを聴いて…深夜ラジオは青春だ!!：前の記事
