【HTML & CSS の解説】HTML の全体構造を学ぼう。初心者でも理解できます。

CSS HTML プログラミング

daiki

こんにちは、daiki です。

今回は、HTML の全体構造を学びましょう。
プログラミング初心者でも簡単に理解できるように解説します。

Progate の HTML & CSS のカリキュラムを全て終えたので復習しながら共有。
ついでに誰かの役に立てればと思います。

こちらは Progate のホーム画面です。

HTML & CSS の部分にメダル?のマークがついていますね。
これがカリキュラムを終えた証拠。

今は SQL を学んでいるので、そちらはついていません。

では、話を進めましょう。

HTML の全体構造を学ぶ。

こちらを深堀解説です😌

HTML の全体構造を解説


HTML の全体構造を初心者でも分かりやすく解説します。
まずはこちらを見てください↓

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<h1>daikiblog</h1>
		<p>こんにちはdaikiです</p>
	</body>
</html>

これが「HTML の型」と呼ばれるもの。
HTML を書く時はこちらを使用します。

では、中身を順番に解説します。

!DOCTYPE html

!DOCTYPE html は HTML のバージョンを指定するためのものです。
「!DOCTYPE html 宣言」と呼ばれています。

こちらは HTML5 というバージョン。

詳しく書くと難しいので、「HTML の一番上に書く」と覚えておけばOKです。

おそらく、プログラミング初心者の方に説明しても理解できないと思います。
※僕は初めて聞いた時に理解できませんでした。

なので、HTML & CSS を一カ月ぐらいやった後で、検索してみてください。
その時、理解できると思うので。

head を詳しく

次は head を解説していきます。
head 要素は、Web ページの設定に関する情報を書くためのもの。

head 内に書いたコードは Web ページ上には表示されず、エディター内だけに表示されます。

head の中身

head の中身を見ていきましょう。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>daikiblog</title>
		<link rel="stylesheet" href="stylesheet.css">
	</head>
	<body>
		<h1>daikiblog</h1>
		<p>こんにちはdaikiです</p>
	</body>
</html>

head 要素の中に3つほど付け足しています。
こちらを解説。

meta charset=”utf-8″

こちらは文字コードを指定するためのコード
文字化けなどを防ぐためのものです。

!DOCTYPE html で宣言している HTML5 で推奨されているのが、utf-8 というコード。

これを書いておかないと、実際に表示させる文字が暗号みたいなものになります。
文字コードの設定と覚えておきましょう。

title

これは簡単ですね。
ページのタイトルです。

実際に見てもらった方が分かりやすいですね↓

daikiblog と書かれているところですね。

link rel=”stylesheet” href=”stylesheet.css”

これは少し難しいです。
なので、ある程度理解できればOKです。(後に理解すると思うので)

HTML & CSS を学んだ方なら分かると思いますが、Web ページは HTML で書いたものを CSS で装飾を加えることでページ上に表示させています。

参考までにこちらをどうぞ↓

【HTML & CSS の解説】文字の色、大きさ、種類、高さ、幅、背景の色、タグに名前を付ける。

でも本来、そのためには HTML で CSS を読み込む必要があります。
その過程が link rel=”stylesheet” というわけです。

link rel=”stylesheet” でファイル要素を指定して、
href=”stylesheet.css” でファイルを読み込む。

イメージできましたかね?
少し難しいので、今はわからなくてもOKです。

とりあえず、「そういうものなんだ。」と思っていただければいいと思います。

body を詳しく


次は body を解説していきます。
body は簡単に言えば、Web ページのレイアウトですね。

div によって構成される

body は div によって構成されています。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>daikiblog</title>
		<link rel="stylesheet" href="stylesheet.css">
	</head>
	<body>
		<div class="header">
		</div>
		<div class="main">
		</div>
		<div class="footer">
		</div>
	</body>
</html>

こちらが body 内の構造。
簡単なので、さらっと学びましょう。

div class は分かりますかね?
参考までにこちらをどうぞ↓

class=”○○○” の単語は自由でもいい。だけど分かりづらいのはダメ。

div class=”header”

header はWebページ上の上の部分を指します。

※Progate から引用しています。以下略

分かりやすく class ごとに色分けしてあります。
header は黄色の部分ですね。

ちょっとイメージしずらいですかね?
僕のブログで見てみます。

矢印の部分ですね。

div class=”main”

次は main です。
基本構造は header と同じです。

ページ本文の部分ですね。

div class=”footer”

察しのいい方はもう理解したかと思います。
そうです。
footer も同じ構造。

下の部分です。

HTML でサイトを作成していくというのはこう言う事ですね。
部分的に指定して、徐々に装飾を加えていく。

そんなイメージです。
では😌