1.要素の表示形式を指定する「display」
CSSには要素の表示形式を指定する「display」というプロパティがあります。指定できる値は以下のようなものです。
- inline
- block
- inline-block
- none
displayはブロックレベル要素をインライン要素の表示形式に切り替えたり、様々な要素を特殊な表示形式に切り替えることができます。
例えばh1・h2・h3タグを普通に記述すると以下のようになります。
サンプルHTML：
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
※わかりやすいように背景色をつけました
hタグはブロックレベル要素ですので、縦に重なっていきます。
ではhタグをdisplayの値をinlineにして、インライン要素の表示にしてみましょう。
サンプルCSS：
h1,h2,h3{ display: inline; }
hタグがインライン要素の表示形式になったので、横に並びました。またこの状態だと縦横サイズの指定はできません。
逆にインライン要素をブロックレベル要素の見た目にする際には、値を「block」で指定しましょう。
2.インラインブロックという表示形式について
displayの値をinline-blockという値にすると、表示形式を「インラインブロック」にすることができます。
インラインブロックはインライン要素のように要素を横並びにしながら、縦横のサイズが指定できる表示形式です。
hタグに対してインラインブロックを適用して、サイズを指定してみます。フォントサイズは16pxに揃えました。
サンプルCSS：
h1,h2,h3{
display: inline-block;
width: 120px;
height: 50px;
font-size : 16px;
}
プレビュー：
120×50pxのサイズで横並びにできました。隙間が少し空いています。
HTMLを以下のようにすると、この隙間を詰めることができます。
サンプルHTML：
<h1>見出し1</h1><h2>見出し2</h2><h3>見出し3</h3>
プレビュー：
3.要素を非表示にする「display : none」
displayで要素を非表示にすることもできます。非表示にする際の値は「none」です。
サンプルCSS：
h1,h2,h3{
display: none;
}
この値にすると該当の要素は見えなくなります。
ボタンをクリックすると表示・非表示が切り替わるメニューなどを実装したいときに利用する値です。
