HTMLとは？
HTMLとは、サイトの土台を作るマークアップ言語と言われる言語です。
え？マークアップ言語？なにそれおいしいの？
となってる人も大丈夫です！意外と簡単です！試しに、HTMLでページを一つ書いてみましょう！パソコンがあればだれでもできます！
簡単なHTMLサイトの作成
下のコードが最小構成のHTMLのWEBページです。コピーして自分のPCで動かすこともできます
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>タイトル(ブラウザのタブに表示されるやつ)</title>
</head>
<body>
<h1>タイトル</h1>
<p>内容</p>
</body>
</html>
サンプルコード1
実際にブラウザで見てみるとこうなります。
これだけでWEBサイトはできます！ですが、なにか味気ないですよね。ここで登場するのがCSSです！！
CSSとは？
CSSとは、HTMLに色々な"装飾"をすることができます。ただ文字が並んでいるだけのWEBサイトよりも、レイアウトがきれいに整っている方が見やすいですよね
試しにさっき作ったページに、CSSで装飾をしてあげましょう。ここでは先程のページに赤色の背景色をつけてみたいと思います
<body style="background-color: red;>
<h1>タイトル</h1>
<p>内容</p>
</body>
これだけで完了です。実際にブラウザで見てます。
背景が赤色になりましたね！この感じで、サイズや形、レイアウトなど様々な装飾ができます！
HTMLを記述する上でのルール
HTMLは、簡単に言うと"箱"を組み合わせて構成されています。この"箱"は要素と呼ばれ、様々な種類があります。
例えば、タイトルの文字を入れたいと思ったとき、以下のように記述します。
<h1>タイトル</h1>
この場合、"h1"という要素の中に"タイトル"という文字が入っている状態になります。そして、この要素は <h1> で始まり </h1> で終わります。
この知識を踏まえてもう一度、サンプルコードを見てみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>タイトル(ブラウザのタブに表示されるやつ)</title>
</head>
<body>
<h1>タイトル</h1>
<p>内容</p>
</body>
</html>
"h1"以外にも"html","head","body","p"の要素があるのがわかりますね。そしてすべて<要素名>で始まり</要素名>で終わっているのがわかると思います。
少しずつ構造が理解できたでしょうか。次は一つ一つの"要素"の働き、役割について説明します。
HTMLの各要素の役割
ここでは、サンプルコード1で使われている要素を、上から見ていきたいと思います。
- 文書の最初に必ず宣言する "!DOCTYPE html"
<!DOCTYPE html>は、ファイルが何で記述されているのかを宣言するものです。HTMLを書くときには必ず宣言しましょう。
- 一番大きい箱 "html"
<html>は、<!DOCTYPE html>の次に記述します。この要素はページで一番大きい要素となります。
あとから出てくる要素は"すべて"このの中に書くことになります。
- 見えない情報を書く "head"
<head>は、WEBページの"本文以外の情報"を書くスペースです。 具体的には <meta charset="utf-8">などの文字コードの設定や <title>タイトル</title>のページのタイトルなど 様々な情報を書き入れることができます。
- ページの一番大事な場所 "body"
<body>は、WEBページの本文を書く一番大事な要素です。ここに記事など書いていくことになります。
body要素内の構成
body要素の中にも、先程と同じようなルールがあります。基本的な構成を今から紹介します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>タイトル(ブラウザのタブに表示されるやつ)</title>
</head>
<body>
<header>
<h2>SampleCode2.com</h2>
</header>
<main>
<h1>タイトル</h1>
<p>内容</p>
</main>
<footer>
<p>SampleCode.com AllRightReceved</p>
</footer>
</body>
</html>
サンプルコード2
こんどは<header>や<main>,<footer>が出てきました。これらはどんな働きがあるんでしょうか
- header要素 ※head要素とは別物
<header>は、通常、ページの上部に表示されているバーのようなものです。このサイトの場合 "aisaba.net" のロゴがある部分です。
- main要素 記事の内容など、メインとなるコンテンツ
<main>はその名の通りページのメインとなる部分をここに記述します。記事の内容もここです。
- footer要素
<footer>はページの一番下に表示されている部分になります。このサイトの場合 "aisaba.net とくになし/トップページ" と書いてある部分です。通常、会社名やメニュー、コピーライト表記をします。
HTMLの基本的な説明は以上になります。この知識があれば簡単なWEBサイトはすぐつくれますね！次はCSSの基礎を取り上げます。
