ブロックレベル要素とインライン要素

Pocket

★ブロックレベル要素
ブロックレベル要素は見出し、段落など文書を構成する基本要素。
CSSで何も指定しない場合は、ブラウザの横幅いっぱいに広がり幅と高さがある。
(要素の前後には自動的に改行)

例)h要素(見出し)、p要素(段落)、ul要素(リスト)

★インライン要素
文章中の一部として扱われる要素。幅と高さを持たない。
行の一部として扱われるので、要素の前後に改行は入らない。
必ずブロックレベル要素に含まれる形式で記述されなければならない。
※bodyタグに直にインライン要素を記述することは不可

例)a要素(リンク)、strong要素(語句の強調)、img要素(画像)
※img要素もp要素でマークアップする

★要素の基本ルール

1. ブロックレベル要素の中に、別のブロックレベル要素やインライン要素を含めることは可

 <div><p>内容</p></div>
<div><img src="nantoka.png"></div>

2. インライン要素の中に、別のインライン要素を含めることは可

<span>内容<img src="nantoka.png"></span>

3. インライン要素の中に、ブロックレベル要素を含めることは不可

<a href=""><h1>見出し</h1></a>

h1,h2などの見出しにリンクを張る場合

<h1><a href="">見出し</a></h1>

Pocket

This entry was posted in CSS, web.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>