# Webサイト制作の基礎の基礎、HTMLって何？ URL: https://webrandum.net/html-1/ 公開日: 2017-06-08 更新日: 2020-04-11 カテゴリー: コーディング タグ: HTML 出典: Webrandum（著者: サイトウ マサカズ） 友達に「コーディングが分かんないからHTMLとかCSSの解説記事書いて！」と言われていたり、新学期でこれからコーディングを勉強していく人も多いんじゃないかと思い、そんな方々にも分かりやすい記事を目指しつつ、僕自身の改めての勉強や細かい事なんかにも触れつつ、これからWeb制作に必要な知識を記事として書いていこうと思いました。 とは言え僕もWebに関して勉強し始めて1年ほど… そんな僕が解説記事を出したところで、他にも技術的な事を書いた記事というのはネット上にたくさんありますし、専門書も数多く出版されています。 ですから僕の解説記事では、用語の語源であったりその構造自体がなぜそうなったのかというところまで僕と一緒に考えていくというスタイルでいけたらなと思います。 技術的な内容・方法をさっさと覚えてとにかく早くWebサイト作りたいんだ！という方は他の解説記事や専門書をご覧ください。 それでは第一回目はWebサイトってそもそもどういう仕組みで表示されているんだろう？という事とWebサイトを作る上で一番重要になってくる「HTML」というものの基礎について見てみましょう。 ## Webサイトが表示される仕組み ![WebSite](https://webrandum.net/wp/wp-content/uploads/2017/06/website.png) スマートフォンの普及で今や利用した事の無い人はいないんじゃないかというWebサイトですが、Webサイトを見に行くときはブラウザ（検索を行うためのアプリケーション）を利用しますよね。ブラウザから検索をかけたりURLを入力する事によってWebページが表示されます。 このWebページが表示されるまでの仕組みを少し細かく見てみましょう。 URLをブラウザに入力すると、ブラウザがインターネットを通じてそのURLに関するデータを、サーバーと呼ばれるデータを扱っている機械に要求します。 要求されるとそれに対して必要なデータがインターネット経由で送り返されます。そしてそれがブラウザで読み込まれ、Webページとして表示されます。 ![ブラウザとサーバーのやり取り](https://webrandum.net/wp/wp-content/uploads/2017/06/Website_Server.png) さて、送り返されるデータにはどんなものがあるのか考えてみましょう。 まずはWebサイトに載ってある文章ですよね。しかしWebサイトに載ってある文章の見た目ってすべて同じではないですよね。大きなサイズのものから小さなサイズのもの。色が違うものや太字になっているもの。装飾がされているものまで様々です。そういった情報も必要です。 他にもサイトで使われている画像も必要ですし、背景の色や装飾、最近のWebサイトはアニメーションが付いていて動きがあったり、マウスを乗せると変化するギミックがついていたりもしますよね。後はこれらの文章や画像をどこに配置するのかという情報も必要です。 このように色々出てきましたが、この中の「文章」や「画像」などの構造を設定していくのが「HTML」という言語になります。また後で詳しく説明するので今はそういう言語で作るんだ程度に留めておいてください。 そして、「文字の大きさ」や「色」「レイアウト」などの装飾を設定していくのが「CSS」 という言語です。 そこから更にダイナミックな動きやアニメーションに関しては「JavaScript」という言語で設定していきます。 ![HTMLとCSSとJavaScriptの役割](https://webrandum.net/wp/wp-content/uploads/2017/06/html_css_js.png) これらを全て設定していって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)](https://www.w3.org/)という団体が定めていて、現在はHTML5という規格が標準とされています。ですので今後のHTMLの解説は主にHTML5の記述だと思ってください。 ## HTMLタグ さて、記述に関しての具体的な話は次回以降やっていきますが、HTMLは基本的にタグと呼ばれる方法を使って命令を当てながら記述していきます。 HTMLの語源の時にも言った通り、HTMLを使うと「ここからここまでの文は見出しだから大きくして」「この部分はリンクにしてクリックすると別ページで開くようにしよう」という風な事が可能になるのですが、要はこの「ここからここまで」という範囲を指定するために、指定したい文の最初と最後に目印を付ける必要があるのです。 HTMLはただの文字列なので、そうした目印を付けていかないと、どの部分に何をしたいのか指示がうまく通りません。 そしてタグは、<タグ名>のように「<」と「>」で囲まれた半角英語で、そのタグを使用して段落だったり画像の表示や、リンクの作成、表の作成などが行えます。 しかしこれだけではそのタグが命令の始まりを意味しているのか終わりを意味しているのか分かりません。 そこで、タグには開始タグと終了タグの2つがあり、終了タグはのように「/ スラッシュ」がつきます。基本的に開始タグと終了タグで文章を挟む事で、指示(マークアップ)完了です。 ``` <タグ名>ここに文章を書く ``` そしてこのタグは色んな種類があり、使い方もタグによって様々です。 HTMLのクイックリファレンスというサイトでは、HTML5で使用可能なタグが一覧になっています。 [![](https://www.google.com/s2/favicons?domain=www.htmq.com)www.htmq.com![](https://s.wordpress.com/mshots/v1/http%3A%2F%2Fwww.htmq.com%2Fhtml5%2Findex.shtml?w=160)HTML5リファレンスhttp://www.htmq.com/html5/index.shtmlHTML5の解説](http://www.htmq.com/html5/index.shtml) このようなタグをどんどん入れ子にしていく事でサイトを構成していきます。 ## 今回のまとめ さて、少し短めですがこんな感じで今後進めていこうかと思います。 「ここ、こうやった方がいいんじゃない？」「ここが分かりにくい」という事等ありましたらコメント等してもらえると有り難いです。 | HTML | Hyper Text Markup Langageの略。「ハイパーテキスト(リンク)を利用できる、文書に指示を出すための言語」。全てのWebサイトにHTMLが利用されていて、Webサイトを作る上で最も基本的で重要になる言語。 | | --- | --- | | マークアップ | HTMLを記述していく事を「マークアップする」という風に言う。マークアップは元々英語圏で伝統的な出版の作業過程である原稿の「マーキング・アップ」という作業から派生した言葉で、校正者が文章の各部分のスタイルを記して組版の担当者に原稿を渡すという作業の事を指していた。 | | --- | --- | | タグ | HTMLは開始タグと終了タグで文章を挟む事によって、挟んだ文章に指示を出す仕組み。 | | --- | --- | | CSS | Cascading Style Sheetの略。HTMLだけで構造も見た目も全て記述してしまうと、文章がごちゃごちゃになってしまうという事で、構造と見た目を分けて記述するために生まれた。 | | --- | --- |