はじめに
HTML＆CSS入門講座の第五弾として、【CSS】 displayプロパティの使い方、block、inline、inline-block、noneついて紹介します。
この記事を読むと次の疑問について知ることができます。
●CSSのdisplayプロパティとはどのようなもの？
●CSSのdisplayプロパティーの種類はどのようなものがあるの？
・dsplay：blockとは？
・dsplay：inlineとは？
・display: inline-blockとは？
・display: noneとは？
●CSSのdisplayプロパティーの種類はどのようなものがあるの？
・dsplay：blockとは？
・dsplay：inlineとは？
・display: inline-blockとは？
・display: noneとは？
HTML＆CSS入門講座（４）では、「CSSの初心者入門、基本的な書き方、セレクタ、プロパティ、値」などについて解説してきました。
CSSの中のdisplayプロパティーについて、深堀していきます。
CSSのdisplayプロパティとは？
CSSのdisplayとは、HTMLの要素などをどのように表示するか（表示方法）を設定するプロパティです。
ここで、displayを解説するために、要素の構成がどのようになっているかを下図に載せます。
上図の要素をどのように配置して表示するのか、ボーダーエリアや余白（パディングエリア、マージンエリア）をどのようにするかなどの表示方法を設定するのがdisplayプロパティになります。
例えば、disply:noneとすれば、要素が全て非表示となりますし、display：contents（ここでは省略）とすれば、要素の中身のみが表示され、他は表示されなくなる設定となります。
CSSのdisplayプロパティーの種類
CSSのdisplayの種類は、色々ありますがここでは主要なプロパティを表に載せておきます。
| 主要なdisplayの種類 | 意 味 |
| block | 要素をブロック化する |
| inline | 要素をインライン化する |
| inline-block | inlineとblockの中間的な働きをする。（blockとinlineの良い所取りをする。） |
| none | 要素を非表示にする。 |
| flex | blockレベルで、柔軟なブロックを作成する。 |
| contents | 要素の中身のみを残し、他の周囲の余白、ボーダーエイリアなどをなくす。 |
| table |
表形式の要素を形成する。 |
この記事では、この表のblock、inline、inline-block、noneの４つについて解説していきます。
flexについては、別にこの項目のみを取り上げた記事を書く予定でおります。
dsplay：blockとは？
displayのblockプロパティの特徴などを次の載せます。
- 代表的なblockプロパティを持つ初期値のHTML要素として、
div、h1〜h6、p、ul,ol,li、dl,dt,dd、table、form、hr、pre、blockquote
などがあります。 - HTMLの要素（ブロック）ごとに改行が入り、ブロックが縦に並ぶ。
- ブロックの幅と高さの設定が可能
- 上下左右の余白であるmargin、paddingを自由に設定が可能
- text-align、vertical-alignの設定が不可
ここで、ブロック(hタグ）を３つ作り、それがどのようになるかを見てみましょう。
<h1 class="block1"> 一番大きい見出しです。</h1>
<h2 class="block2"> 二番目に大きい見出しです。</h2>
<h3 class="block3"> 三番目に大きい見出しです。</h3>
.block1 {background: red;}
.block2 {background: orange;}
.block3 {background: green;} 結果は次の通り。
3つの要素（ブロック）が縦に並び、要素ごとに改行が入っていることが分かります。
次に、幅（width）と高さ（height）を「block1」に設定してみましょう。
<h1 class="block1"> 一番大きい見出しです。</h1>
<h2 class="block2"> 二番目に大きい見出しです。</h2>
<h3 class="block3"> 三番目に大きい見出しです。</h3>
.block1 {background: red; width: 200px; height: 200px;}
.block2 {background: orange;}
.block3 {background: green;}
結果は、次の通り。
次に、余白を設定してみましょう。
<h1 class="block1"> 一番大きい見出しです。</h1>
<h2 class="block2"> 二番目に大きい見出しです。</h2>
<h3 class="block3"> 三番目に大きい見出しです。</h3>
.block1 {background: red; padding: 20px; margin: 20px;}
.block2 {background: orange;}
.block3 {background: green;}結果は次の通り。
text-align（文字に中央寄せや右寄せ）、vertical-align（垂直方向上、中央、下寄せ）については、ここでは示しませんが、displayのblockでは設定できないことを実際にやってみてください。
dsplay：inlineとは？
displayのinlineプロパティの特徴などを次の載せます。
- 代表的なinlineプロパティを持つ初期値のHTML要素として、
a、span、b、img、label、input、select、textarea
などがあります。 - HTMLの要素（ブロック）が横に並ぶ。
- ブロックの幅と高さの設定が不可（文字の長さや大きさで決まる）
- 左右の余白であるmargin、paddingを設定が可能であるが、上下のmarginは設定できず、上下のpaddingを設定すると前後の行と重なってしまう場合があります。
- text-align、vertical-alignの設定が可能
ここで、ulの箇条書きタグを作り、その背景に黄色に指定した場合、どのようになるかを見てみましょう。
<div class="textalign">
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
</div>li {display: inline; background: yellow;
箇条書きは、通常縦に並びますが、display: inlineを設定してやると、横並びとなります。
この横並びとなった箇条書きに赤の実線(2px)で囲い、margin、paddingを10pxに設定し、箇条書きを中央寄せしたCSSとその結果を次に載せます。
<div class="inline-block">
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
</div>
.textalign {
text-align: center;
}
li {
display: inline;
background: yellow;
border: 2px solid red;
padding: 10px;
margin: 10px;
}結果は次の通り。
display: inline-blockとは？
displayのinline-blockプロパティの特徴などを次の載せます。
- HTMLの要素（ブロック）が横に並ぶ。
- ブロックの幅と高さの設定が可能
- 上下左右の余白であるmargin、paddingを自由に設定が可能
- text-align、vertical-alignの設定が可能
ここで、前述のinline指定した要素に対して、幅（width）100xpx、 padding、 marginなどの余白10px、垂直方向の配置vertical-align：middle、背景background：gray、 font-weight：bold（太字）、文字色color:white（白）に設定した場合のHTMLとCSS、その表示結果を以下に載せます。
<div class="inline-block">
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
</div>
.inline-block {text-align: center;}
.inline-block ul li {
display: inline-block;/*inline-blockに設定*/
width: 150px;/*幅を100pxに指定*/
padding: 10px 0;/*余白も10pxに指定*/
margin: 10px 0;/*余白10pxに指定*/
vertical-align: middle;/*縦の表示位置を中心*/
background: gray;/*背景を灰色*/
border: 3px solid navy;/*濃い青色の線で囲う*/
font-weight: bold;/*文字を太字*/
color: white; ;/*文字色を白色*/
}結果は次の通り。
display: noneとは？
HTML要素に対してdisplay： noneを設定してやると、その部分を見えなくすることができます。
本日、実習してきた中で「2番目の見出し」と「display: inline」の部分を非表示にします。
<h1 class="block1"> 一番大きい見出しです。</h1>
<h2 class="block2"> 二番目に大きい見出しです。</h2>
<h3 class="block3"> 三番目に大きい見出しです。</h3>
<div class="textalign">
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
</div>
<div class="inline-block">
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
</div>
/* display blockの説明 */
/*.block1 {background: red; width: 200px; height: 200px;}*/
.block1 {background: red; padding: 20px; margin: 20px;}
.block2 {display: none; background: orange;}
.block3 {background: green;}
/*li {background: yellow;}*/
.textalign {display: none; text-align: center;}
li {display: inline; background: yellow; border: 2px solid red; padding: 10px; margin: 10px;}
.inline-block {text-align: center;}
.inline-block ul li {
display: inline-block;/*inline-blockに設定*/
width: 150px;/*幅を100pxに指定*/
padding: 10px 0;/*余白も10pxに指定*/
margin: 10px 0;/*余白10pxに指定*/
vertical-align: middle;/*縦の表示位置を中心*/
background: gray;/*背景を水色*/
border: 3px solid navy;/*濃い青色の線で囲う*/
font-weight: bold;/*文字を太字*/
color: white; ;/*文字色を白色*/
}
結果は次の通り。
おわりに
如何だったでしょうか？
CSSのdisplayプロパティとはどのようなもの？、CSSのdisplayプロパティーの種類はどのようなものがあるの？、dsplay：blockとは？、dsplay：inlineとは？、display: inline-blockとは？、display: noneとは？などについて解説してきました。
この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。
以上です。
コメント