【超初心者向け】HTMLの基礎知識マルッと習得講座
自分でWebサイト（ホームページ）を作れるようになりたいんだけど、どうすればいいの？
HTMLとCSSってものが必要ってことはわかったんだけど、そもそもHTMLとCSSってなんやねん（笑）
そんな方向けの記事です。
「Webデザイナー・エンジニアを目指している」、「自分の力だけでWebサイトを作りたい」、「なぜか自分がWeb担当者になった」という方たちの役に立つでしょう。
というのも、この記事を読めばHTMLの基礎中の基礎を学べるからです（CSSは別ページにて解説）。
この記事で基礎さえ身につけたら、あとは作りながら調べればOKですからね！
もちろんこの記事を書いているのは「現役フリーランスWebエンジニア兼社長」であるWeb制作のプロなので安心してください。
Web業界を盛り上げたい一心でHTMLについて解説するので、ぜひ勉強していってくださいね！
ちなみにものすごく長い記事となるので、「説明が分かりやすい！」と感じた方はブックマークやリーディングリストに追加しておくと、いつでも見れて勉強がはかどると思います。
やぁみんな！
ぼくが現役フリーランスWebスクール校長のさかしだ！
Webサイトを作りたいんだって？それはいいことだね。
Webサイトを作りたい理由は人それぞれだと思うけど、これからWeb業界はさらにスピードを上げて成長して、Webの知識がないと仕事がなくなる人も増えてくるからね。
HTML・CSSを勉強することはけっして無駄にならないぜ！
時代に置いていかれないように、ここでしっかりと知識とスキルを身につけてくれ！
ただ、本気の人じゃないとHTMLとCSSは身につかない。
簡単な言語とはいえ、1日勉強して終わりの人にマスターできる程甘くはないからね。
ぼくも君がWebサイトを作れるよう本気で解説するから、君も本気で勉強していってくれ！
Webサイトの仕組みを理解しよう！
Webサイトを作るには、Webサイトがそもそもどんなふうに表示されるのかを知っておく必要があります。
仕組みを知っていると、高度なWebサイトを作りたいと思ったときにも応用が利きますからね！
まずは基礎をしっかりと習得しましょう。
「そんなことは知ってるよ！」という人は読み飛ばしてください。
【ここで勉強するポイント】
- Webサイトってどうやってできているの？
- Webサイトが表示される仕組みは？
- HTML・CSSってなに？
Webサイトってどうやってできているの？
Webサイトは、大きく分けるとたった2つの工程を踏むことで作られています。
- Webサイトに必要な文章や画像ファイルなどを用意する
- webサーバーと言われるWEB上のデータ置き場に、用意したファイルをアップロードする
難しく考えず、「Webサイトのデータを作る」「作ったデータをインターネットで見られるようにする」という２つが、Webサイトを作る基本的な考え方となります。
つまり、パソコンとインターネットに接続できる環境さえあれば、誰でも作成可能ということなのです♪
自分でWebサイトを作るなら、サーバーとドメイン（アドレス）代くらいしかかからないので、安ければ500円くらいで作成可能です。
へぇ～。Webサイトってファイルを用意して、それをインターネットで読み込めば見れるようになるんだね！
思ったより簡単そうだ！
けど、Webサーバーってよくわかんないなぁ。
Webサーバーっていうのは、「サービスを提供してくれるパソコン」のことだよ。
ウォーターサーバーってあるよね？
あれは「水を提供してくれるもの」でしょ？
Webサーバーも同じように、Webサイトが入ったファイルを提供してくれるんだ。
Webサイトを見る人・パソコンをクライアント（client：お客さん）、Webサイトを提供する人・パソコンをサーバー（server：奉仕・提供する人）って言うよ！
ちなみに、Webサーバーはウォーターサーバーみたいにレンタルできるサービス（レンタルサーバー）を利用するのが一般的だ。
サーバーのスペースをちょっと借りるようなイメージかな。
なるほど！
Webサイトを作るってことは、自分で作ったファイルをWebサーバーに送るってことなんだね！
そゆこと！
作ったファイルをアップロードして、データをwebサーバーが保管しておいてくれるから、ぼくたちはいつでもWebサイトを見れるんだ。
アップロードって普段使ってるけど、どういう意味？
ダウンロードの逆って考えてもらうとイメージしやすいかな。
自分のパソコン上で作成したファイルのコピーをウェブサーバーに置くことだ。
ファイルを「送る」って意味だね！
Webサイトが見られる仕組みは？
では、Webサイトはどのような工程を踏んで見られるようになっているのでしょうか？
結論を言うと、「ブラウザがWebサーバーにアクセスして、保管してあるファイルを呼び出し、htmlファイルを見やすいように変換してくれる」という工程を踏むことでみられます。
もう少しかみ砕いて説明しますね！
普段は特に意識していないかもしれませんが、Webサイトを見る時はWebブラウザというアプリケーションを使用しています（ブラウザとは、Googlechrome、InternetExplorer、FireFox、safari、operaなどのことです）。
実はこのブラウザ、とても高機能なのです。
というのも私たちがWebサイトを見る時には、あなたが入力したURLを元にブラウザがファイルが置いてあるサーバーを探して、「このファイルのデータを見せて！」と要求し、そのファイルを人間が理解しやすいように変換する、ということまでやってくれているからですね。
もしブラウザが無ければ「1211111122112211……」というような、人間には理解しにくい「機械語」で表示されてしまうのでとても不便です。
では、どうやって世界中にあるサーバーから特定のWebサイトのファイルを探しているかというと、「http://」「https://」から始まり、「～.com」「～.jp」などで終わるURLを元に探しています。
URLはWebサーバーの場所を示す、住所のような役割をしているのです！
|
【Webサイトをコンピューターが表示するまでの流れ】
|
へぇ～！Webブラウザって中でそんなことをしてくれてたんだね！感謝感激雨嵐！
ブラウザがないと、今のようにストレスなくWebサイトを見ることはできないんだ。
ちなみに、「http」「https」というのは「通信プロトコル」のことで、「どういうやり方でデータのやり取りをするか」を定めたルールのことだよ！
httpとかって、そういう意味だったんだね。
「https」の「s」ってなに？
「SSL」の頭文字をとったもののことだよ！
SSLは通信データを暗号化してくれる仕組みのことだ。
暗号化されることで、悪意を持った第三者が個人情報などを盗み見ることができないようになってる。
つまりhttpsは、「httpより安全にデータ通信ができる仕組み」になっているんだ。
ほぇ～。今キャバコがAmazonで気兼ねなくお買い物できてるのは、httpsのおかげだったのね。
この辺が分かってれば、サーバーにファイルをアップロードするときとかも、失敗しなそうだね！
この辺のWebリテラシーについても、少しくらいかじっておくのがおすすめだぜ！
Webサイトを作る時に使うものこそ、HTML/CSS
では、Webサイトの元となるファイルはどのようにできているのでしょうか？
答えは、HTMLファイルでできています。
HTMLってなに？
HTMLファイルとは、コンピューターが理解できる「タグ」という印を使って書くテキスト文書のことです。
Wordで文書を作る時ってさ、見出しの文字を大きくしたり、箇条書きリストの前に黒丸を付けたりして、見やすく加工できるよね？
でも、大きな文字を見て「ここが見出しだね」と理解できるのは人間だけなんだ。
コンピューターは、文字が大きいだけで見出しだと判断することができない。
すると、コンピューターは「この文字の意味は理解できるけど、これはどんな役割がある文章なんだ？わからんちん」となってしまうんだ。
そこで、コンピューターにも理解できるタグというものを使うというわけさ。
例えば見出しの場合、コンピューターは <h1>見出しの文字</h1> というタグで囲まれた範囲内を、「お！ここは見出しだね！」と判断するんだ。
このように、文書内のテキストを役割ごとに印をつけていくことをマークアップといい、その言語を「マークアップ言語」と呼びます。
HTMLもマークアップ言語です。
そして、HTMLでは文章や画像、表などをマークアップすることで、Webページの骨格を作ることができます。
ちなみにHTMLというのは、「Hyper Text Markup Language」（ハイパーテキストマークアップランゲージ）の略なんだ。
WEBデザイナーもプログラマーもみんな「HTML」って言うから、正式名称を覚えておく必要はないよ！
うん、そんな長いの覚えたくない！（笑）
【HTMLについて動画で詳しく知りたい人はこちら】
CSSってなに？
CSSとは「カスケーティングスタイルシート（Cascading Style Sheets）」の略で、Webサイトの見た目を装飾をするための言語です。
文字の色・大きさ・フォントの種類を変えられたり、余白をつけたり、それぞれの要素（文章や画像など）の位置を指定できたりします。
HTMLだけだとただ文章がつらつらと並べられているだけですが、CSSを使うことで見やすいWebサイトにしたり、楽しそうでにぎやかなWebサイトを作れるなど、目的に合わせたWebサイトを作成することができるのです。
特に最近のCSSはバージョンアップの結果、プログラミング言語を使わずにアニメーションを付けられるなど、できることが広がっています。
つまり、Webサイトを作るのにかかせない言語なのです。
CSSを使わないと、会社の企画書みたいにつまらないWebサイトになるってことか！
そうゆうことだね。
HTMLの説明の時に、<h1>見出しの文字</h1> と書くと、これがコンピューターに見出しとして認識されるって言ったじゃない？
これって、単に「ここが見出しだよ」って決めただけの状態で、見た目はそんなに変わってないんだ。
ブラウザで見ると文字が大きくなっているけど、ただそれだけ。
そこにCSSを適用すれば、見た目を変えられるってこと？
その通り！
cssを使えば、文字の大きさや色、背景色など、自由なデザインに変更することできるよ。
ウェブページをより見やすくするためにデザインをするのが、CSSの役割なんだ。
HTMLとCSSまとめ
- HTMLはWebページの骨格を作るもの
- CSSはWebページを装飾するためのもの
Webサイトを作る前に準備をしよう！
概要が分かったところで、ここからはWebサイトを作るのに必要な準備をしていきましょう！
人にもよりますが、いくつか準備するものがあります。
とても簡単なので、今準備してしまいましょう！
【Webサイトを作る前に準備すべきもの】
- 拡張子の表示設定
- Webブラウザのインストール
- テキストエディタのダウンロード
ファイルの拡張子の表示
まずはじめに、拡張子の表示設定をしておきましょう。
拡張子とは「ファイルの種類」を表すもので、「○○○○.html」の「.html」が拡張子に当たります。
なぜファイルの種類を分けなければならないかというと、コンピューターはファイルによって読み込み方や表示方法を区別しているからです。
例えばよく目にするものとして、「.jpg」なんて拡張子がありますが、これは「jpg方式（ジェイペグ）の画像ファイルだよ！」ということをコンピュータに教えてあげています。
また、あなたが使うパソコン上でこれから作るhtmlやcssファイルを探すときにも、一目で判断できるというメリットがあります。
Webサイトを作るうえで拡張子は欠かせないものなので、常にあなたのパソコンでも表示させておくようにすると便利ですよ♪
ではどうやって表示させるかというと、以下の通りです。
|
【Windows10で拡張子を表示させる方法】
【Macで拡張子を表示させる方法】
|
たったこれだけです！
こんな簡単に設定できるんだね！
拡張子については難しく考える必要はナッシングだぜ！
自分たちがファイルを識別するために表示させておくものだからね。
拡張子があれば「htmlファイルはこれだ！」と一目でわかるから必ず表示させておこう！
Web制作をやっていると、色んなタイプのファイルが増えてきちゃうからね。
webブラウザのインストール
次に、ブラウザをインストールします。
ブラウザとは「Webサイトにアクセスするためのアプリケーション」と考えてもらうと良いでしょう。
先ほどもお話ししましたが、「GoogleChrome」や「FireFox」「safari」「MicrosoftEdge」「InternetExplorer」などのことですね！
ブラウザはいくつもありますが、Web制作をするなら「GoogleChrome」を使うのが良いでしょう。
というのも、GoogleChromeはWebブラウザシェア世界ナンバー１ですし、なにより「デバッグツール（Web制作時の表示を確認するツール）」が一番使いやすいため、Web制作がしやすいからです。
Web制作をする人のほとんどがGoogleChromeを使っているよ！
動きが速いし、拡張機能が豊富、Googleサービスとの連携もやりやすいとかのメリットもあるからね！
他のブラウザをメインで使う必要はないよ！
じゃあGoogleChromeだけダウンロードしーよおっと♪
注意点として、Webサイトが出来上がったら「いくつかのブラウザで同じように表示されているか」をチェックする必要があるよ！
人によって使っているブラウザが違うから、その人に迷惑が掛からないよう、最終的にはMicrosoftEdgeやFireFoxとかでもブラウザチェックしよう！
え？1つのWebサイトでも、ブラウザによって表示のされ方がちがうの？
残念ながらそうなんだ。
最近は表示のされ方が統一されてきたけど、まだ多少のずれがある。
他のブラウザでは使えないタグがあったりするからね。
だから、Web制作が終わったら最低でもGoogleChrome、FireFox、InternetExplorer、MicrosoftEdge、Safariで正しく表示されているかを確認してね！
テキストエディタをダウンロードしておこう！
Web制作を行う時は、「テキストエディタ」を使用します。
テキストエディタとは文字通り「文章を編集するもの」ですが、Wordなどとは違ってタグを使って文章を編集することができます。
html,cssでも使うので、お気に入りのものをダウンロードしましょう！
基本は無料で利用できるので安心してください。
おすすめはマイクロソフトが提供している「Visual Studio Code（ビジュアルスタジオコード）」というテキストエディタです。
日本語に対応している、拡張機能が豊富、使いやすいというのが理由ですね。
他にも「Sublime Text」や「Atom」なども人気ですが、現時点ではVSCodeでOKでしょう。
テキストエディタは「メモ帳」でも代用できるんだけど、機能面では圧倒的に制作用のテキストエディタのほうが優れているぜ！
無料だから、今すぐダウンロードしておこう！
次の項目からテキストエディタを使うよ♪
百聞は一見に如かず！簡単なhtmlファイルを作ってイメージをつかもう！
では、ここでいったんhtmlファイルを作ってみましょう！
どんな流れでWebサイトを作って、表示されるのかのイメージをつかむと「やばい…Webサイト作ってるじゃん自分！」となれますよ♪
楽しみながらやってみましょう！
テキストエディタに以下のコードをコピーしましょう！
<!DOCTYPE html>
<html>
<head>
<title>ここはタイトルです。</title>
<meta charset="utf-8">
</head>
<body>
<h1>ここは見出しです。</h1>
<p>ここは本文です。</p>
</body>
</html>まずはテキストエディタを開いて、このコードを張り付けてファイルを保存していきます。
保存する場所はどこでもOKですが、あなたが良く使う場所に保存すると良いかもしれませんね！
今回は、練習用の「testフォルダ」を作成し、そこに保存してみましょう。
デスクトップでもどこでも良いので、右クリック→新規作成→フォルダを選択し、「test」と名前を付けてください。
引用：http://support.dospara.co.jp/faq/03353/win10/201.png
作ったtestフォルダに、HTMLファイルを保存します。
ctrl + s（macならcommand + s）か、メニューバーのファイルから保存できます。
ファイル名は「index.html」としてください。
.htmlは上でお話しした拡張子のことで、「このファイルはhtmlファイルだよ！」ということを示しています。
これでhtmlファイルができたので、ブラウザで確認することができます。
今作成したファイルのタグの意味などは後で説明します。
拡張子の.htmlは理解できたけど、「index」って名前はどうしてなの？
特に意味はないよ（笑）
正直拡張子の前のファイル名はわかりやすければ何でもいいんだけど、「1ページだけのWebサイト」や「ベースとなるページ」にはindexって名前が付けられることが多いんだ。
これは世界共通だから、「ファイル名どうしよ～」と悩んでいる時間があるなら、とりあえずindexってつけておこう！
なるほど！
kyabako.htmlでもいいってことか！オッケーバブリー！
htmlファイルをブラウザで表示させてみよう！
では次に、先ほど作成したhtmlファイルをブラウザで開いてみましょう！
やり方は簡単で、index.htmlファイルをダブルクリックすれば、使っているブラウザに表示されます。
もしくは、保存したファイルを右クリック→「プログラムから開く」→「GoogleChrome」と選択しても開けます。
あ！でた！
タグ以外の文字が画面に表示されているのが確認できたよね？
さっき貼り付けたコードは、「こうやって表示してね！」ってコンピューターに指示をしていたんだ。
タグの意味とかがまだ分からないと思うけど、htmlってけっこう簡単でしょ？
たしかにそうかも！
Webサイトってこうやって作っていくんだね！
そうそう！
htmlって聞くとなんとなく難しそうに聞こえるけど、実際やっていることは文章をタグで囲っているだけっていうのが事実だ！
すごくきれいに作られたWebサイトとかも、中身はこんな風に作られているぜ。
つまり君もhtmlを習得すれば、キレイなサイトを作れるってことだ！
ワクワクしてくるでしょ？（笑）
もちろんcssも習得する必要があるけど、絶対にできるようになるよ！
HTMLの基本を習得しよう！
ここからは、実際にHTMLの書き方やタグの意味などを学んでいきましょう！
前提として「htmlの基本はマスターする必要があるが、タグを初めからすべて覚える必要はない」ということを覚えておいてください。
というのも、基本的な書き方はタグによって大きな違いはありませんし、タグに関しては必要な時に必要な機能を調べれば良いからです。
htmlは難しい言語ではないけど、覚えることはたくさんあるんだ。
ただ、1回ですべて覚えきれるものでもないし、ぜんっっぜん使わないタグなんかもある（笑）
だから基本を習得したら、あとはWebサイトを作りながら覚えていくようにしよう！
気負わず、気楽に楽しく習得しちゃおう！
HTMLの基本構文はこう書くよ！
HTMLには基本の「書き方」があります。
これは必ず覚えてください。
というのも、極端な話これを覚えていればあとは文章を書きこんでいくだけだからです。
基本は、以下の画像のように「開始タグ」と「終了タグ」の間に表示したい文章の内容を挟むだけとなります。
【HTMLの基本的な書き方】
なんのこっちゃ（笑）
HTMLを構成する最も基本的な単位のことを「要素」っていうんだ。
開始タグから終了タグまでのことだね。
で、HTMLは基本的には要素を組み合わせてできているよ。
さっきやった「h1」で囲った要素があるでしょ？
あれは「ここからここまでが見出しですよ」って伝えてて、<h1>から</h1>のことが要素といえるね。
なるほど！
意味を持ったカタマリみたいな感じかな？
そんな感じだ（笑）
開始タグは「<>」で囲って、終了タグは「</>」で囲うぜ。
終了タグの印である「/（スラッシュ）」を忘れずに！
<>の中身にはh1やp、a、div、tableとか、いろんな意味をもったタグ名を入れていくんだ。
<h1></h1>
<p></p>
<div></div>
みたいな感じでね！
これからいろんなタグについても説明するから、とりあえずここでは書き方を覚えよう！
【HTMLの基本の書き方】
<開始タグ>表示したい内容</終了タグ>
タグには「属性」という機能を付け加えることができるよ！
タグには「属性」というものを付け加えることができます。
属性とはオプション機能のようなものです。
言葉だけではわかりにくいと思うので、以下を見てみましょう！
<a href="https://www.google.com/?hl=ja">Googleのサイトに飛べます。</a>上のHTMLの要素は、aタグという「別のWebサイトに飛ぶリンクを貼りますよ」という意味を持ったタグです。
その横に「href=”https://www.google.com/?hl=ja”」という文字がありますね？
この「href」の部分を「属性名」と言い、「https://www.google.com/?hl=ja」を「属性値」と呼びます。
これは何をしているかというと、aタグで「リンクを貼りますね～」と伝え、「クリックしたらhttps://www.google.com/?hl=jaっていうページに飛ばせますよ～」と伝えています。
「aタグ」だけだと「リンクを貼りますね～」と伝えられますが、Googleなどのブラウザからすると「え？わかったけどどこに飛ぶの？」となってしまいます。
それを説明するのが「属性」です。
「href」を日本語訳すると「次のページに飛びます」で、「https://www.google.com/?hl=ja」は「住所はこれね。」と伝える役割があるのです。
こうすることで、ユーザーを迷わず飛んで欲しいページに飛ばすことができます。
そして、「Googleのページに飛べます。」という文字がクリックできるようになるのです。
各要素に共通のものもあれば、特定の要素にしか存在しない属性もあるので、ゆっくりと覚えていきましょう！
書き方は<開始タグ 属性名=”属性値”>表示したい内容</終了タグ>となります。
開始タグの後ろに半角スペースを入れ、属性名と属性値は=（イコール）で結び、属性値は「”（ダブルクォーテーション）」でくくります。
属性は1つのタグに複数追加することもできますよ！
属性って名前がわかりにくいけど、オプション機能みたいなものね？
そうそう！
ここではわかりやすくリンクの属性を説明したけど、要素に名前をつける「class=””」とか、固有の名前を付ける「id=””」、どんなタイプの入力フォームにするか決める「type=””」なんかがあるぜ！
初めは色々覚える必要はないけど、以下の属性はよく使うから覚えておこう！
| href | aタグのリンク先URLを指定できる属性
|
|---|---|
| alt |
画像が何らかの理由で読み込まれない時に、「この画像は○○です」と文字を表示するために使うimgタグの属性 |
| src | 表示させる画像ファイルのURLを指定できる属性
|
| id | CSSなどでスタイルを追加するためにつける名前。同じ名前はページ内に1つしか存在できない
|
| class | CSSなどでスタイルを追加するために付ける名前。要素にclassで名前を付けることで、それぞれの要素を別のデザインにできる
|
全然ピンと来ない！
だよね、こういうのは実際にタグを書いていった方が分かりやすいかな！
属性はこのほかにもたくさんあるけど、使用頻度の高い上記のものだけ覚えておけば、あとは作りながらカンニングしてOKだ！
作っていると自然と覚えるものだぜ！
- 属性とは、タグに意味や機能をつけるためのオプション機能のこと
- class,id,src,href,altくらいを今は覚えてしまおう！
- 作りながら少しずつ身につければOK！
【動画でさらに詳しく知るならこちら】
さっき作ったHTMLファイルの中身を解説するよ♪
先ほど作った以下のファイルについて細かく説明していきます。
<!DOCTYPE html>
<html>
<head>
<title>ここはタイトルです。</title>
<meta charset="utf-8">
</head>
<body>
<h1>ここは見出しです。</h1>
<p>ここは本文です。</p>
</body>
</html>HTMLを書く時には必ず必要！DOCTYPE宣言
まず1行目に書かれている「<!DOCTYPE html>」という部分ですが、これは「HTML文書のバージョン」を宣言しています。
つまり、「このファイルはHTML5のルールで書いてるよ！」とブラウザに教えているのです。
なぜこんなことをしなければならないかというと、HTMLにも種類があるから。
古いバージョンのHTMLで記述すると、現在最新のHTML5にしかない機能は表示できません。
そのためDOCTYPE宣言をしてあげないと、ブラウザは「これはどのバージョンのHTMLなん？」と迷ってしまい、正確な表示ができないということになります。
これでは困りますよね？
なのでHTML文書を書く際は、必ず<!DOCTYPE html>とはじめに書きましょう！
これはルールです。
HTMLにもバージョンがあるんだねぇ。
HTMLは歴史の中でどんどん改良が加えられていって、今はHTML5になった。
昔からあるWebサイトは古いバージョンのHTMLが使われているものもあるけど、みんなはHTML5を使ってね！
これから作るものは、今のところほぼ１００％HTML5を使うから。
【動画でもっと詳しく知るならこちら】
HTMLの基本構造を見てみよう！
HTML文書には、基本となる「型」があります。
それが、htmlエリア、headエリア、bodyエリア。
これらについて深く考える必要はありませんが、この3つのエリアから構成されているということを覚えておいてください。
1つずつ解説していきますね！
<html> </html>
<!DOCTYPE html>の下に、<html>というタグがあります。
これは、「ここからは基本的にHTML文書ですよ～」とブラウザに教えるタグです。
一番下の行には</html>とありますよね？
これは「ここまでがHTML文書ですよ～」と教えています。
これもDOCTYPE宣言と同じく必須ルールなので忘れずに書きましょう！
HTMLは<!DOCTYPE html>から始まって、それ以降を<html> </html>タグで囲うと覚えよう！
<head> </head>
<html>タグの下に書かれている<head>タグですが、これは「Webサーバーやブラウザ、検索エンジンに向けた情報」を記述する場所です。
具体的には「このファイルのタイトルはほにゃららですよ」や、「文字コードはこれを使いますよ」「ページを表示させるときには、このcssファイルを読み込んでください」などです。
headエリアは、ページタイトル以外ブラウザには表示されません（デバッグツールを使えば中身を見ることはできますが）。
※文字コードとは、かみ砕いて言うと「文字の種類をパソコンが理解するための番号」といえます。今回の例では「<meta charset=”utf-8″>」の部分です。ここでは割愛しますが、今の段階では「utf-8」という文字コードを使うということを覚えておいてくださいね。
今の段階でheadエリアで重要なことは3つです。
- headではこのページの情報について記述している
- head内に書いたことは<title></title>の中身以外はブラウザに表示されない
- <title>と文字コードは必ず記述する
現時点では「へぇ～。headタグの中にはこのサイトの情報が詰まってるんだなぁ。」くらいの認識でOKだ！
他にも色々書くことは増えてくるから、その都度調べながら勉強していってくれ！
<meta charset=””>の「meta」ってなによ？
これは「メタタグ」と呼ばれるもので、色々な情報をブラウザなどに教えるために使われる便利なタグなんだ。
charsetは文字コードを指定するときに使われる「属性」だね♪
他にも「このページで意識しているキーワードや説明文」、「SNSでシェアする時はこの画像を使って！」などを指示する時にmetaタグが使われるぜ！
色んな指示を出せる便利なタグだから、必要に応じて調べてみよう！
【headタグの中身についてもっと詳しく知るならこちら】
【metaタグや文字コードについてもっと詳しく知るならこちら】
<body> </body>
3つ目のエリアがbodyエリアです。
bodyエリアでは「このページで表示される内容」を記述していきます。
つまり、ここで書いた内容がブラウザに表示されるという事です。
今あなたが見ているこの文章も、<body></body>のなかに書かれていますよ♪
なるほど！
bodyエリアに表示させたい内容を書くんだね！
ここはわかりやすい！
そゆことだ！
bodyとかいうと、「なんか難しいなぁ…」と感じるかもしれないけど、「<body></body>で囲われている中身をブラウザに表示してね！」って指示をしているだけだからね！
オッケーバブリー！了解したよ！
ここまでがhtmlファイルの基本構造で、HTMLファイル1ページに必ず1つずつ出てくるタグだよ！
Webページを作る時には、html、head、bodyの3つのタグは必ず必要だから、忘れずに書こう♪
書き忘れるとどうなるの？
ブラウザが勝手にhtml、head、bodyを認識して、自動補完してくれることもある。
けど、最悪ちゃんとWebページが表示されなくなっちゃうから気を付けてね！
慣れれば自然と書いてるから大丈夫だけど、初めのうちはhtml、head、bodyの3つのタグは必ず記述することを意識していこう！
え？ブラウザって自動補完してくれるの？すご～い♪
そうなんだけど、だからといってHTMLを雑に書いてブラウザに頼りすぎると、後で泣くことになるぜ！
男と一緒で、頼りすぎちゃダメってこと。
ちょっと何言ってるかわかんない。
【HTMLの基本構造まとめ】
- HTMLはhtml、head、bodyの3つのエリアで構成されている
- ファイルの初めには<!DOCTYPE html>というDOCTYPE宣言を行う
- DOCTYPE宣言以下は<html>タグで囲う
- <head>タグはブラウザに表示されないが、作成ページの重要な情報を書いてある
- 表示させたい文章などを<body>タグの中に書く
ここまでの内容はOKかな？
次は「HTMLでよく使われるタグ」について説明していくね！
いよいよ中身だね！
ワクワクしちゃうなぁ♪
タグはたくさんあるから最初から全部覚える必要はないけど、よく使うタグの役割と種類はしっかり理解しておいてね！
よく使う基本的なタグの種類を学ぼう！
ここからは、htmlを書いていくうえで頻出のタグについて解説します。
タグについて勉強するのは、「あぁ～…HTMLやってるなぁ♪」と感じられて楽しいです♪
ただ注意点が１つあり、「全て暗記してやるぜ！」という意識は捨ててしまいましょう。
というのも、タグはものすごい数の種類があるから。
全て使うわけでもないので、基本的なタグだけ覚えて、あとは作りながら調べて知っていけばOKです。
それではまいりましょう！
タグには意味があることを知っていると、理解しやすい♪
タグを勉強する際、まず初めに重要なことは、タグの名前にはそれぞれ意味があるということ。
例えば、見出しを意味する<h1>というタグの「h」は「headline（見出し）」の頭文字をとったものです。
<a>タグはリンク先に飛ばすためのタグですが「anchor（アンカー：錨（いかり））」の頭文字で、「船の錨をおろす」のように、その場所に目印をつけていつでも行けるイメージを持てます。
このように、タグはそれぞれ英語の頭文字を取っているため、その英単語の意味を調べるとタグのイメージをつかむことができるのです。
こうすることですんなり頭の中にタグの役割が入ってくるので、おすすめです♪
「h1は見出し！aタグはリンク！」と覚えても良いですが、なかなか覚えられないタグについては意味を調べてみましょう！
タグは意味を理解しながら楽しく勉強していこう♪
身構えずに勉強することが続ける秘訣だぜ！
そして、勉強を続ければ数週間で必ずできるようになるのがHTMLだ！
h1～h6は「見出し」を意味するタグ！
「この文章は見出しだよ～」とコンピューターに教えるには、「h1～h6」というタグを使います。
意味は上でお話しした通り「headline：見出し」です。
ここでデバッグツールを開いてみましょう！（windowsなら「F12キー」、macなら「Command + Shift + C」、もしくは右クリックをして「検証」）
このページのHTMLコードが表示されましたか？
<body>タグを開いて「h1」タグで囲われている部分を見つけてみましょう！
h1はこの記事のタイトルを意味します。
この記事の場合は「【超初心者向け】HTMLの基礎知識をマルッと習得講座」となっているはずです。
h1~h6タグは、このように文章のところどころにある「見出し」を意味するところで使われるという事を覚えておきましょう！
数字は何を意味しているの？
数字は1が大見出しで「ページタイトル」を表す。
2以降は文章のカタマリの見出しを表現するよ！
2~6まであるけど、数字が小さい程、見出しの重要度が高いね。
<h5>から使い始める、みたいなことはないから注意だぜ！
【見出しの使い方例】
<h1>【超初心者向け】HTML・CSSでWebサイトを作れるようになろう講座</h1>
<h2>Webサイトの仕組みを理解しよう！</h2>
<h3>Webサイトってどうやってできているの？</h3>
<h3>Webサイトが見られる仕組みは？</h3>
<h2>Webサイトを作る前に準備をしよう！</h2>何回使ってもいいんだね！
h1はそのページのタイトル的な意味合いがあるから1回しか使わないケースがほとんどだけど、h1以外は何回使ってもOKだよ！
ただ、h2とかを何回か使う場合は、文章の意味合い的に「同列（同レベル）」のところで使おう！
どうゆうこと？
例えば、この記事では「HTML・CSSでWebサイトを作れるようになる！」という目的の記事を書いているでしょ？
そのために必要なことを<h2>の見出しで書いている。
HTML・CSSでWebサイトを作れるようになるには、大きく分けていくつかの知識が必要で、その大きく分けた部分は<h2>で書いているんだ。
じゃあ<h3>はどこで使っているかというと、「<h2>の見出しをさらにいくつかに分けて説明するための見出し」で使っているんだ。
つまり、「階層構造」になってるってことだよ。
そっか！
「見出しを説明するための見出し」ってことね！
そうゆうこと！
順番を間違えてもちゃんと表示されるけど、SEO（検索エンジン最適化）的にはあまり良くないから「数字の小さい順に使う」と覚えておこう！
- h1~h6は見出しを意味するタグ
- h1は基本1回しか使わない方が良い
- 適切な場所で、数字の小さい順に使おう！
【見出しタグについてもっと詳しく知るならこちら】
ol・ul・liタグは「箇条書き」するときに使う
ol・ul・liタグは、Webページで箇条書きする時に使われるタグです。
olは「Ordered list：順序リスト（数字が割り当てられる）」、ulは「Unordered list：順不同リスト（・が文頭に表示される）」、liは「List：リスト」の頭文字2文字で表されています。
使い方は「olとli」「ulとli」のように、セットで使います。
もっと具体的に言うと、「ol、ulの中にliを書く」という使い方です。
例を見てみましょう！
<ol>
<li>リンゴ</li>
<li>バナナ</li>
<li>ミカン</li>
</ol>【結果】
- リンゴ
- バナナ
- ミカン
このように数字が頭に割り振られて箇条書きできるものが「ol・li」タグの特徴です。
<ul>
<li>リンゴ</li>
<li>バナナ</li>
<li>ミカン</li>
</ul>【結果】
- リンゴ
- バナナ
- ミカン
ulタグを使った場合は、先頭に「・」がふられていますね！
liタグは、ol・ulタグの中なら何個でも使うことが可能となっています。
CSSを使えば先頭の数字や「・」を取ることもでき、横に並ぶようにCSSで指定すればヘッダー（ページの1番上などに会社のロゴやメニューなどが記載されている部分）にもよく使われます。
とても便利ですが、箇条書きなので「意味合いが同じもののカタマリ」という意味もあることを覚えておきましょう！
タグには「コンピューターに要素の意味を伝える」という役割があることも忘れずに！
ul・olの中にliタグを書くということを頭に入れておいてね！
ul・olは「ここから箇条書きだよ～」と伝える役割なのだ！
- ul、ol、liは「箇条書き」で使うタグ
- ulとli、olとliのようにセットで使う
- liタグはul、olの中なら何個でも使える
【箇条書きについてもっと詳しく知るならこちら】
Pタグは文章を段落ごとにまとめられる！
pタグは「paragraph：段落」の頭文字を取ったタグです。
意味合いとしては「文章を段落ごとにまとめる」という意味があります。
「句点（。）」で文章が区切られる文や、少し意味合いが変わる文章に使われることが多く、「pタグで囲った文章は改行される」という特徴もあります。
【例文】
<p>今日は曇っていますが、涼しくて過ごしやすいです。とても仕事がはかどります。</p>
<p>しかし、おなかが空きました。</p>【結果】
今日は曇っていますが、涼しくて過ごしやすいです。とても仕事がはかどります。
しかし、おなかが空きました。
見出しとかじゃない普通の文章を書くときに使うタグって理解でおけ？
それでオッケーだぜ！
かなり良く使うから覚えておこう！
aタグはリンクを貼る時に使う
上でも出てきましたが、別のページや同一ページの一部分に飛ばしたい時はaタグで囲うと、リンクを作成できます。
anchor：アンカー（錨）の頭文字を取ってaタグですね。
<a>と</a>の間に文章や画像などを記述すると、囲われた部分にリンクが生成され、クリックされると指定したページに飛ぶという動きになります。
ちなみに、href属性を使わないとリンク先に飛ばないので忘れずに飛ばしたいページを指定するようにしましょう。
【aタグの使い方】
<a href="https://webgui.jp" target="_blank">web食いのトップページに飛ぶ</a>【結果】
↑クリックするとこのサイトのトップページに飛ぶことができます。
ちなみに、「target」という属性を指定して、値に「_blank」と指定すると、ブラウザの別タブが開いてそこに表示するという指定も可能です。
aタグも良く使うから覚えておいてね！
Web制作でよくあるのが、「リンク先は決まっているけど、そのページがまだ作られていない」って状態。
そういう場合は「href=”#”」とすると、今作っているページの一番上に移動してくれるぜ！
「#」があれば「まだ飛び先が作られていないんだな」ということは共通認識として理解でき、リンク先をあとから追加する場合も目印になるから忘れずにつけておこう！
- aタグはリンクを貼る場所に使う
- target=”_blank”で別タグに飛び先のページを表示できる
- 飛び先が決まってない場合はhref=”#”を指定しておこう！
【aタグについてもっと詳しく知るならこちら】
imgタグで画像を挿入できるよ！
imgは「image：イメージ」から名付けられたタグです。
Web業界では画像のことを「イメージ」とか「イメージ画像」と呼ぶことも多いので覚えておくと良いでしょう。
使い方は以下の通り。
【例（※画像はこのサイト内で保存されているものを使っているので、同じように書いても画像は表示されません】
<img src="/wp-content/uploads/pixta_20291413_L-1.jpg" alt="頑張ろう！">【結果↓】
このように、キレイな女性の画像が表示されました。
例にある通り、imgタグには「src属性（ソース）」と「alt属性（オルト）」を設定する必要があります。
src属性ってなんなん？
src属性とは、「このフォルダのこの画像ファイルを表示してね！」と指示するための属性です。
挿入したい画像がどこにあるのかを指定してあげないと、コンピューターはどの画像を表示すればいいかわからないので、必ず指定してあげましょう！
【src属性の値の指定方法は2種類ある】
- 「絶対パス」という「http」もしくは「https」から始まる、別のWebサイトの画像を挿入したい場合などに使う、URLで指定する方法（今回は特別に絶対パスで指定しました）
- 「相対パス」という同じWebサーバー上にある画像ファイルを、あなたが今いるファイルの場所から相対的に場所を指定する方法
デバッグツールで上の画像を選択すると、「/wp-content/uploads/pixta_20291413_L-1.jpg」と表示されています。
このページは相対パスで記述されているのが分かりますね！
絶対パスってなに？
絶対パスとは、「https://ドメイン名からファイルまで全て記述するパス（path：目的地までの道のり）の指定方法」です。
例えば上の画像のように、https://webgui.jpというサイトのimgフォルダのapple.jpgというファイルを読み込みたい場合は、「https://webgui.jp/img/apple.jpg」と記述します。
どんな時に使うかというと、主に外部のウェブサイトにリンクを貼る時に使います。
一見「こっちの方がわかりやすいし、全部これでやればいいやん」と思いますが、もしリンクを貼った先のウェブサイトのドメインが変わってしまった時には表示されなくなるというリスクがあります。
自分のウェブサイトのリンクをいくつも絶対パスで指定していて、もしドメインが変わったら全て変更しなきゃいけないと考えると、面倒だと思いませんか？
そのため、絶対パスは基本的に外部サイトのリンクを貼る時に使います。
なんだかよくわからないなぁ。
とりあえず「外部サイトのリンクを貼るときは絶対パス」って覚えておけば間違いないよ。
シンプルに行こう！
相対パス？ならドメインが変わっても張り替える必要はないの？
そうゆうこと！相対パスについて学んでみよう！
相対パスってなに？
絶対パスについては、URLをそのまま指定すればいいだけなのでわかりやすいと思いますが、「相対パス」ってわかりにくいですよね？
相対パスとは、「今いる自分の位置から別の場所を指定する時の道のりを示す方法（パスとは道のりのこと）」です。
自分のサイト内でファイルを読み込んだり、別ページへのリンクを貼る時に使われます。
今いる自分の位置とは、Web制作の場合「今作成しているHTMLファイル」の場所のことです。
例えば、今回は作成したtestフォルダの中にhtmlファイルを保存しているため、「testフォルダの下の階層」にindex.htmlファイルがあるので、今いる自分の位置は「testフォルダの1つ下の階層」と言うことができます。
もし、今いる自分の階層と同じ階層（testフォルダの下）に「apple.jpg」という画像ファイルがある場合、パスは「src=”./apple.jpg”」か「src=”apple.jpg”」です。
「./」は同じ階層という意味を持ち、１つ上の階層を指定したい時は「../」、１つ下の階層を指定したい時は「/」とファイル名の前に記述します。
「apple.jpg」という画像ファイルがtestフォルダと同じ階層にある場合は「src=”../apple.jpg”」となりますね。
今いる自分の階層に「img」フォルダを作成し、その中に「apple.jpg」の画像ファイルがある場合は「./img/apple.jpg」です。
階層が2つ以上違う場合は、「../../apple.jpg」のようにつなげて書くことができます。
画像が表示されない時は、パスが間違っていることが多いから注意しよう！
初めはややこしく感じるけど、慣れたらスイスイだからゆっくり覚えようね！
さっきの「ドメインを変えても相対パスならリンクを貼り直す必要はない」ってどうゆうこと？
相対パスはドメイン名をそもそも記述しないから、ドメインが変更されてもフォルダ名やフォルダのある場所が変わらなければ何も変化がないんだ。
例えば、webgui.jpというサイトの下にtestフォルダがあって、その下にさっき作ったindex.htmlがあるとするでしょ？
もしwebgui.jpがwebgui.comになった場合でも、testフォルダの下にあることは変わらない。
つまり、ドメイン名を変更してもリンクを貼り直す必要がないってこと！
なるほど！だから自分のサイトのリンクは相対パスで書くんだね！
自分が用意した画像をimgタグで使うなら相対パスが基本なのか！
あなたが作ったindex.htmlに絶対パスと相対パスで画像を読み込んでみよう！
以下のように書いてみてindex.htmlを保存しよう。
保存したらブラウザでindex.htmlを開き、画像が表示されるかチェックしよう！
<!DOCTYPE html>
<html>
<head>
<title>ここはタイトルです。</title>
<meta charset="utf-8">
</head>
<body>
<h1>ここは見出しです。</h1>
<p>ここは本文です。</p>
<!--ここから下を追加してみよう-->
<!--絶対パス-->
<p>
<img src="https://webgui.jp/wp-content/themes/webgui/img/common/logo.svg" alt="web食いのロゴ">
</p>
<!--相対パス-->
<p>
<img src="./test.jpg" alt="このtest.jpgはあなたが用意してみてね！ネットで適当なjpg画像を保存して、名前をtest.jpgにすればOK">
</p>
</body>
</html>【パスについて覚えておきたいポイント】
- 絶対パスと相対パスの違いは、ドメインから目的地まで全ての道のりをブラウザに教えてあげるか、今いる自分の位置から目的地までの道のりを教えてあげるか
- 絶対パスは主に外部サイト、相対パスは自分のサイトの中で使う
- 1つ上の階層を指定する時は「../」
- 同じ階層を指定する時は「./」
- 1つ下の階層を指定する時は「/」
【パスについてもっと詳しく知るならこちら】
alt属性ってなんなん？
alt属性は、表示したい画像が何らかの理由で表示できない時に、設定した文字を表示して、「ホントはこういう画像が貼ってあったんだよ～」と読んでいる人に教えてあげることができます。
また、コンピューターは画像をみて何の画像かを正確に判断することができません。
そういった場合でもalt属性が役立ちます。
上の画像を見ても「かわいい女性」なのか「きれいな女性」なのか「頑張れ！」と応援している画像なのかは判断しにくいですよね？
そういう場合にalt属性は役立ち、今回の場合は「頑張れ！という画像だよ～」と指定しています。
imgタグはなんかややこしいなぁ。
そんな苦手意識を持たなくても大丈夫！
パスさえマスターしちゃえば、あとは画像を表示するだけのタグだからね！
難しく考えなくてOKだ！
ちなみに、パスはcssファイルを読み込むときとかにも使うから、ゆくゆくはちゃんと使えるようになろう！
あ、他のタグと違ってimgタグは「閉じタグ（</>）」を付けないのもポイントだぜ！
- imgタグは画像を挿入する時に使うタグ
- 閉じタグは必要ない
- src属性で画像の場所を指定する
- alt属性で画像についての説明を記述する
【imgタグについてもっと詳しく知るならこちら】
brタグでどこでも改行できる！
brタグは改行するためのタグで、break：改行の初めの2文字を取っています。
pタグのところで文章を書きましたよね？
<p>今日は曇っていますが、涼しくて過ごしやすいです。とても仕事がはかどります。</p>
<p>しかし、おなかが空きました。</p>このコードの表示結果は以下の通りでした。
|
今日は曇っていますが、涼しくて過ごしやすいです。とても仕事がはかどります。 しかし、おなかが空きました。 |
pタグの終了タグ（</p>）で改行されていますよね？
しかし、「今日は曇っていますが、涼しくて過ごしやすいです。←ここ」のところで改行したい場合はどうしましょう。
その部分だけpタグを囲い直しますか？
実は、このような場合にbrタグが役立ちます。
<p>今日は曇っていますが、涼しくて過ごしやすいです。<br>とても仕事がはかどります。</p>
<p>しかし、おなかが空きました。</p>【結果】
|
今日は曇っていますが、涼しくて過ごしやすいです。 しかし、おなかが空きました。 |
brタグを使えば、どこでも改行できるのでとても便利です。
もちろんpタグ以外にもテキスト部分にならどこでも使えるので、試してみてくださいね♪
brタグも閉じタグは必要ありません。
brタグも便利なタグだから覚えておこう！
意味合いを変えずに改行できるぜ！
brタグは色んなところで改行できる
table、tr、th、tdタグで、表を作れるよ！
Webサイトを作成していると、「これ文章だとわかりにくいから表にしたいなぁ」なんて場面に遭遇します。
そんな時は「tableタグ」を使いましょう！
テーブルタグについては言葉での説明が分かりにくいと思うので、まずは例を見てみましょう！
<table>
<tr>
<th>商品名</th>
<th>単価</th>
</tr>
<tr>
<td>リンゴ</td>
<td>100円</td>
</tr>
<tr>
<td>バナナ</td>
<td>150円</td>
</tr>
<tr>
<td>ミカン</td>
<td>50円</td>
</tr>
</table>【結果】
| 商品名 | 単価 |
| リンゴ | 100円 |
| バナナ | 150円 |
| ミカン | 50円 |
※わかりやすいように表に線を引いていますが、ブラウザで表示すると初めは線が表示されません。線はCSSで指定します。
tableタグは基本的に、「<table></table>」、「<tr></tr>」、「<th></th>」、「<td></td>」で構成されます。
「<table></table>」は「ここからここまでが表ですよ～」とブラウザに伝える役目を担っています。
「<tr></tr>」は「ここからここまでが横並びに表示する内容ですよ～」という意味で、表でいう「行」を指定しており、「table row」の略です。
「<th></th>」は「table header」の略で、「<th>で囲われた内容は表の見出しだよ～」という意味となります（ここでいう「商品名」と「単価」）。trタグの中に記述します。
「<td></td>」は「table data」の略で、「見出しに対するデータだよ～」と指定しています（「リンゴ」や「100円」など）。trタグの中に記述します。
table,tr,th,tdを組み合わせることで表になっていることがわかりますね！
なんかややこしいなぁ
確かに初めはややこしく感じるかもね！
とりあえず今は、表の枠は「tableタグ」で作って、横並びの行は「trタグ」、各行や列の見出しは「thタグ」、表のデータは「tdタグ」くらいに覚えておこう！
オッケー！てか、それしかできないよ（笑）
trタグを増やせば行数が増えて、trタグの中身（thやtd）を増やせばマスが増えるぜ！
必要に応じて使い分けてくれ！
- tableタグを使えば表を簡単に作成できる
- table,tr,th,tdタグを組み合わせて作るのが基本
- trが増えれば横の行数、th・tdが増えればマスを増やせる
- th・tdは必要に応じて数を増やす
【tableタグについてもっと詳しく知るならこちら】
formタグでユーザーが入力や選択できるフォームを作れるよ！
webサイトを見ていると、以下のようなものを見たことはないでしょうか？
名前や性別、住所などをユーザーが入力・選択できるものを「フォーム」と言います。
実はこれ、HTMLで作成されているのです！
このようなフォームを作成する時に使うのが「formタグ」。
使い方はformタグのなかに「inputタグ」や「selectタグ」「textareaタグ」などを組み込むことで表示されます。
具体的には以下の通り。
<form method="post">
<input placeholder="テキスト入力ができるよ" type="text"><br>
<input type="checkbox" id="check1"><label>チェックボックスだよ</label>
<input type="checkbox" id="check2"><label>チェックボックスだよ</label>
<input type="checkbox" id="check3"><label>チェックボックスだよ</label>
<br>
<select>
<option selected>選択できるよ</option>
<option>選択肢2</option>
</select>
<br>
<textarea placeholder="複数行のテキスト入力ができるよ"></textarea>
</form>【結果↓】
このように、formタグの中に様々なタイプの入力・選択フォームを記述することで、色々なフォームを作成できます。
ただHTMLで作ったフォームだけだと、データを送信することしかできません。
そんな時は、PHPなどのサーバーサイド言語を使います。
PHPなどのサーバーサイド言語（サーバー側で動くプログラミング言語）と組み合わせて使うことで、webサイト作成者側がユーザーが入力した内容を知ること（受信すること）ができたりして大変便利です。
このページはHTMLの基礎を紹介しているので、inputタグの種類などは割愛しますが、formを作る機会があれば調べてみてくださいね！
おお〜！こういうのもHTMLで作ってたんだね！
そうなんだぜ！楽しくなってきただろう？
テキスト入力ができたり、ボタンで選択肢を選べたり、いろんな種類があるぜ！
さらにformにはいくつかの属性を指定することで、細かな設定ができるから調べてみてくれよな！
- formタグを使えば入力・選択フォームを作れる
- テキスト入力、チェックボックス、複数行テキスト入力、ドロップダウンメニューなどがある
- サーバーサイド言語と組み合わせて使う
【formタグについてもっと詳しく知るならこちら】
【フォーム関連のlabel要素について知るならこちら】
divタグを使って、範囲を指定しよう！
Webサイトを作るうえで欠かせないタグが「divタグ」です。
どういうタグかというと、「範囲を指定するタグ」といえるでしょう。
divタグは「divided（分割）」という意味のタグで、各要素を囲って要素の範囲を指定するときに使われます。
他のタグと違いブラウザに何かを伝える意味を持ちませんが、divタグで囲った範囲にまとめて同じスタイル（CSS）を当てたい時などに便利です。
分かりやすい例でいうと、「背景色」ですね！
以下の例を見てみましょう！
<p>トンネルに入ってから退屈な道が続いている。光はまだ見えない</p>
<div style="background: blue; color: white; width: 300px; height: 100px;">
<p>しかしトンネルを抜けると、アマルフィーの鮮やかな青い海が広がっていた。</p>
</div>詳しくはCSSの解説記事で学んでもらいますが、背景色が青、文字色は白、横幅は300px、高さは100px、という指定をしています。
【結果】
このように、divタグで指定した範囲全体の背景色が青、文字の色が白くなっていることが分かります。
divタグを使って範囲を指定することで、広い部分に様々なデザインをすることができそうですよね♪
逆に、「他の要素はそのスタイルを当てて良いけど、divタグで囲った範囲はそのスタイル当てないでね」なんて指定も可能ですよ！
ちなみにdivタグで囲った前後には改行が入ります。
divタグは便利そうだね！
すごく便利だよ！divタグがなきゃWebサイトはできないと言っても過言じゃないね！
実際Web制作をしているときもものすごい回数を使うから、絶対に覚えておこう！
spanタグは細かいデザインを可能にしてくれる！
spanタグは日本語に訳すと「範囲」を意味し、divタグと非常によく似ています。
つまり、範囲を指定してスタイルを当てる時に使うタグということです。
例えばpタグの中の文字を、「一部分だけ色を変えたい」となった時などに使います。
<p><span style="color: red;">赤色やで～</span><span style="color: blue;">青色やで～</span><span style="color: green;">緑色やで～</span></p>【結果↓】
このように、spanタグで囲った部分だけそれぞれ色を変更できました。
spanタグは細かいデザインをするときなどにとても便利なので、覚えておくと良いでしょう。
spanタグも便利そうだね！
Web制作でも「一部分だけデザインを変える」ってことが頻繁にあるから、spanタグは欠かせないぜ！
でもさ、範囲を指定するなら「divタグ」でもいいんじゃないの？
お！いいところに気づいたね！
実は「divタグ」と「spanタグ」には大きな違いがあるんだ。
それが、「ブロック要素」と「インライン要素」。
はぁ？全然意味がわかりませ～ん。
詳しく教えてよ！
ブロック要素とインライン要素の違いをマスターしよう！
ブロック要素とは「要素の前後に改行が入る要素」で、ブロック要素の中身を含めて1つのカタマリとして扱われます。
一方インライン要素は「改行の入らない要素」で、基本的にはブロック要素の中身になると思ってもらえると良いでしょう(ブロック要素の中にブロック要素が入ることも多いです）。
aタグやpタグなど、全ての要素はブロック要素かインライン要素に分類されています。
| ブロック要素のタグ |
|
|---|---|
| インライン要素のタグ |
|
| ブロック要素の特徴 |
|
|---|---|
| インライン要素の特徴 |
|
文字だけだとわかりにくいので、以下の例を見てみましょう！
ブロック要素とインライン要素の違いを表しています（CSSは背景色以外同じです）。
<p style="background: lightgreen; color: white; padding: 20px 0; margin-bottom: 20px;">ブロック要素やで</p>
<p style="background: lightgreen; color: white; padding: 20px 0; margin-bottom: 20px;">ブロック要素やで</p>
<span style="background: lightblue; color: white; padding: 20px 0; margin-bottom: 20px;">インライン要素やで</span>
<span style="background: lightblue; color: white; padding: 20px 0; margin-bottom: 20px;">インライン要素やで</span>
<span style="background: lightblue; color: white; padding: 20px 0; margin-bottom: 20px;">インライン要素やで</span>【結果↓】
このように、ブロック要素は縦に並んで、インライン要素は横に並ぶようになっています。
またブロック要素にはCSSの「paddingとmargin」で余白を指定できていますが、インライン要素では上下方向のpaddingしか余白を指定できていません（今は見た目が違うなくらいでOKです！）。
そして重要なことは、ブロック要素とインライン要素には「配置ルール」があるということ。
以下のコードを確認してみましょう。
<!-- ○ ブロック要素の中にインライン要素はOK!-->
<div><span></span></div>
<!-- × インライン要素の中にブロック要素はダメ！-->
<span><div></div></span>一言でいうと「ブロック要素の中にインライン要素は入れられるが、その逆はダメ」というルールです。
これはルールなので、しっかりと守りましょうね！
ちなみに、ブロック要素の中にブロック要素、インライン要素の中にインライン要素はOKです♪
なるほど！ブロック要素とインライン要素には表示のされ方に違いがあったんだね！
そゆこと！
さっきのspanタグとdivタグの話に戻るけど、上の例ではpタグにspanタグが囲われていたよね？
あのspanタグをdivタグに変更したら以下のようになる。
【spanタグの場合】
<p><span style="color: red;">赤色やで～</span><span style="color: blue;">青色やで～</span><span style="color: green;">緑色やで～</span></p>
【divタグに変更した場合】
<p><div style="color: red;">赤色やで～</div><div style="color: blue;">青色やで～</div><div style="color: green;">緑色やで～</div></p>
あ！縦並びになっちゃってる…。
横並びで表示させたいときにはdivタグじゃダメだったんだね。
そうなんだ。
ブロック要素に変更してしまうと縦並びになってしまうから、あの場面ではspanタグだったんだよ。
まぁ、ブロック要素に変更しても横並びにする方法はあるから大きな問題はないけど、ブロック要素とインライン要素には違いとルールがあるってことだけはしっかりと覚えておこうね！
ふぁ～い
ちなみに、インライン要素にも上下のpaddingは効くけど、前後に要素があったら重なっちゃうから、あまり使わない方がいいぜ！
全然意味わからん（笑）
ここで全てを理解しなくても大丈夫。制作作業を繰り返すと、徐々に意味がわかってくるから！
【ブロック要素とインライン要素まとめ】
- ブロック要素：縦に並ぶ、幅や高さを指定できる、余白の指定ができる
- インライン要素：横に並ぶ、幅や高さは指定できない、余白は一部指定できない
- ブロック要素の中にインライン要素が基本。逆は許されない
HTMLは入れ子構造にして書くのが基本！
HTMLは「入れ子構造」にして書くのが基本となります。
入れ子構造とは、大きいものの中に小さいものを入れていくという構造のことです。
わかりやすい例でいうと、マトリョーシカでしょうか。
HTMLでも入れ子構造で書くのが基本となっており、開始タグと閉じタグで囲うことで入れ子構造としていきます。
画像のように、タグをタグで囲うことを「入れ子にする」と言います（英語だと「ネスト」と言います）。
囲っている要素を「親要素」、囲われているものを「子要素」、子要素にさらに囲われているものを「孫要素」と呼んだりするので、覚えておきましょう！
HTMLの基本構造を例にすると、htmlタグが親要素、headタグとbodyタグはhtmlタグの子要素となります。
このあと勉強するCSSでも重要な部分となるので、HTMLを書く際は入れ子構造となるように意識してみてくださいね。
ヘェ〜。入れ子構造にしなきゃいけないんだね。
そうなんだ。
入れ子構造にするとCSSで適切なスタイルを当てられるし、他の人が見た時にも見やすいコーディングにすることができる。
例えば、以下のようなコードはどっちが見やすい？
あ！確かに上の画像みたいに入れ子構造になってる方が見やすいね！
開始タグと終了タグの階層がわかりやすいかも！
まぁ、どっちも入れ子構造なんだけど笑
ただテキストエディタを使うと、適切な入れ子構造なら子要素に自動的に「インデント（タグの先頭にあるスペース）」が作られるから、大きい順にネストするのはすごく重要だぜ！
下の画像のようにコーディングする奴は嫌われるから要注意だ！
入れ子構造にはルールはないの？
さっきインライン要素でブロック要素を囲っちゃダメって学んだよね？
入れ子構造にもそういうルールがあるんだ。
例えば、ブロック要素同士でもpタグでh1タグを囲っちゃダメとかね。
その辺は以下のページに詳しく書いてあるぜ！
- HTMLは入れ子構造で書くのが基本
- 囲っている要素のことを「親要素」、囲われている要素のことを「子要素」、子要素に囲われているものを「親に対する孫要素」という
- CSSでの指定でも入れ子構造はとても重要
コメントアウトを使うとすごく親切！
コーディングをしていくとものすごく長い行になり、とても読みにくいコードになることがあります。
そんなとき、「コメントアウト」を使うととても便利です。
コメントアウトとは、「メモ書き」のようなものです。
どのような時に使うかというと、「ここからここまでは「〇〇の特徴」についてコーディングしています」のように範囲をメモして見やすくしたり、他の人が見る場合にメッセージを残したりするときなどが多いですね。
使い方は自由なので、自分も見やすく、相手も見やすいようにコメントアウトを残してあげるととても親切でしょう。
書き方は以下の通りです。
<!-- ここのコメントアウトは、ブラウザ上に表示されません -->また、コメントアウトしたいところにカーソルを当て「Ctrl + /（スラッシュ）」（macならcommand + /）でコメントアウトすることも可能です。
コメントアウトってけっこう使う？
かなり使うぜ！
コメントを残すためだけじゃなく、例えば「あ、ここのコードは今は使わないけど、後で使うかもしれないから残しておきたい」って場合も使えるんだ。
コメントアウトするとブラウザには表示されないからね。
あとはコーディングしているとどうしてもdivタグが多くなっちゃうんだけど、そんな時にdivタグの終了タグの後ろにclass名をコメントアウトで書いてあげると、「あ、これは〇〇ってclass名がついたdivタグの終了タグだな」ってわかるから、修正する時にすごく助かるんだ。
閉じタグ忘れの時にも一目でわかるしね！
<body>
<div class="wrap">
<div class="box">
<div class="content">
<p>コメントアウトがあると、どのdivタグの終了かがわかりやすい</p>
</div><!-- /.content -->
</div><!-- /.box -->
</div><!-- /.wrap -->
</body>おほー！それすごく便利だね！
秘密のメッセージなんかにも使えそう♡
コメントアウトはブラウザ上では反映されないけど、デバッグツールを開いたらコメントアウトも見れるから変なことは書かないようにね（笑）
ぎくっ！
ここまででHTMLの基本的なことは説明完了だ！
これだけ知っていれば、HTMLに関して基礎は学んだと言ってもいいぜ！
はぁ～。けっこう学ぶことは多いんだね。
でも、思ったよりできそうで楽しくなってきた♪
そうでしょ？HTMLは誰でもできるようになるから、継続的に勉強してみよう！
あとはCSSを勉強すればWebサイトが作成できてしまうぜ！
もちろん、まだまだHTMLのタグについて、知るべきことはたくさんあるけど、後は作りながら調べれば問題ないぜ！
読むだけだと頭に入ってこないだろうから、実際にHTMLを自分で書いて、それがブラウザで意図したとおりに表示されるか確認する、っていう作業を繰り返すといいぜ！
今回学んだタグを打ち込むとこんな感じ▼。これをいじったりして、表示を変えてみよう！
<!DOCTYPE html>
<html>
<head>
<title>君に告白したい</title>
<meta charset="utf-8">
</head>
<body>
<h1>君への想い</h1>
<p>愛してるじゃ伝わらないから、僕の感情をここに書くね。</p>
<h2>愛だと重すぎる理由</h2>
<ul>
<li>まず意味わからない</li>
<li>普段使わない</li>
<li>なんかキモい</li>
</ul>
<h2>ラブワードランキング</h2>
<h3>言うのが恥ずかしい編</h3>
<ol>
<li>愛してる</li>
<li>味噌汁作って</li>
<li>大好き</li>
</ol>
<h3>抱かれてるシーン編</h3>
<ol>
<li>優しくするぜ</li>
<li>電気消していい？</li>
<li>大好き</li>
</ol>
<table>
<tr>
<th>商品名</th>
<th>単価</th>
</tr>
<tr>
<td>壁ドン</td>
<td>250円</td>
</tr>
<tr>
<td>ハグ</td>
<td>500円</td>
</tr>
<tr>
<td>キス</td>
<td>1500円</td>
</tr>
</table>
</body>
</html>