displayプロパティは、ブロックレベル・インライン・テーブル・ルビ・フレックスコンテナ等の、要素の表示形式を指定する際に使用します。
ブロック要素とは、見出し、段落、リスト、フォームなどのひとつのまとまった単位として表される要素で、一般的なブラウザでは前後に改行が入って表示されます。
インライン要素とは、主に文章の一部として利用される要素でその前後は改行されません。
例えば、インライン要素の<A>要素や<IMG>要素などに
display:block
を指定すると、ブロックレベル表示となって前後が改行されて表示されるようになります。
.sample1 {display:block; background-color:yellow;}
.sample2 {display:inline; background-color:yellow;}
<html>
<head>
<link rel=”stylesheet” href=”sample.css”
type=”text/css”>
</head>
<body>
<div>インライン→ブロックレベルの例</div>
<p>a要素にdisplay:block;を指定して、<a class=”sample1″ href=”https://htmqcom1.wpengine.com/”>リンク</a>をブロックレベル表示にします。</p>
<div>ブロックレベル→インラインの例</div>
<p>h3要素にdisplay:inline;を指定して、<h3 class=”sample2″>見出し</h3>をインライン表示にします。</p>
</body>
</html>
a要素にdisplay:block;を指定して、リンクをブロックレベル表示にします。
h3要素にdisplay:inline;を指定して、
をインライン表示にします。
フレックスコンテナとは、CSS3から追加された表示形式です。
flexを直訳すると、融通のきく・適応性のあるといった意味ですが、
フレックスコンテナでは段組みレイアウトなどを比較的簡単に実現することができます。
ul.sample3 {
display:-webkit-flex;
display:flex;
width:100%;
list-style-type:none;
margin:0; padding:0;
}
ul.sample3 li {
width:25%;
}
ul.sample3 a {
display:block;
margin:2px; padding:10px; font-size:10px;
background-color:#66cc99; color:#ffffff;
text-align:center;
text-decoration:none;
}
<ul class=”sample3″>
<li><a href=”#”>メニュー1</a></li>
<li><a href=”#”>メニュー2</a></li>
<li><a href=”#”>メニュー3</a></li>
<li><a href=”#”>メニュー4</a></li>
</ul>
尚、フレックスコンテナでは、ブロックレイアウトの前提で設計されたCSSプロパティの一部は適用されません。
例えば、vertical-alignプロパティや、
:: first-line擬似要素、
および、:: first-letter擬似要素などの指定は無効となります。
フレックスコンテナについては、CSS3リファレンスのフレキシブルボックスで関連するCSSプロパティを紹介しています。
また、ウェブ制作小ネタTIPSのCSSのFlexboxでレイアウトを作るでは、フレックスコンテナを使用したレイアウト作成例を紹介しています。
