head要素
ウェブサイトの情報や、参照するCSSファイルを記載する部分です。ここに記述した情報は画面上には表示されない。
例
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>サイトタイトル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
body要素
画面上に表示したい情報を記載するところ。
要素はタグというものに囲まれて表現される。
タグ
HTMLにおける要素のかたまりを示す記述です。
開始タグと終了タグで囲むことによって、コード全体のうち、どこからどこまでがhead要素で、どこからどこまでがbody要素か判断することができる。また、終了タグには/がある点に注意する。
この文章がHTML文章であることを宣言する要素。閉じタグはない。
この要素を記述していないと、レイアウトが崩れたり、表示がされない場合がある。
＜html＞...＜/html＞
HTML文章の始まりと終わりを示す要素。
＜head＞...＜/head＞
ウェブサイトの情報を記述する部分。
＜div＞...＜/div＞
「特定の意味が無い」要素。汎用的に様々な用途で使うことができ、レイアウトを作成する際に重宝される。
classセレクタを付与して使用。
＜footer＞...＜/footer＞
フッターを示す専用の要素。
コメント数やコピーライトをfooter要素で囲うことによって、下部にあることがHTMLだけでわかるようになる。
footer要素は、ブロックレベル要素。
＜meta＞
文章に関する情報を指定する時に使用する。閉じタグが無い要素なので、注意する。
後に続く、charset="UTF-8"は文字コードを指定するもので、この記述が無いと文字化けしてしまう。
＜title＞...＜/title＞
ウェブサイトのタイトルを記述する場所。ここにタイトルを記述してもウェブサイトの画面上には表示されない。
Googleでの検索結果や、ブラウザのタブに表示するタイトルとして使用される。
＜link rel="stylesheet"＞
この記述によって、対応するCSSファイルを指定することができる。hrefには実際のファイル名を記載する。
＜link rel="stylesheet" "href="参照すべきCSSのファイル名を指定"＞
＜h1＞...＜/h1＞
文章の見出しを指定するもの。
＜h1＞.../＜h1＞で囲むと見出しと判断されて文字が太く大きく表示される。
＜p＞...＜/p＞
文章の段落を表すもの。
＜p＞...＜/p＞で囲むとひとかたまりの文章として認識される。
＜b＞...＜/b＞
文字を太くする要素。＜b＞...＜/b＞で囲まれている部分だけ太字になります。
上記のような要素はたくさんのものが存在する。
ブロックレベル要素
ウェブデザインにおける箱となる要素の事。
＜h1＞...＜/h1＞や＜p＞...＜/p＞はブロックレベル要素。
インライン要素
ウェブデザインにおける箱にはならず、主には文字の修飾などに使われるもの。
＜b＞...＜/b＞はインライン要素です。