CSSの勉強していると、最初はなかなか理解しづらい項目があります。
今回は、そんな中でもdisplayプロパティについて紹介していきます。

1. displayとは

「display」はCSSプロパティの1つで、要素の表示の仕方を決めるためのものです。

使い方はこんな感じ

p { display:block}とかspan { display:inline}

displayプロパティの値について

displayプロパティで使用する値には、以下のようなものがあります。

1. display:block;
2. display:inline;
3. display:inline-block;
4. display:none;
5. display:flex;

それぞれ以下のような特徴があります。

1.display:block;

見出しや段落や表など、一つのブロック(かたまり)として認識される
前後に改行が入るのが一般的

・箱を縦に積むイメージ
・幅(width)と高さ(height)が指定可能
・上下左右の間隔(margin / padding)の指定が可能
・text-align / vertical-alignは使用できない
(中央寄せする場合は、margin:0 auto;を使います)

ちなみに、ブロック要素のHTMLタグには以下のようなものがあります。

<div>汎用的なブロック要素。特に意味はもたない
<header>ヘッダーコンテンツを示す
<main>メインコンテンツを示す
<section>セクションのまとまりを示す
<article>投稿コンテンツを示す
<footer>フッターコンテンツを示す
<h1>〜<h6>見出しを示す
<p>段落を示す

2. display:inline;

主にブロック要素の内容として用いられる。文章の一部として扱われる。
前後に改行は入らず、文章の一部として表示される。

・横に並ぶ。線のイメージ
・幅(width)や高さ(height)の指定はできない
・左右にだけ間隔(margin)の指定が可能
・paddingは上下左右指定可能だが、上下は他の要素に作用しない
・親要素で指定する場合に限り text-alingが使用可能

ちなみに、インライン要素には以下のものがあります。

<a>リンクを示す
<span>汎用的なインライン要素。特に意味はもたない
<strong>強調を示す
<img>画像を示す

3. display:inline;

先に説明した block要素とinline要素のいいとこどりをしたものです。
ブロック要素よりも小さく、インライン要素よりも大きいまとまりを示します。

・幅は中身に合わせる
・幅や高さが指定可能
・余白の指定が可能(margin/padding)
・横並びにできる
・text-align/vertical-alignが使用可能
・インラインブロック要素のHTMLタグは存在しない

4. display:none;

要素を非表示にできる指定方法です。

レスポンシブデザインなど、PC用とスマホ用でデザインを切り替える際に、メディアクエリと合わせて使用することで、メニューを表示切り替えを実現したりしまう。

5. display:flex;

CSS3から追加された新しい表示指定です。指定した要素の子要素を横並びにすることができます。フレックスボックスの使い方は別途まとめたいと思います。

まとめ

CSSのdisplayプロパティを紹介しました。最初は戸惑うかと思いますが、サイトデザインには欠かせない考え方となります。少しずつ知識を身につけていってください