讃岐小僧のEngineering×Techメモ

プログラミングや、趣味の野球、資産運用について、その他、ビジネスやテクノロジーをテーマに様々なことをつぶやく場所です。

【CSS】displayプロパティについて色々整理してみた part1

CSS

はじめに

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

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

私もそんな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;
}


結果は下のイメージのようになります。

f:id:keisuke8925gdk:20181024145954p:plain

今回新たに「インライン要素のテスト」という段落を追記しました。
イメージの灰色の部分です。

「テスト」の部分を大きくしていますがここがインライン要素になります。
<strong></strong>で囲ってあげている部分で、新たにタグを追加してもこれまで利用していた<h1></h1>や<p></p>のように改行は発生していません。

まとめ

ここまで、displayプロパティの主にブロックレベル要素とインライン要素の2つを画面に表示させるまでの基本的なものを記載しました。

part2ではこれらをもう少し掘り下げたいと思います。

ここまで閲覧ありがとうございました！