display/表示形式

displayプロパティを使うと本来の表示形式から変える事が出来ます。

説明

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

displayのインライン指定説明

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

displayのブロック指定説明

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

displayのnone説明

構文

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

display: 表示形式;

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

【表示形式の例】
表示形式 説明
inline インラインボックスを作成
block ブロックボックスを作成
none ボックスなし

利用例

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

div {
display: inline;
}

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

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

1行目
2行目

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

 次はblockです。

span {
display: block;
}

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

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

1行目 2行目

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

 次はnoneです。

div {
display: none;
}

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

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

1行目
2行目

 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>

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

1行目
2行目

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

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

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

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

関連ページ

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

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

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

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

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

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

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)