display

要素の表示形式を変更することができます。

ブラウザ

IE5 / IE5.5 / IE6 / N4 / N6 / N7 / O6 / O7 / Fx1 / IE5 mac

書式

要素[.class名][#id名]{ display : 値; }

▲PageTop

指定できる値

値	初期値	意味
none		要素が表示されなくなります。近いプロパティとして、visibilityプロパティがありますが、visibilityプロパティのように本来表示されるべき場所に、相応の空間も空きません。
inline	○	インライン要素のように振舞います。 ※CSS1での初期値はblockでしたが、CSS2でinlineが初期値となりました。
block		ブロック要素のように振舞います。
listitem		<li>要素のように振舞います。
runin		「ランインボックス」のように振舞います。
compact		「コンパクトボックス」のように振舞います。
marker		beforeプロパティもしくはafterプロパティと併用することで、ブロック要素に対してリスト項目の前に付く、1.2.3～などのマーカーをつけることができます。
table		<table>要素のように振舞います。
inline-table		本来、<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		<th>要素もしくは、<td>要素のように振舞います。
table-caption		<caption>要素のように振舞います。
inherit		親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #nomal {
        text-align:center;
        background-color:#98FB98;
      }
      #sample1 {
        display : inline;
        text-align:center;
        background-color:#FFC0CB;
      }
      #sample2 {
        display : block;
        text-align:center;
        background-color:#FFC0CB;
      }
    </style>
  </head>
  <body>
    ■「ブロック要素」を「インライン要素」に変更<br>
    <p id="nomal"><p>要素は、本来、ブロック要素です。(text-alignプロパティでセンター寄せしています。)</p>
    <p id="sample1"><p>要素を「displayプロパティの<var>inline</var>指定」でインライン要素に変更しました。
(text-alignプロパティでセンター寄せしています。)</p>
    <br>
    <br>
    <br>
    ■「インライン要素」を「ブロック要素」に変更<br>
    <span id="nomal"><span>要素は、本来、インライン要素です。(text-alignプロパティでセンター寄せしています。)</span>
    <span id="sample2"><span>要素を「displayプロパティの<var>block</var>指定」でブロック要素に変更しました。
(text-alignプロパティでセンター寄せしています。)</span>
  </body>
</html>

表示結果

■「ブロック要素」を「インライン要素」に変更

<p>要素は、本来、ブロック要素です。(text-alignプロパティでセンター寄せしています。)

<p>要素を「displayプロパティのinline指定」でインライン要素に変更しました。

■「インライン要素」を「ブロック要素」に変更
<span>要素は、本来、インライン要素です。(text-alignプロパティでセンター寄せしています。) <span>要素を「displayプロパティのblock指定」でブロック要素に変更しました。

▲PageTop

display

ブラウザ

書式

指定できる値

サンプル

ソースコード

表示結果

関連項目

HTML

CSS