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

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

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

displayプロパティを使うと本来の表示形式から変える事が出来ます。
例えば、<div>タグはブロックボックスを作成しますが、displayプロパティにより<span>のようなインラインボックスを作成するように出来ます。
逆に、<span>タグはインラインボックスを作成しますが、displayプロパティにより<div>のようなブロックボックスを作成するように出来ます。
ボックス自体を表示しない事も可能です。
displayプロパティの構文は以下の通りです。
display: 表示形式;
表示形式の例は以下です。
表示形式 | 説明 |
---|---|
inline | インラインボックスを作成 |
block | ブロックボックスを作成 |
none | ボックスなし |
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行目が表示されません。
以下は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プロパティ一覧」に戻る
★上ページに含まれるプロパティ