スタイルシートリファレンス > display

スタイルシートリファレンス display


display ブロック、インラインなど表示形式を指定する (IE5/N4)

ブロック、インラインなど表示形式を指定します。

none
表示しない
block
ブロック要素
inline
インライン要素
list-item
リスト要素
marker
マーカー要素
compact
run-in
table
table-row
table-row-group
table-column
table-column-group
table-header-group
table-footer-group
table-cell
table-caption
inline-table

▲ページ先頭へ

使用例 display

インライン要素の<img>タグをブロック要素にして<h4><div><p>などのブロック要素のタグをインライン要素にします。

HTMLソース

<html>
<head>
<title>CSS テスト</title>
<style type="text/css">
<!--
.smp1 {
display: block;
}
.smp2 {
display: inline;
}
-->
</style>
</head>
<body>
このように<img src="sample.gif">インライン要素は表示されます<br>
<br>
このように<img src="sample.gif" class="smp1">ブロック要素は表示されます<br>
<br>
<h4>このように</h4>
<div>ブロック要素は</div>
<p>表示されます</p>
<br>
<h4 class="smp2">このように</h4>
<div class="smp2">インライン要素は</div>
<p class="smp2">表示されます</p>
</body>
</html>

▲ページ先頭へ

ブラウザ上の表示


このようにインライン要素インライン要素は表示されます

このようにブロック要素ブロック要素は表示されます

このように
ブロック要素は
表示されます

このように
インライン要素は
表示されます


▲ページ先頭へ

関連項目【配置・表示】

display
ブロック、インラインなど表示形式を指定する
position
配置方法を指定する
top
上からの配置位置を指定する
bottom
下からの配置位置を指定する
left
左からの配置位置を指定する
right
右からの配置位置を指定する
float
左または右に寄せて配置する
clear
回り込みを解除する
z-index
重なりの順序を指定する
direction
文字の表示方向を指定する
unicode-bidi
ユニコードの文字表示の方向を指定する
overflow
はみ出た内容の表示方法を指定する
overflow-x
はみ出た内容横方向の表示方法を指定する (IE5)
overflow-y
はみ出た内容縦方向の表示方法を指定する (IE5)
clip
表示する範囲を指定する
visibility
表示するしないを指定する

▲ページ先頭へ

スタイルシートリファレンス > display