displayプロパティとは?

displayプロパティはCSS3において、要素の表示特性を操作するものです。たとえば、ブロック要素をインライン要素に変更したり、その逆にしたりすることが可能です。(HTML5ではブロック要素やインライン要素といった分類は廃止されましたが説明を簡単にするため省略します)

よく利用されるのがa要素のブロック化ですね。下記のコードはブロック化する前のリンクです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>DEMO</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Works</a></li>
    <li><a href="#">Links</a></li>
  </ul>
</nav>

<body>
</html>

body {
  margin: 0;
  padding: 0;
}

nav {
  background-color: lightgreen;
}

nav ul {
  overflow: hidden;
  list-style: none;
}

nav li {
  float: left;
  width: 100px;
  border-right: #fff 1px solid;
}

nav li:first-child {
  border-left: #fff 1px solid;
}

f:id:web-engine:20161030193936p:plain

a要素がブロック化されていないと、このようにリンクとして作用するのは文字に触れているあいだだけになります。a要素がデフォルトでは display: inline;になっているからです。
この問題を解決するためにa要素にdisplay: block;を指定してみましょう。CSSに次のように追加します。

nav a {
  display: block;
  text-decoration: none;
  background-color: orange;
  padding: 10px 0;
}

nav a:hover {
  background-color: green;
}

f:id:web-engine:20161030193953p:plain

a要素がブロック化されていることを証明するためにオレンジ色を施しました。また、文字に触れていなくても、領域全体がクリック可能になっていることが緑色でわかるはずです。paddingで幅と高さが指定できるようになっているのもわかりますね。

ちなみに、ここではnavに直接CSS指定を指定していますが、実際はidやclassで指定しましょう。

主要なもの

displayプロパティの種類は結構多いですが、とりあえず以下の4つが基本です。

block
- float, position等を指定しない限りは配置された要素は自動改行され、上から下へ並ぶ
- width, heightが指定可能
- margin, paddingが指定可能
- vertical-alignプロパティ指定不可

inline
- br要素で改行されない限り、テキストと同じように横並びになる
- width, heightが指定不可
- 上下marginが指定不可
- vertical-alignプロパティ指定可能

inline-block
- 上記のinlineと同じく、横並びになる
- width, heightが指定可能
- margin, paddingが指定可能
- vertical-alignプロパティ指定可能
- 親要素のtext-alignでボックスどうしの上下の方向を揃えることが可能

table-cell
- 要素が一列に横に並ぶ(th, tdのようになる)
- 隣りあう要素の高さは自動的に最も高い要素に揃えられる
- vertical-alignプロパティ指定可能
- 親要素にdisplay: table;を指定した上で、その要素にwidth指定を行うと、これを指定した要素が親要素の幅に合わせて自動で伸縮するようになる

たまに使うもの

table
- 上記で出てきたtable-cellとセットで使うことが多い
- ブロックレベルボックスとして配置される表(tableをそのままイメージしてもらえれれば良い)

list-item
- リスト項目として表示
- ブロックレベルとして配置される

none
- 要素事態を非表示にしてしまう(ないものとしてしまう)
- 指定された要素の空白領域は確保されず、後続要素が上に詰めて表示される。

参考

HTML5&CSS3標準デザイン講座

WebEngine

だらだらと綴る技術系メモ

よく使うdisplayプロパティまとめ

displayプロパティとは?

主要なもの

たまに使うもの

最近の主流

参考