【CSS】要素の表示形式を指定する「display」プロパティ

要素の表示形式を指定するプロパティで、ブロックレベル要素をインラインで表示したり、インライン要素をブロックレベルとして使用できます。

display属性

display: inline	ブロックレベルボックスを表示します。(初期値)
display: block	ブロックレベルボックスを表示します。
display: inline-block	全体的にインライン要素のような表示形式だが、内部は前後で改行されないブロックレベルボックスを表示します。インライン要素と違って高さ・横幅などを指定できます。

display: inline

ブロックレベル要素をインライン要素に変換します。ブロックレベル要素の <li>などをインライン要素の属性として展開させます。

<!doctype html>
 <head>
 　<title>CSS | display: inline</title>
 　　<style>
　　　#display-inline ul{
　　　　margin: 0;
　　　　padding: 0;
　　　　text-align: center;
　　　　list-style-type: none;
　　　}

　　　#display-inline ul li { 
　　　　display: inline; 
　　　}

　　　#display-inline ul li a {
　　　　text-decoration: none;
　　　　color: #fff;
　　　　border: 1px solid #646459; 
　　　　background-color: #fb7600;
　　　　padding: 0.5em;
　　　}

　　　#display-inline ul li a:hover{
　　　　color: #fff;
　　　　background-color: #369;
　　　}
 　　</style>     
 　</head>
 <body>
 　<div id="display-inline">
　　<ul>
　　　<li><a href="#">fx_INT</al></li>
　　　<li><a href="#">fx_EXACT</al></li>
　　　<li><a href="#">fx_MARCH</al></li>
　　　<li><a href="#">fx_VLOOKUP</al></li>
　　　<li><a href="#">fx_COUNT</al></li>
　　</ul> 
　</div> 
 </body> 
</html>

結果、下記のようにメニューが縦並びではなく、横に並んできました。

display: block

逆に、インライン要素をブロックレベル要素に変換します。 <a>のようなインライン要素がブロックレベル要素の属性として展開します。上記の「display: inline」のCSSにて、ハイパーリンクタグ<a>にて「display: block」を指定することで、メニューを縦並びの表示が可能になります。

<!doctype html>
 <head>
 　<title>CSS | display: block</title>
 　　<style>
　　　#display-block ul{
　　　　margin: 0;
　　　　padding: 0;
　　　　text-align: center;
　　　　list-style-type: none;
　　　}

　　　#display-block ul li { 
　　　　display: inline; 
　　　}

　　　#display-block ul li a {
　　　　display: block; 
　　　　text-decoration: none;
　　　　color: #fff;
　　　　border: 1px solid #646459; 
　　　　background-color: #fb7600;
　　　　padding: 0.5em;
　　　　width:150px;
　　　　margin-bottom:5px;
　　　}

　　　#display-block ul li a:hover{
　　　　color: #fff;
　　　　background-color: #369;
　　　}
 　　</style>     
 　</head>
 <body>
 　<div id="display-block">
　　<ul>
　　　<li><a href="#">fx_INT</al></li>
　　　<li><a href="#">fx_EXACT</al></li>
　　　<li><a href="#">fx_MARCH</al></li>
　　　<li><a href="#">fx_VLOOKUP</al></li>
　　　<li><a href="#">fx_COUNT</al></li>
　　</ul> 
　</div> 
 </body> 
</html>

結果、下記のようにメニューが縦並びに表示されました。

display: inline-block

インライン要素の表示形式で、ブロックレベル要素の属性設定が可能になります。 <a>のようなインライン要素がブロックレベル要素の属性として展開します。

<!doctype html>
 <head>
 　<title>CSS | display: inline_block</title>
 　　<style>
　　　#display-inblock ul{
　　　　margin: 0;
　　　　padding: 0;
　　　　text-align: center;
　　　　list-style-type: none;
　　　}

　　　#display-inblock ul li { 
　　　　display: inline-block; 
}

　　　#display-inblock ul li a{
　　　font-size:13px;
　　　color: #fff;
　　　text-decoration: none;
　　　border: 1px solid #646459; 
　　　background-color: #fb7600;
　　　padding: 0.5em;
}

　　　#display-inblock ul li a:hover{
　　　　color: #fff;
　　　　background-color: #369;
　　　}
 　　</style>     
 　</head>
 <body>
 　<div id="display-inblock">
　　<ul>
　　　<li><a href="#">fx_INT</al></li>
　　　<li><a href="#">fx_EXACT</al></li>
　　　<li><a href="#">fx_MARCH</al></li>
　　　<li><a href="#"l>fx_VLOOKUP</al></li>
　　　<li><a href="#"l>fx_COUNT</al></li>
　　</ul> 
　</div> 
 </body> 
</html>

結果、「display: inline」と同様、メニューが縦並びに表示されました。

しかし、これじゃ「inline-block」値を使う意味がないと思う方もいると思いますが、大きな違いは、「inline」では横幅や高さの指定が無効になりますが、「inline-block」値はその指定が可能です。