[新着] Webテンプレートを仮オープンしました
display は、表示形式を指定するプロパティです。
このスタイルを設定すると、ブロック要素をインライン形式で表示したり、インライン要素をブロック形式で表示することができます。
h1 {
display: inline;
}
| display | block … （ブロック形式で表示します） |
|---|---|
| inline … （インライン形式で表示します） | |
| list-item … （リスト形式で表示します） | |
| none … （表示しません） |
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
h1, span {
background-color: #bde9ba;
}
.example1 { display: inline; }
.example2 { display: block; }
.example3 { display: list-item; margin-left: 1em; }
.example4 { display: none; }
div {
margin-bottom: 30px;
}
-->
</style>
</head>
<body>
<div>
<h1 class="example1">ブロック要素</h1>をインライン形式で表示
</div>
<div>
インライン要素を<span class="example2">ブロック形式</span>で表示
</div>
<div>
<span class="example3">インライン要素を</span><span class="example3">リスト形式で表示</span>
</div>
<div>
文章の一部を<span class="example4">消して</span>みました
</div>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
