HTMLとは何なのか?HTMLとは、一言で言うとWEBページを作成するためのマークアップ言語です。ランゲージ)の略で、WEBページを作成するためのプログラム言語です。世の中にはいろいろなWEBサイトがありますが、それらはどれも基本的にHTMLを使って作れらています。HTMLの特徴は、「ハイパーテキスト」と「マークアップ」が挙げられます。ハイパーテキストハイパーテキストとは、他のファイルにリンクを入れられるテキストのことです。WEBページの特徴ですが、サイトを見ていて気になるページがあれば、リンクをクリックして移動しますよね。そのようなリンクを書けるすごいテキストという意味で「ハイパーテキスト」と名付けられています。あざらしリンクできて普通のテキストよりハイパーだから、ハイパーテキストだよ!マークアップマークアップというのは「目印をつける」といった意味で、文書に含まれる「タイトル」や「太字」「画像」などの様々な要素を、「タグ」と呼ばれるものを使って目印をつけていくことです。「見出し」をHTMLで表すと下記の画像のようになります。あざらしいろんなタグが用意されているから、それを使って目印をつけていくんだ!HTMLのは世界標準HTMLの仕様は、現在WHATWGという団体によって決められていて、世界で統一されています。仕様は英語ですが下記から見ることができます。リビングスタンダード日本語訳してくれているサイトもあります。https://momdo.github.io/html/ちょっと内容が難しいですが、ネットで調べればこのサイトの他にも丁寧に解説されているので、慣れるまではそういうサイトを参考にした方がわかりやすいです。このように厳格にHTMLの書き方決められ、公開されているので、日本でもアメリカでもヨーロッパでもどの国であってもHTMLの書き方は変わりがありません。あざらしアメリカ人が作ったサイトも、中身はおんなじHTMLだよ!WEBとHTMLの関係ここまでの説明で、HTMLはWEBページを作成するためのマークアップ言語であるという意味がなんとなく理解できたでしょうか?あざらしマークアップは目印をつけるってことね。HTMLの雰囲気はなんとなくわかったけと、そもそもWEBページとWEBサイトってなんだっけ?あざらしOK!じゃあWEBページとWEBサイトについて解説していくよ!HTMLの実戦に入る前に、WEBについて概要をつかんでおきましょう。WEBサイトとWEBページWEBサイトというのは、普段私たちがよくインターネットで見ているサイトのことです。人によってはホームページと呼ぶかもしれませんね。いろんな呼び方をする人がいますが、「サイト」も「ホームページ」もWEBサイトとのことを指しています。WEBページというのは、WEBサイトの中の1ページのことです。1つのWEBサイトには記事ページやお問い合わせページなど、たくさんのページが用意されていますよね。それら1つ1つのページのことをWEBページと呼びます。複数のWEBページが集まって1つのWEBサイトになります。け】インターネットの仕組みを詳しく解説!ウェブと違う?この記事では、インターネットの基礎や仕組みについて解説しています。この記事では、インターネットの仕組みについて初心者でもわかるように、図解しながらわかりやすく詳しく解説していきます。[...]WEBページはHTMLと画像とCSSでできているWEBページは、HTMLファイルと、画像や動画ファイル、見た目を装飾するCSSファイルなどで構成されています。HTMLだけじゃないんだあざらしそう!HTMLはあくまで文章を表すファイルだよ。画像や見た目は別のファイルなんだそれぞれのファイルの役割は以下のようになっています。HTMLファイルHTMLファイルはhtmlという言語で書かれたファイルで、WEBページの文章の中身が書かれていいます。これまで解説してきた通り、htmlは、文書に含まれる「タイトル」や「太字」「画像」などの様々な要素を、「タグ」と呼ばれるものを使って、目印をつけていく言語です。画像ページに表示させたい画像ファイルです。SVGなどの種類があります。画像形式にはそれぞれ特徴があるので、適切に選ぶ必要があります。画像形式の種類や特徴についてはこちらで詳しく解説しています。Sheets)」と呼ばれるファイルを準備する必要がありますカスケーディング・スタイルシートは、拡張子が「.css」になることから、「CSSファイル」と呼ばれたり、単に「スタイルシート」と呼ばれます。CSSファイルはWEBページを見やすくするには必須です。文字の色や大きさを変えたり、背景の色を変えたりなど、あらゆる見た目の装飾はCSSファイルで行います。CSSについてはHTMLを理解した後に学ぶとわかりやすいです。こちらの記事で詳しく解説しています。【イラスト解説】初心者のためのCSS入門!自作できるように解説この記事ではCSSについてわかりやすく解説しています。CSSに触ったことない人や、そもそもCSSって何?という人にもわかるように、わかりやすく解説していきます。[...]あざらしとりあえずHTMLを覚えてから、画像やCSSについても知って行くといいよHTMLを表示してみようHTMLがどういったものか知るために実際にHTMLファイルを作って表示してみましょう。エディターとブラウザが必要になります。くまエディター?ブラウザ?何それ?あざらしHTMLを書いたり見たりするのに必要なんだ!すぐに無料で準備できるよ!ツールの準備エディターはHTMLを作成するために必要なもので、ブラウザはHTMLを表示するためのものです。どちらも無料で提供されています。記事内ではブラウザはchrome、エディターはBracketsを使っています。慣れているソフトがあればそちらでも構いません。ツールをインストールしたい方は下記のページで準備方法を解説しているので参考にしてください。あざらしツールの準備は下記の記事を参考にしてね!参考記事WEBサイト制作の準備をしよう!必要なソフトのインストールから動作確認までWEBサイト制作に必要となるソフトの準備や設定を行いましょう。WEBサイトを制作にはWEBブラウザとテキストエディターが必要です。両方とも無料で使えるソフトがいくつか用意されています。[...]簡単なHTMLを表示してみよう簡単なHTMLを書いてみましょう。エディターで新規ファイルを開き、以下のようなファイルを作成し保存します。</html>コピペができたら保存します。「test.html」という名前で保存してください。エディターの使い方についてファイルの新規作成方法や、保存方法がわからない方は、上述した「ツール準備」ページで詳しく解説しているので参照してください。ブラウザにドラッグアンドドロップ普段ブラウザで見ているのは、インターネット上で公開されているWEBサイトですが、自分のパソコンに保存してあるHTMLファイルをブラウザで開くことも出来ます。方法は簡単で、HTMLファイルをブラウザにドラッグ&ドロップするだけです。あざらし自分のパソコンのファイルでもブラウザで見れるんだ!表示されることを確認WEBブラウザで表示されることを確認します。くまおお!ブラウザで見ると見やすい!あざらしそうなんだ!ブラウザはHTMLで書かれたファイルを見やすく表示するためのソフトなんだ!WEBブラウザで見ることで、先ほど作ったHTMLファイルが人間にみやすく整形されて表示されていることがわかります。HTMLはブラウザを通してみることで、見やすく整形された文章としてみることができるんですね。あざらしHTMLはブラウザで見るとわかりやすく表示されるんだHTMLの基本を理解しようHTMLの基本を解説していきます。くまHTML書けるようになるのかな...あざらし大丈夫だよ!基本さえ抑えておけばそんなに難しくないんだ!基本の書き方HTMLは「タグ」を使ってマークアップしていく言語です。マークアップというのは「目印を付けていく」という意味でしたね。タグには、「見出しとして表示したいときは<h1>」、「文章として表示したいときは<p>」というように、いくつも用意されていてそこから適切なものを選びます。見出しとして表示したい部分は「h1」というタグを使うことになっていて、下記のように記述します。このように記述することで、「これは大見出し」という文字が「見出し」という目印を付けられたことになり、ブラウザで表示すると、普通の文章より大きめに表示されます。くまwordでいう「見出し」とか「段落」とかに似てるかなあざらしそうそうよくわかったね!それをタグを使って表していく感じだよ基本的なタグの記述方法について一つずつ解説していきます。開始タグと終了タグで囲むタグは開始タグと終了タグがあり、その二つでコンテンツを囲むのが基本の書き方です。開始タグは「<タグ名>」という形で書きます。終了タグは「</タグ名>」とタグ名の前にスラッシュを入れて書きます。タグは必ず半角英数字を使います。コンテンツ開始タグと終了タグで囲まれた部分をコンテンツと呼びます。ブラウザで見た時に表示される部分はこのコンテンツの部分です。タグの部分は表示されることはありません。あざらしタグに挟まれた部分だけがブラウザで表示だよ!タグ自体は表示されないんだ要素タグとコンテンツをひとまとめにして、要素と呼びます。上記の見出しの例で言うと、<h1>これは大見出し</h1>の部分を全てまとめてh1要素と呼び見ます。このようなh1要素や、他の文章要素、リスト要素、画像要素が集まってHTMLを形成しています。あざらしHTMLは要素の集まりなんだ!HTMLのルールHTMLはファイルの扱いに決まりがあるので覚えて置きましょう。くまルールか〜!めんどくさいなああざらし世界中で統一されたルールだから覚えておかないとトラブルの元になるよ!ちょっと面倒だけど頑張ろう!!ファイル名は半角英数字ファイル名やフォルダ名は半角英数字で名前をつける必要があります。記号はハイフン(-)とアンダースコア(_)以外使えません。HTMLやWEBサーバは世界中で統一された規格のため、ファイル名に関しても日本独自の全角文字は使えないのです。日本語を使ってしまうと、ページが文字化けしたりうまく表示できなかいなどのトラブルの元になるので気をつけましょう。拡張子は「.html」か「.htm」を使う拡張子は「.html」か「.htm」にします。どちらを使っても問題ありませんが、サイト内で混在するとややこしくなるだけなのでどちらかに統一して使いましょう。拡張子が2種類ある理由ちなみに2種類ある理由は、昔は拡張子は3文字で付けるという慣習がありその名残が残っているからです。現在では3文字ルールはなくなりどちらかと言うと「.html」を使用する場合が多いので、特にこだわりがなければ「.html」を使用しましょう。親要素と子要素HTMLではタグの中にタグを書くことができます。<span>いいいいいい</span></p>この例ではpタグの中にはspanタグが入っています。このようにタグの中に別のタグを含むことを入れ子と言います。タグに中にタグが入っている関係を親子関係といい、pタグのように囲んでいる側を親要素、spanタグのように囲われている側を子要素と呼びます。子要素は親要素をはみ出してはいけない!原則として子要素は親要素をはみ出してはいけませんので注意しましょう。<span>いいいいいい</p></span>上記の例は、子要素であるspanの閉じタグが、pタグの閉じタグより外側に来てしまっているので間違いになります。間違いがあると表示が崩れる原因になるので気をつけましょう!インデントしようインデントとは字下げのことです。インデントはHTMLを書くときのマナーで、子要素は字下げを行うのが決まりとなっています。先ほど出した例のコードを見てみましょう。</html>例えばmetaとtitleはheadの子要素なので一段下げます。metaとtitleは親子関係ではないので、行頭が揃うようにします。することで、親子関係が一瞬でわかるようになりますね。くま確かにみやすいなあざらしインデントがないと思った以上にわかりづらくなるから、必ず入れるようにしよう!インデントは無くても表示に影響はない実はインデントは絶対に必要なものではありません。インデントがあってもなくてもブラウザでの表示に変わりはないのです。インデントを入れることがマナーとされているかというと、HTMLを編集する人にのためです。インデントのないHTMLはタグの親子関係がぱっと見では分からず、非常に読みづらいものとなってしまいます。なると編集する時間もかかりますし、ミスも増えます。いったことを防ぐためにも必ずインデント入れるようにしましょう。インデントはエディターを使っていれば、自動で入りますし、TABキーを押すことで任意の場所に入れることもできます。基本的な記述方法がわかったところで先ほど作ったサンプルHTMLファイルの解説を行なっていきます。非常にシンプルなHTMLですが、HTMLの基本が詰まっています。DOCTYPE(ドックタイプ)宣言と呼びます。1行目に記述する必要があります。DOCTYPEは、そのファイルが、どのバージョンのHTMLに準拠して書かれているかを示します。現在のHTMLのバージョンは5になるので、HTML5を表す書き方を覚えておけばOKです。html>上記のように書くことで、html5であると宣言していることになります。html>と書いても構いません。ちなみに実はこの一文は書かなくても問題なく表示されることが多いのですが、万が一何か不具合が起こる可能性もあるのできちんと書いておきましょう。あざらしDOCTYPEは必ず1行目に書こうhtmlタグ、headタグ、bodyタグDOCTYPEの次にはhtmlタグが続きます。このhtmlタグが全ての要素の親要素になります。そのhtmlタグの中に、headとbodyの2つのタグを書くのがHTMLファイルの基本的な構成となります。どんなHTMLファイルもこの、htmlタグのなかにheadタグとbodyタグが来るので覚えておきましょう。あざらしhtmlタグのなかにheadタグとbodyタグが続くよheadタグ、bodyタグの役割HTMLはheadとbodyで構成されいて、それぞれの役割は下記のようになります。head部分ブラウザでは表示されない、HTMLファイルの情報が書かれているbody部分ブラウザに表示される文章が書かれているheadタグの中身はブラウザ上に表示されることはなく、HTMLのバージョンや文字コード、CSSファイルの場所など様々な設定情報を記述していきます。bodyタグの中身には、見出しや本文など実際に表示したいコンテンツを記述していきます。ここに書かれていることがブラウザに表示されます。headタグの中で文字コードを設定するくまheadタグは表示されないのか。charset="UTF-8">の部分は文字コード設定しています。文字コードは必ず書く必要がある大切な設定で、HTMLファイルがどの文字コードで書かれているかを明記します。文字コードとは全ての文字にはコンピュータで扱えるようにするために番号が振られています。この番号のセットを文字コードと呼んでいます。番号の振り方はいくつか種類があり、Shift-JIS,EUC-JP,UTF-8などが代表的です。文字コードが変われば、同じ文字でも全く違う番号が割り当てられています。HTML5はUTF-8を使う決まりなので、上記のまま1行コピペすればOKです。保存する時の文字コードをUTF-8にするのを忘れずに実際にファイル保存するときの文字コードもUTF-8を選ぶのを忘れないようにしましょう。ファイル自体をUTF-8で保存し、HTMLのなかでもUTF-8を指定することで正しく動作します。基本的にはエディターでHTMLファイルを作ると、自動的にUTF-8になるはずですが、確認方法を覚えて置きましょう!bracketsを使っている場合charasetの指定と保存時の文字コードがずれると、文字化けの原因となるので注意が必要です。あざらしHTMLの文字コードはUTF-8!これは決まりなので丸暗記しておこう!headタグの中でタイトルを設定する<title>Document</title>の部分はページのタイトルを表しています。ページタイトルはブラウザでみたときのタブに表示されたり、ブックマークしたときの文言に使われます。bodyタグbodyタグの中には、見出しや段落などと言った文書の内容を書いていきます。このbody内に書いた内容がブラウザに表示される部分となります。下記のように、bodyタグの中には表示したい文章をどんどん書いていきます。<p>これは記念スべきはじめてのWEBページです!!</p></body>どのようなタグはあるのかは後ほど詳しく解説していきます。bodyタグの中にはブラウザに表示したい文章を書いていくことを押さえておいてください。あざらしbodyタグの中身がブラウザに表示されるんだ!HTML定型文のまとめここまでで、HTMLを作るときの定型部分はの説明を行いました。ここまでをまとめると以下のようコードになります。毎回書くのは面倒なので、コピペなどして使い回すようにする等良いでしょう。</body></html>あざらしここまでの部分はほとんど毎回同じなんだ!だからコピペで使い回して必要な部分だけ変えると楽だし間違いがなくていいよ!body内でよく使うタグここからは実際にbody内で使われるタグを紹介していきます。くまタグってどれくらいの種類があるんだあざらしタグは100種類以上あるよ!でもよく使うのは10種類くらいだからいきなり全部覚えなくても大丈夫だよ!ここではHTMLでよく使われるタグを厳選して紹介します。見出しを作るタグ見出しを作るには、見出しタグと呼ばれるタグを使います。見出しタグには重要度に応じ<h1>~<h6>までの6種類用意されています。基本的には、HTMLページ内で最も重要な見出しに対して、h1を使います。次に重要な見出しにh2という風に割り当てていきます。見出しを実際に記述してみると下記のようなります。<h6>これは6番目に重要な見出し</h6>これは最も重要な見出しこれは2番目に重要な見出しこれは3番目に重要な見出しこれは4番目に重要な見出しこれは5番目に重要な見出しこれは6番目に重要な見出しそれぞれの見出しのスタイルは、CSSを使って変更することができます。見出しの使い方についてさらに詳しく知りたい方はこちらの記事で解説しています。参考記事HTMLの見出しタグの使い方。見出しタグとは、html文書内に見出しを挿入するためのタグです。見出しタグは重要度に応じ<h1>~<h6>までの6種類用意されています。[...]あざらし見出しは必ずといっていいほどよく使うタグだね段落を作るタグ段落を作るにはpタグを使います。段落とはひとまとまりの文章のことで、段落と段落の間には隙間が入ります。実際に見てみましょう。