display/表示形式

説明

　例えば、<div>タグはブロックボックスを作成しますが、displayプロパティにより<span>のようなインラインボックスを作成するように出来ます。

　逆に、<span>タグはインラインボックスを作成しますが、displayプロパティにより<div>のようなブロックボックスを作成するように出来ます。

　ボックス自体を表示しない事も可能です。

構文

　displayプロパティの構文は以下の通りです。

display: 表示形式;

　表示形式の例は以下です。

利用例

　displayの利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

div {
display: inline;
}

<div>1行目</div>
<div>2行目</div>

　上記を表示すると以下になります。

　本来、<div>はブロックボックスを形成するため改行されて表示されますが、displayでinlineを指定すると改行せずに表示されます。

　次はblockです。

span {
display: block;
}

<span>1行目</span>
<span>2行目</span>

　上記を表示すると以下になります。

　<span>はインラインボックスを形成するため改行されませんが、displayでblockを指定すると改行して表示されます。

　次はnoneです。

div {
display: none;
}

<div>1行目</div>
<span>2行目</span>

　上記を表示すると以下になります。

　display:none;を指定した1行目が表示されません。

javaScriptを利用した隠し画像の表示

　以下はdisplayをnoneにしている画像を表示させたり、再度非表示にするボタンです。

　表示ボタンをクリックすると画像が表示され、非表示ボタンをクリックすると再度非表示になります。

　これは以下のJavaScriptでdisplay:none;とデフォルト状態を切り替えています。

<script language="JavaScript">
<!--
function a(){
document.getElementById('t').style.display= "";
}

function b(){
document.getElementById('t').style.display= "none";
}
// -->
</script>

　又、ボタンは以下のように作り、画像には最初、display:none;を指定しています。

<form>
<input type="button" value="表示" onclick="a()">
<input type="button" value="非表示" onclick="b()">
</form>
<img src="test.png" alt="" id="t" style="display:none;" />

　表示ボタンがクリックされるとa関数が実行され、idがtで指定している画像がdisplayを指定していない状態となり、表示されます。

　非表示ボタンがクリックされるとb関数が実行され、idがtで指定している画像がdisplay:none;となり、消えます。

　尚、表示がズレないように最初から高さを指定している等、若干スタイルは変更しています。

補足

　display:none;と似た設定でvisibility:hidden;があります。利用例は以下です。

div {
visibility:hidden;
}

<div>1行目</div>
<span>2行目</span>

　上記を表示すると以下になります。

　display:none;と同様に1行目が表示されていませんが、空白になっています。

　このように、display:none;は空間もなくなりますが、visibility:hidden;では空間は残るという違いがあります。

　JavaScript等で文字の表示、非表示を切り替えたりする時、display:none;は空間自体をなくす事が出来ますが、それ以降の表示は上にズレます。

　visibility:hidden;では空間が残ってしまいますが、それ以降の表示はズレません。

関連ページ

・ホームページ作成「タグと改行の関係」

　インラインボックスとブロックボックスの違いを説明し、各タグがどちらを形成するか説明しています。

・ホームページ作成「スタイルシートの定義方法」

　外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る