Table of Contents

はじめに

エンジニアになりたい！
サイトやブログを作ってみたい！

そういう方は最近多いのではないでしょうか。

私もそんな1人なのですが、おそらく何かを作りたいと思っている人が最初に手につけるであろう、HTMLとCSSでも特に今回はCSSのdisplayプロパティについて記事を書いてみたいと思います。

この記事の目的

CSSのdisplayプロパティをについて出来るだけわかりやすくまとめ、記事を見てくださった人が理解して扱えるようになる事
記事を書いている自分の理解度もアップさせること。

displayプロパティとは？

displayは、要素の「表示形式」を指定するプロパティです。

表示形式には大きくブロックレベル要素（Block-Level Elements）とインライン要素（Inline Elements）の２つに分ける事ができます。それぞれルールを持っており、どの要素の内側にどの要素を配置できるかなどが決まっています。そのためサイトやブログの作成者はこのルールに従う必要があります。

いきなり「ブロックレベル要素」と「インライン要素」という用語が出てきました。
それぞれ解説したいと思います。

ブロックレベル要素

ブロックレベル要素は一つの塊としてブラウザに認識されます。見出し、段落、表など、ページを構成する基本となる要素の事で、一般的なブラウザでは改行が入ります。

ブロックレベル要素としては下記のようなものがあります。

h1~h6　     ---見出し
p　　　      ---段落
ul、ol、li    ---リスト
table       ---表
div         ---構成要素

それでは実際に見てみましょう。
まず、下のようなhtmlファイルを用意します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>サンプル</title>
    <link rel="stylesheet" href="sample.css">
  </head>
<body>
<h1>見出し</h1>
<p>段落</p>
<ul>
<li>リスト1</li>
<li>リスト2</li>
</ul>
</body>
</html>

次に下のようなCSSを用意します。

h1{
background-color: red;
}
p{
background-color: blue;
}
ul{
background-color: green;
}
li{
background-color: yellow;
list-style: none;
}

２つのファイルが用意できたら早速ブラウザに表示させてみましょう。
結果は下のイメージのようになったかと思います。

f:id:keisuke8925gdk:20181023172758p:plain

ここで補足ですが、ブロックレベル要素の場合、普通であれば縦のサイズ（height）横のサイズ（width）を指定すると思います。指定しない場合は親要素と同じにデフォルトで設定されるため、横幅が100%になります。

今回の場合は親要素が<body></body>になるので、それぞれの要素が画面いっぱいに拡がっているのが確認できます。

その他、「一般的なブラウザでは改行が入る」と前述した通り改行が入っているのが確認できますね。
※要素と要素の上下が白色抜きになっているところです。

次にインライン要素を見ていきます。

インライン要素

インライン要素はブロックレベル要素の中に位置させる要素です。
例えば<strong></strong>要素のように、<p></p>段落のなかの一部を強調するようなものがこれに該当します。
これらはブロックレベル要素とは違って前後に改行が入りません。

ではまず使ってみましょう。

先ほど用意したHTMLファイルを少し変更します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>サンプル</title>
    <link rel="stylesheet" href="sample.css">
  </head>
<body>
<h1>見出し</h1>
<p>インライン要素の<strong>テスト</strong></p>　  <!-- 追記した行 -->
<p>段落</p>
<ul>
<li>リスト1</li>
<li>リスト2</li>
</ul>
</body>
</html>

続いてCSSも下記のように変更します。

h1{
background-color: red;
}
p{
background-color: blue;
color: white;
}
.inline-text{
background-color: gray;
color: white;
}
strong{
font-size: 30px;
font-weight: bold;
}
ul{
background-color: green;
}
li{
background-color: yellow;
list-style: none;
}