アジェンダ
- ブロック要素
- インライン要素
- HTMLでよく使われるタグ
- meta
- title
- div
- span
- 実践
- divとspanの違い
ブロック要素
それだけで一つの塊となる要素のこと。他の要素とは区別される。
インライン要素
全体の要素の中にある、一部分の要素のこと。
HTMLでよく使われるタグ
meta
文書のメタ情報を示すタグ。文書全体の情報を示すので、</meta>は存在しない。
title
文書のタイトルを示すタグ。
div
一つのブロック要素であることを示すタグ。
span
一つのインライン要素であることを示すタグ。
実践
前回作成したファイルに、上記のタグを追加してみる。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>自己紹介ページ</title>
</head>
<body>
<div>おはよう！こんにちは！こんばんは！</div>
<span>私はマコトです。</span>
</body>
</html>
<meta charset="UTF-8">
この文書の文字コードがUTF-8であることを示している。
<title>自己紹介ページ</title>
この文書のタイトルが「自己紹介ページ」であることを示している。
<div>おはよう！こんにちは！こんばんは！</div>
「おはよう！こんにちは！こんばんは！」という文書が、一つのブロック要素であることを示している。
<span>私はマコトです。</span>
「私はマコトです。」という文書が、一つのブロック要素であることを示している。
さて、このindex.htmlをWebブラウザで開くとこんな感じ。
タブに表示されているページのタイトルが「自己紹介ページ」となっている。
divとspanの違い
上記のindex.htmlではdivとspanの違いがイマイチわからない。
そこで、次のdiff.htmlを作成してみる。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>自己紹介ページ</title>
</head>
<body>
<div>おはよう！<div>こんにちは！</div>こんばんは！</div>
<div>おはよう！<span>こんにちは！</span>こんばんは！</div>
<span>私はマコトです。</span>
</body>
</html>
このdiff.htmlをWebブラウザで開くとこんな感じ。
なるほど。
divはブロック要素なので、<div></div>の内側と外側が別の要素として区別される。
「こんにちは！」と「おはよう！」「こんばんは！」は別の要素なので、改行で分けられている。
spanはインライン要素なので、<span></span>の内側と外側が区別されない。
「おはよう！こんにちは！こんばんは！」という一つの要素の中で、
「こんにちは！」のみ新たな要素が付与されている。
おわりに
少しずつ専門的な内容が表れてきた。
ブロック要素とインライン要素を、目的によって使い分ける必要がありそうだ。
次回 >> ここ