[XHTML] ブロックレベル要素とインライン要素の違いについて

YMD96_bakansuokinawa20120729

HTMLの<Body>の中で使われる要素は大きく「ブロックレベル要素」と「インライン要素」の2つに分類することができます。

いきなり要素とかブロックレベルとかインラインとかいう言葉が出てきてもよくわかりませんよね?

ここでいう要素っていうのは<div> <a> <span> <img> <li> などの「HTMLタグ」になり、それらがブロックレベル要素とインライン要素に分類されるます。

簡単にいうとHTMLタグはブロック要素とインライン要素の2つのグループに分かれているよ!ってことです。

ブロックレベル要素とインライン要素にはそれぞれ特徴があり、スタイルシートでプロパティを設定するときに、効果が反映されるものとされないものがあります。

ブロックレベル要素・インライン要素のどちらかを知っておかないと、設定したはずの効果が反映されない!というトラブルに見舞われたりするのでしっかり覚えましょう。

ブロックレベル要素 Block-Level Elements

横幅100%で前後に改行が入る要素をブロック要素といい、ブラウザでは一つのかたまりとして扱われます。

ブロック要素は見出しや段落など、文章を構成する基本となる要素ということができ、ブロックレベルの中にはさらに別のブロックレベル要素やインライン要素を入れることができます。(p要素 hr要素タイプ など中にインライン要素しか入れられないものなどが存在します)

<ブロックレベル要素の一覧

要素名用途・目的
div区分された特定の範囲
p段落しての文章
pre整形を反映されたテキスト表示
blockquote引用
h1~h6見出しレベル
hr水平線
fieldset送信フォーム部品のグループ
form送信フォーム部品全部
noframesフレーム表示以外のコメント
tableテーブル
ul番号なしリスト
ol番号付きリスト
dl用語・説明
addressアドレス
center中央揃え

インライン要素 Inline Elements

横幅は要素分で前後に改行が入らない要素をインライン要素といい、文章などの一部として扱われます。

インライン要素は、ブロックレベル要素の中で文字列、文字の装飾、ハイパーリンクなどに使われることが多く、その中身に文字列・インライン要素を含むことができまが、ブロックレベル要素を含むことができません。

インライン要素の一覧

要素名用途・目的
aリンク
b太字
br改行
cite出典・参照先
codeソースコード
em強調
img画像
input送信フォームの入力部品
labelフォーム部品としてのラベル
span特定範囲
small小さめの文字
textarea複数行のテキスト入力フィールド
strong強調
selectプルダウンメニュー
  • Categories

  • タグ

  • アーカイブ

  • 最近の投稿