display リファレンス
display 説明
displayプロパティは、ブロックレベル要素（Block-Level Elements）、インライン要素（Inline Elements）等、要素の表示形式を指定する際に使用します
ブロック要素とは、見出し、段落、リスト、フォームなどのひとつのまとまった単位として表される要素で 一般的なブラウザでは、前後で改行表示されます
インライン要素とは、主に文章の一部として利用される要素でその前後は改行されません
例えば、インライン要素の<IMG>に display:block を指定すると、ブロックレベル表示となって前後が改行されて表示されるようになります
display 書式
| <p style="display: inline"></p> |
display パラメータ
| 値 |
意味 |
| inline |
インラインボックスを生成する（初期値） |
| block |
ブロックボックスを生成する |
| inline-block |
インラインレベルのブロックコンテナを生成する。要素全体としてはインライン要素のような表示形式だが、内部はブロックボックスで、通常インライン要素では指定できない、高さ（height）、幅（width）などを指定できる |
| list-item |
li 要素のようにリスト内容が収められるブロックボックスと、リストマーカーのためのマーカーボックスを生成する |
| run-in |
文脈に応じてブロックまたはインラインボックスのいずれかを作成する |
| table |
table 要素のような表示となる |
| inline-table |
インラインレベルのテーブルとなる |
| table-row-group |
tbody 要素のような表示となる |
| table-header-group |
thead 要素のような表示となる |
| table-footer-group |
tfoot 要素のような表示となる |
| table-row |
tr 要素のような表示となる |
| table-column-group |
colgroup 要素のような表示となる |
| table-column |
col 要素のような表示となる |
| table-cell |
td 要素のような表示となる |
| table-caption |
caption 要素のような表示となる |
| none |
要素が表示されず、レイアウトに影響を与えない |
| inherit |
親要素の値を継承する |
ブロックレベル要素 （Block-Level Elements） と インライン要素 （Inline Elements）
HTMLで定義されている要素のうち、<body>～</body>の中で使用される要素の多くは、 ブロックレベル要素（Block-Level
Elements）か、インライン要素（Inline Elements）に分類され、それぞれの要素の中に配置できる要素が決まってきます
ブロックレベル要素 （Block-Level Elements）
ブロックレベル要素は、見出し、段落、表など、文書を構成する基本となる要素で、一つのブロック（固まり）として認識されます ブラウザでの表示も一つの固まりとして扱われることが多く、一般的なブラウザでは前後に改行が入ります
ブロックレベル
要素タグ |
<address> |
<blockquote> |
<center> |
<div> |
<dl> |
| <fieldset> |
<form> |
<h1>-<h6> |
<hr> |
<noframes> |
| <noscript> |
<ol> |
<p> |
<pre> |
<table> |
| <ul> |
|
|
|
|
インライン要素 （Inline Elements）
インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます
例えば、<p>要素の中の<strong>要素のように、段落のなかの一部を強調するような使われ方をする要素です
一般的なブラウザでは前後に改行が入らず、文章の一部として表示されます
インライン
要素タグ |
<a> |
<abbr> |
<acronym> |
<b> |
<basefont> |
<bdo> |
| <big> |
<br> |
<cite> |
<code> |
<dfn> |
<em> |
| <font> |
<i> |
<img> |
<input> |
<kbd> |
<label> |
| <q> |
<s> |
<samp> |
<select> |
<small> |
<span> |
| <strike> |
<strong> |
<sub> |
<sup> |
<textarea> |
<tt> |
| <u> |
<var> |
|
|
|
|
配置ルール
ブロックレベル要素の中には、他のブロックレベル要素やインライン要素を配置できます
インライン要素の中には、文字データや他のインライン要素を配置することができますが、 ブロックレベル要素は配置できません |
|