はじめに
最近、オリジナルアプリ作成中でフロントをしっかり目を惹くものにしたいなと考えていまして、いじっていたんですが、なんだか知識がぬけに抜け落ちていたので、今一度、初心に帰って、HTMLの超基礎を復習していきます。
よろしくお願いします。
そもそもHTMLとは！？みたいなのは割愛します。
headとbody
HTMLはものすごく大きく分けるとhead要素とbody要素に分けることができます。
記述にするとこんな感じ↓
<head>
</head>
<body>
</body>
head要素の中に記述していくのは、サイトの情報やCSSファイルの情報を記載してあげます。
私はheadの中は各々のHTMLファイルの概要、説明書の部分だと思っています。
そしてbodyはブラウザに表示する情報を記述していくところです。
headを商品の説明書と捉えるなら、bodyは商品本体そのものですね。
HTMLを記述するにはまず
とはじめに記述し、このファイルにはHTMLを書きます！って言う宣言をしなければなりません。
そしてhtml要素を用意してそのなかに記述していきます。
つまり記述にするとこんな感じです↓
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
これは絶対必須の記述として覚えておきましょう。
meta(メタ)要素
head要素の中に情報を書き込む中で、このHTML文章は◯◯ですよ！と指定するためにmeta要素を用います。終了タグが必要ない要素です。
先ほどの続きで書くとこうなります↓
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
charset(キャラセット）属性は、メタ要素の中で、どのような文字コードを使うのか示すための属性です。
UTF-8は一般的な文字コードです。
つまり、「このhtml文章はUTF-8という文字コードを用います」と言っています。
title要素
サイトのタイトルを指定するための要素です。これもheadの中に記述しますのでサイトの内容に直接的には関わってきません。
タブに表示される名前として使用されます。
こんなやつ↓
さっきの続きとしてこんなふうに書きます。↓
※ロゴは反映されません
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Qiita</title>
</head>
<body>
</body>
</html>
h1〜h6要素（見出し要素）
ここからはbody要素内で用いる要素を一部紹介していきます。
最後にまとめて例を貼ります。
bodyは実際にブラウザ上で表示する情報を表示できます。
hから始まる、h1/h2/h3/h4/h5/h6の要素は文章の見出しを作るための要素です。
h1が一番大きいです。数字が大きくなるにつれて文字は小さくなっていきます。
p要素
文章の段落を示すためにp要素を使います。
＜p＞と＜/p＞で囲んで一つの段落として認識させます。
b要素
＜b＞と＜/b＞で囲んだ部分を太字にすることができます。
a要素
＜a＞と＜/a＞で囲んだテキストをリンクにすることができます。
a要素の中にhref属性を指定して移動させたいページのurlを記述することで、そのページへ遷移させることができます。
body要素の中身の例
これらの要素を使って例を記述してみました。
結果のブラウザ画面と一緒にご覧ください。
<body>
<h1>
これは見出しです
</h1>
<p>
1つ目の段落です
</p>
<p>
2つ目の段落です
</p>
<p>
3つ目の段落です。<b>この部分は太字になります。</b>
</p>
<a href="https://www.google.com/">クリックすると、Googleへ移動します。</a>
</body>
ブラウザ↓
最後に
HTML/CSSは正直苦手で、あまりやりたくないのですが、フロントもしっかり理解してこそ立派なエンジニアになれると思うので、苦手だけど学習は怠らずやっていきたいと思います。