★このページでは、CSSの基本的な仕様について解説しています。

動作確認されているのはIE6.0のみですので、それ以外のバージョン、ブラウザでは正しく表示されない場合があります。

　

初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL12. その他の設定　その1 ★ 表示形式を指定する

　

display: <値>;

「Column11.インラインレベル要素とブロックレベル要素」でお話したように、HTMLでは、各要素はそれぞれどちらに属するのかが予め決まっていますが、XML理論を元に再定義されたXHTMLでは、ユーザーが定義しない限り、どちらにも属しません。そこで、それを場合に応じて定義するためのプロパティが「display:」です。また、このプロパティを使って、HTMLで予め定められている性質を変換することが可能な要素もあります。なお、このプロパティでは、要素そのものを非表示にする設定も行えます。

この<値>には、以下の4つが指定可能です。

block ... ブロックレベル要素として扱う

inline ... インラインレベル要素として扱う （デフォルト）

list-item ... リスト用のボックスを生成する

none ... 表示しない

　

では、例をあげて見てみましょう。

<p>はHTMLではブロックレベル要素としての性質を持ちますが、これに「diaplay: inline (list-item);」を設定するとどうなるでしょうか。

body { color: #003366;
background-color: #9b9bff;
font: normal normal bold 10pt/1.2 "ＭＳ Ｐ明朝"; }

p.normal { background-color: #6f6;
width: 200px;
height: 100px; 
margin: 30px;
padding: 10px; }

p.inline { display: inline;
background-color: #f9c;
width: 200px;
height: 100px; 
margin: 30px;
padding: 10px; }

p.listitem { display: list-item;
background-color: #fc0;
width: 300px;
height: 20px; 
margin: 20px;
padding: 10px; }

　

HTML上での記述

<p class="normal">この段落は、ブロックレベル要素のままです。</p>
<p class="normal">この段落は、ブロックレベル要素のままです。</p>
<p class="normal">この段落は、ブロックレベル要素のままです。</p>

<p class="inline">この段落は、インラインレベル要素になっています。</p>
<p class="inline">この段落は、インラインレベル要素になっています。</p>
<p class="inline">この段落は、インラインレベル要素になっています。</p>

<p class="listitem">この段落は、リストアイテムになっています。</p>
<p class="listitem">この段落は、リストアイテムになっています。</p>
<p class="listitem">この段落は、リストアイテムになっています。</p>

　

ex1. 通常、<p>にCSS設定を行うと、ブロックレベル要素として扱われますので、段落ごとに改行されます。

　

ex2. <p>に、「display: inline;」を指定して、インラインレベル要素として扱うようにした場合は、各段落に改行は入らず、横一列に並びます。

　

ex3.<p>に、「display: list-item;」を指定すると、行頭にリストマークが入り、段落ごとに改行されます。なお、リストマークを指定するプロパティを加えることにより、行頭のマークを変更することも可能です。（cf.Vol 11. リストマークに関する設定 その1、2、3、4）

　

設定がどのように反映されるかは、要素によって異なりますので、注意が必要です。なお、「display: none;」に指定した場合は、要素そのものが存在しないものとして扱われますので、レイアウトにも影響を与えません。

　

初級篇2.VOL11. リストマークに関する設定・その4 <<

>> 初級篇2.VOL12. その他の設定・その2

　

2007.2.25.