Webサイト制作の基礎の基礎、HTMLって何？

友達に「コーディングが分かんないからHTMLとかCSSの解説記事書いて！」と言われていたり、新学期でこれからコーディングを勉強していく人も多いんじゃないかと思い、そんな方々にも分かりやすい記事を目指しつつ、僕自身の改めての勉強や細かい事なんかにも触れつつ、これからWeb制作に必要な知識を記事として書いていこうと思いました。

とは言え僕もWebに関して勉強し始めて1年ほど…
そんな僕が解説記事を出したところで、他にも技術的な事を書いた記事というのはネット上にたくさんありますし、専門書も数多く出版されています。
ですから僕の解説記事では、用語の語源であったりその構造自体がなぜそうなったのかというところまで僕と一緒に考えていくというスタイルでいけたらなと思います。

技術的な内容・方法をさっさと覚えてとにかく早くWebサイト作りたいんだ！という方は他の解説記事や専門書をご覧ください。
それでは第一回目はWebサイトってそもそもどういう仕組みで表示されているんだろう？という事とWebサイトを作る上で一番重要になってくる「HTML」というものの基礎について見てみましょう。

Webサイトが表示される仕組み

スマートフォンの普及で今や利用した事の無い人はいないんじゃないかというWebサイトですが、Webサイトを見に行くときはブラウザ（検索を行うためのアプリケーション）を利用しますよね。ブラウザから検索をかけたりURLを入力する事によってWebページが表示されます。
このWebページが表示されるまでの仕組みを少し細かく見てみましょう。

URLをブラウザに入力すると、ブラウザがインターネットを通じてそのURLに関するデータを、サーバーと呼ばれるデータを扱っている機械に要求します。
要求されるとそれに対して必要なデータがインターネット経由で送り返されます。そしてそれがブラウザで読み込まれ、Webページとして表示されます。

さて、送り返されるデータにはどんなものがあるのか考えてみましょう。
まずはWebサイトに載ってある文章ですよね。しかしWebサイトに載ってある文章の見た目ってすべて同じではないですよね。大きなサイズのものから小さなサイズのもの。色が違うものや太字になっているもの。装飾がされているものまで様々です。そういった情報も必要です。

他にもサイトで使われている画像も必要ですし、背景の色や装飾、最近のWebサイトはアニメーションが付いていて動きがあったり、マウスを乗せると変化するギミックがついていたりもしますよね。後はこれらの文章や画像をどこに配置するのかという情報も必要です。

このように色々出てきましたが、この中の「文章」や「画像」などの構造を設定していくのが「HTML」という言語になります。また後で詳しく説明するので今はそういう言語で作るんだ程度に留めておいてください。
そして、「文字の大きさ」や「色」「レイアウト」などの装飾を設定していくのが「CSS」 という言語です。
そこから更にダイナミックな動きやアニメーションに関しては「JavaScript」という言語で設定していきます。

これらを全て設定していってWebサイトは出来上がっていきます。そしてこれらの言語を使用してWebサイトを実装していく事をコーディングといいます。

HTMLってなに？

何度か既に出てきましたが構造を設定するHTML(エイチティーエムエル)はHyperText Markup Langageの略で、Web制作を行う上で最も基礎的なマークアップ言語です。少しHTMLについて深掘りしてみましょう。

ハイパーテキストというのは皆さんが普段Webサイトを利用する上で必ず使っている「リンク」の事で、複数の文書をつなぎ合わせる事のできる高機能なテキストの事です。Webサイトはクリックしたりタップすると別のページに移動したりしますよね？これって実は凄い事ですしWebならではの特徴です。ですからテキスト(Text)を超える(Hyper)という事でハイパーテキストとなったわけです。

では次にMarkupLangageについてですが、Langageは英語で「言語」。MarkupについてはWikiに語源が書いてありました。

「マークアップ」という用語は、英語圏で伝統的な出版の作業過程である原稿の「マーキング・アップ」という作業から派生した。「marking up」とは、原稿用紙の余白に印刷に関する指示の記号を書き加えることである。「マークアップ・マン」や校正者と呼ばれる専門家が、文章の各部分にどんなスタイル、書体、サイズを適用すべきかなどを記して組版の担当者に原稿を渡すという作業が、何世紀にもわたって行われていた。
マークアップ言語 – Wikipedia

