CSSのdisplayプロパティで、要素(ボックス)の表示方法を指定するサンプルです。
確認環境 ・Google Chrome |
目次
仕様 | displayプロパティの仕様 |
サンプル | 横に並べる(inline) |
縦に並べる(block) | |
横に並べる+幅と高さを指定(inline-block) | |
リストの見た目(list-item) |
displayプロパティの仕様
display : 値 |
displayプロパティは、要素(ボックス)の表示方法を指定します。
値 | 説明 |
---|---|
none | 要素(ボックス)を非表示にします。存在しないような見え方になります。 |
inline | インライン要素ボックスを生成します。 前後に改行は入らないので横に並びます。(初期値) 注意点としては、widthプロパティとheightプロパティで幅と高さを指定できません。 |
block | ブロック要素ボックスを生成します。 前後に改行が入るのでボックスは、縦に並びます。 widthプロパティとheightプロパティで幅と高さを指定できます。 |
inline-block | 上記のinlineとblockがひとつになっています。 ブロック要素ボックスを生成しますが、前後に改行しないのでinlineと同じように横に並びます。 またinlineと違って、widthプロパティとheightプロパティで幅と高さを指定できます。 |
list-item | リストの見た目になります。 |
値を継承しない |
- displayのflexを指定する場合は以下を参照願います。
CSS displayのflexで要素を横に並べるサンプル - 以下はMDNのdisplayプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/display
横に並べる(inline)
<style>
#box2 div{
display:inline;
height: 50px;
background-color: #F5DEB3;
}
</style>
<div id="box2">
<div>inline1</div>
<div>inline2</div>
<div>inline3</div>
</div>
3行目はdisplayにinlineを指定しています。
9,10,11行目のdivはブロック要素のタグですがdisplay:inlineでインライン要素扱いになります。
そのため横に並び4行目のheightは効きません。
以下は実行結果のイメージです。
縦に並べる(block)
<style>
#box3 span{
display:block;
height: 50px;
background-color: #ADD8E6;
}
span {width:200px;margin-bottom:10px;}
</style>
<div id="box3">
<span>block1</span>
<span>block2</span>
<span>block3</span>
</div>
3行目はdisplayにblockを指定しています。
10,11,12行目のspanはインライン要素のタグですがdisplay:blockでブロック要素扱いになります。
そのため縦に並び4行目のheightが反映されます。
以下は実行結果のイメージです。
横に並べる+幅と高さを指定(inline-block)
<style>
#box4 div{
display:inline-block;
height: 50px;
background-color: #F5DEB3;
}
</style>
<div id="box4">
<div>inline-block1</div>
<div>inline-block2</div>
<div>inline-block3</div>
</div>
3行目はdisplayにinline-blockを指定しています。
inlineのように横に並んで表示され、かつwidthとheightの指定が効きます。
以下は実行結果のイメージです。
リストの見た目(list-item)
<style>
#box5 p span {
display:list-item;
margin-left:15px;
}
</style>
<div id="box5">
<p>リスト化
<span>abc</span>
<span>abc</span>
<span>abc</span>
</p>
</div>
list-itemは、マーカー用のボックスが表示されます。margin-leftで表示を調整します。
以下は、実行結果です。
関連の記事
CSS padding 要素の内側の余白を指定する
CSS margin 要素の外側の余白を指定する
CSS width 幅を指定するサンプル
CSS 回り込みと解除のサンプル(floatとclear)
CSS z-index 要素の重なる順番を指定する