css

「display」ってどういう意味?【意味から覚えるCSS(初心者向け)】

この記事は以下のような方にオススメです。

こんな方にオススメ
  • Webデザインを最近始めました。
  • 「display」の使い方が覚えられない。
  • もっと簡単な「display」の書き方ってないの?

「display – ディスプレイ」の単語の意味

「display – ディスプレイ」
displayの意味は、表示、展示、陳列といった意味があります。

displayは「表示方法を指定するためのCSS」です。

続いてdisplayで指定できる値を確認していきましょう!

displayで使える代表的な値の意味

「block – ブロック」
ブロック、区画

「inline – インライン」
列をなして、一線に

「inline-block – インラインブロック」
インラインとブロックの性質を併せ持つ

「none – ノン」
なし、いずれも..ない

「display」の配置方法の指定の仕方

/* ブロック要素 */
display: block;

/* インライン要素 */
display: inline;

/* インライン&ブロック要素 */
display: inline-block;

/* 非表示 */
display: none;

表示方法の違い

ブロック:縦積み(横幅と高さの指定可)
インラインブロック:横並び(横幅と高さの指定可)
インライン:横並び(横幅と高さの指定不可)

「display」の省略記法(emmet)

emmet機能を利用した省略記法のご紹介です。
省略記法(emmet)は「Tabボタン」で展開する事が出来ます。

/* d */
display: block;

/* d:i */
display: inline;

/* d:ib */
display: inline-block;

/* d:n */
display: none;

ざっくり覚えるdisplay

ボタンを作るときにインラインブロックを使う事が多い。

まとめ

以上、今回は【意味から覚えるCSS講座】シリーズ「display」の覚え方はご紹介いたしました。