色々と書いてありますが、要は「指示」だと思ってもらえればOKです。
パソコンで文字を打つとき(Windowsのメモ帳などを思い浮かべてください)普通にポチポチ入力するだけだと全く同じ大きさ、フォント(字体)にしかならないですよね？

しかしHTMLを使うと「ここからここまでの文は見出しだから大きくして」「この部分はリンクにしてクリックすると別ページで開くようにしよう」「ここは画像を表示させたい」「ここ重要だから太字にしておこう」という風に文章に指示を出して、構造的な文を書くことができるのです。その指示の事をMarkupと言います。

さて、ここまで説明した事をまとめると、HTMLは「ハイパーテキスト(リンク)を利用できる、文書にスタイルや構造の指示を出せる言語」という風な意味になるのではないでしょうか？
そうやって考えてみると普段僕たちが見ているWebサイトと言うのは、ただの文章をめちゃくちゃ綺麗に装飾して作られているという事になります。

CSSの登場

さて、HTMLは文書に指示を出せると先ほど書きましたが、全ての指示をHTMLのみで出すとなると物凄い文章量になってしまいますし、ごちゃごちゃし過ぎて後から修正したりするのが大変になってしまいます。
HTMLだけで全てを記述する事は可能ではあるのですが、構造と見た目を分離したいという声が高まり、登場したのが「CSS」です。

CSS(シーエスエス)(Cascading Style Sheet)はサイトのデザイン(見た目)を記述するための言語です。
Cascadingは「階層式」や「連鎖的に伝わる」という意味らしく、Webサイトの大まかな部分から細かな部分へ情報を受け継ぎながら表示させるスタイルシート言語(見た目を定義する言語)です。
詳しい事はHTMLがある程度終わってから解説しますが、基本的にWebページはHTMLとCSSの2つセットで表示させるんだという事を覚えておいてください。

HTMLのルール

このHTMLとCSSをきちんと記述する事でWebページは成り立っています。
裏を返せばHTMLとCSSをきちんと記述しないとWebページは成り立たないという事になります。
そしてWebの言語には規格(ルール)が決まっていて記述する際はそのルールにのっとって記述していかなければなりません。

そうしたHTMLの規格(ルール)はW3C(ダブルスリーシー)(World Wide Web Consortium)という団体が定めていて、現在はHTML5という規格が標準とされています。ですので今後のHTMLの解説は主にHTML5の記述だと思ってください。

HTMLタグ

さて、記述に関しての具体的な話は次回以降やっていきますが、HTMLは基本的にタグと呼ばれる方法を使って命令を当てながら記述していきます。

HTMLの語源の時にも言った通り、HTMLを使うと「ここからここまでの文は見出しだから大きくして」「この部分はリンクにしてクリックすると別ページで開くようにしよう」という風な事が可能になるのですが、要はこの「ここからここまで」という範囲を指定するために、指定したい文の最初と最後に目印を付ける必要があるのです。
HTMLはただの文字列なので、そうした目印を付けていかないと、どの部分に何をしたいのか指示がうまく通りません。

そしてタグは、<タグ名>のように「<」と「>」で囲まれた半角英語で、そのタグを使用して段落だったり画像の表示や、リンクの作成、表の作成などが行えます。

しかしこれだけではそのタグが命令の始まりを意味しているのか終わりを意味しているのか分かりません。
そこで、タグには開始タグと終了タグの2つがあり、終了タグは</タグ名>のように「/ スラッシュ」がつきます。基本的に開始タグと終了タグで文章を挟む事で、指示(マークアップ)完了です。

<タグ名>ここに文章を書く</タグ名>

そしてこのタグは色んな種類があり、使い方もタグによって様々です。
HTMLのクイックリファレンスというサイトでは、HTML5で使用可能なタグが一覧になっています。

www.htmq.com

HTML5リファレンス

http://www.htmq.com/html5/index.shtml

HTML5の解説

今回のまとめ

さて、少し短めですがこんな感じで今後進めていこうかと思います。
「ここ、こうやった方がいいんじゃない？」「ここが分かりにくい」という事等ありましたらコメント等してもらえると有り難いです。