プラカンブログSTAFF BLOG

2018.06.14

【CSS】そろそろ使いこなしたい…! displayプロパティについて整理してみた。

こんにちは、なかいです。
今回は、CSSでレイアウトする時大変よく(というか必ずといっていいほど)使用する
displayプロパティについてまとめてみたいと思います。

もくじ

  1. ブロックレベルとインライン
  2. よく使う値と使用例
  3. まとめ

1.ブロックレベルとインライン

そもそもdisplayプロパティはどのように使うものなのでしょうか。
ずばり、そのボックスの性質を変えちゃうということです。

上図のように通常h1タグやpタグはブラウザで表示した時
CSSで指定しない限り、幅いっぱいに広がり、何もしてなくても自動的に改行して表示されます。
これは、h1タグやpタグが「ブロックレベル」という性質を持っているからです。

その性質をdisplayプロパティを使って変える事ができます。

h1タグ、pタグにそれぞれdisplay :inlineを指定すると
このように横に並ぶようになりました。

displayプロパティの基本的な使い方は、
このようにブロックレベル→インライン
またはインライン→ブロックレベル
のようにボックスの性質を変化させる時に使います。

※もっともHTML5からはタグの「ブロックレベル」「インライン」という
考え方はしなくなりましたが、CSSに関してはレイアウトの点で
「ブロック扱い」「インライン扱い」という概念はこれまで通りなのです。

2.よく使う値と使用例

さて、displayプロパティは具体的にどのような場面で使用するのでしょうか。具体的に紹介します。

block

blockはボタンなどをulタグ、liタグを使ってコーディングする際、
指定することでwidthを指定したり、ボタンのどこをホバーしてもクリックできるようになります。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<style type="text/css">
ul li {
    list-style-type: none;
    margin-bottom: 10px;
}
ul li a{
    display: block;
    padding: 10px;
    width: 180px;
    background: red;
    color: #FFFFFF;
    text-align: center;
}
</style>
</head>
<body>
    <ul>
        <li><a href="https://www.google.co.jp/" target="_blank">ボタン1</a></li>
        <li><a href="https://www.google.co.jp/" target="_blank">ボタン2</a></li>
        <li><a href="https://www.google.co.jp/" target="_blank">ボタン3</a></li>    
    </ul>
</body>
</html>

inline

inlineはパンくずなど作る際に便利です。
もちろんフロートでも出来るのですが、こちらのやり方ほうが個人的には好きです。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<style type="text/css">
ul li{
    display: inline;
    list-style-type: none;
}
ul li:last-of-type{
    font-weight: bold;
}
ul li a{
    margin-right: 10px;
}
</style>
</head>
<body>
<ul>
    <li><a href="#">トップ</a>></li>
    <li><a href="#">会社情報</a>></li>
    <li>社長メッセージ</li>
</ul>
</body>
</html>

inline-block

inline-blockはinlineと違い、幅や高さの設定ができます。
inline的ではあるのですがblockな要素を持っているというハイブリッドで
便利な値です。

具体的にいうとボックスやボタンを横並びにしたい時に使います。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<style type="text/css">
div {
    display: inline-block;
    margin-right: 20px;
    color: #FFFFFF;
}
.box_01{
    background: #2EBF11;
    width: 200px;
    height: 50px;
}
.box_02{
    background: #11B9BF;
    width: 200px;
    height: 100px;
}
.box_03{
    background: #BF3911;
    width: 200px;
    height: 150px;
}
</style>
</head>
<body>
    <div class="box_01">ボックス1</div>
    <div class="box_02">ボックス2</div>
    <div class="box_03">ボックス3</div>
</body>
</html>

none

これを設定するとブラウザで非表示になります。
そんな必要があるの?
と思いきや主にレスポンシブにする時にバリバリ使います。
大活躍です。

ここでは2個目と4個目のpタグを消してみます。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<style type="text/css">
p{
    background: #11B9BF;
}
p:nth-of-type(even){
    background: #BF3911;
    display: none;
}
</style>
</head>
<body>
    <p>ここに文章が入ります。ここに文章が入ります。</p>
    <p>ここはdicplay: none;で消します。</p>
    <p>ここに文章が入ります。ここに文章が入ります。</p>
    <p>ここはdicplay: none;で消します。</p>    
</body>
</html>

table、table-cell

これらは、セットで使用します。
親要素にdisplay: tableを子要素にdisplay: table-cellを指定することで
テーブルタグを使用せずにテーブルのように
横並びにレイアウトすることができます。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
body{
    padding: 20px;
}
dl{
    display: table;
    margin-bottom: 1px;
}
dt{
    display: table-cell;
    width: 100px;
    background: #2EBF11;
    vertical-align: middle;
    text-align: center;
    color: #FFFFFF;
    
}
dd{
    display: table-cell;
}
.category_01{
    width: 400px;
    background: #11B9BF;
    vertical-align: middle;
    padding: 10px;
}
.category_02{
    width: 200px;
    background: #BF3911;
    vertical-align: middle;
    padding: 10px;

}
</style>
</head>
<body>
    <dl>
        <dt>なんとか</dt>
        <dd class="category_01">文章の長さが変わっても高さを揃えられます。</dd>
        <dd class="category_02">文章の長さが変わっても高さを揃えられます。文章の長さが変わっても高さを揃えられます。</dd>
    </dl>
    <dl>
        <dt>かんとか</dt>
        <dd class="category_01">文章の長さが変わっても高さを揃えられます。文章の長さが変わっても高さを揃えられます。文章の長さが変わっても高さを揃えられます。</dd>
        <dd class="category_02">文章の長さが変わっても高さを揃えられます。</dd>
    </dl>

</body>
</html>

余談ですが、
少し前まで、テーブルレイアウトという言葉が流行りました。
その名の通りテーブルタグを使ってレイアウトするやり方です。

便利で手っ取り早いのですが、本来テーブルタグは表を作成するために使用するタグとして定義されているため、論理的な構造とは言えず、SEO的にも良くないです。

ただ、昔から使われてきたよくある手法なので、現在もテーブルレイアウトを使用しているサイトは多く、更新やちょっとした改修の際は全面リニューアルとかでない限り、そのサイトのルールに乗っ取り作業しなくてはならないため、
「ぐぬぬ…!テーブルレイアウト…!」と思いつつも目をつぶってます。

ですのでdisplay: tableはとても便利なんですね。
横並びのボタンを作成するときにもこれは使えそうなので試してみたいと思います。

3.まとめ

いかがだったでしょうか。今回記事のために調べていると
自分の知識の再確認ができたり、改めてHTML5のルールについて考えたり、
いろいろ勉強になりました。
少しでも参考になればと思います。

また、この記事では触れておりませんが
displayプロパティにはdisplay:flexというものも存在します(これまたとても便利です!!)。

詳しくは弊社の
【CSS】今更ながら、フレックスボックスの使い方をまとめてみた。
を御覧ください。

+dc(中)

この記事は、NAKAI が書きました。