【CSS入門】displayプロパティの使い方

  • 2020.02.16
  • 2022.05.04
  • CSS
【CSS入門】displayプロパティの使い方

CSSのdisplayプロパティの使い方について教えてほしい!

こう言った疑問に答えていきます。
本日の内容は以下です。

  • ブロック要素/インライン要素
  • インラインブロック要素
  • displayプロパティ

displayプロパティは、CSSの基本と言っても過言ではありません。

本記事では、「displayプロパティの使い方」について、わかりやすく解説していきます。またブロック要素、インライン要素の知識も必要になってきますので、そちらについても復習しながら、解説していきます!

では早速やっていきましょう!

ブロック要素/インライン要素

ブロック要素

ブロック要素

ブロック要素とは何かと言うと、HTMLの要素のうち1つのブロックで構成されている要素を言います。
代表的なブロック要素は「<h1>〜<h6>」「<p>」「<div>」などがあります。

ブロック要素の特徴としては以下が挙げられます。

  • width,heightの指定が可能
  • margin,paddingの指定が可能
  • 配置が縦並び

インライン要素

インライン要素

ブロック要素とは反対にインライン要素とは、HTMLの要素のうち文章の一部として扱われる要素を言います。
代表的なインライン要素は「<a>」「img」「<span>」などです。

インライン要素の特徴としては以下が挙げられます。

  • width,heightの指定ができない
  • margin,paddingは左右のみ指定可能
  • 配置が横並び

インラインブロック要素

インラインブロック要素

先ほど説明した「ブロック要素」「インライン要素」の両方の特徴をもつ要素があります。それが「インラインブロック要素」です。

インラインブロック要素の特徴としては以下が挙げられます。

  • width,heightの指定が可能
  • margin,paddingの指定が可能
  • 配置が横並び

インライン要素の場合だと指定ができなかった「width」や「height」が、インラインブロック要素の場合だと指定できるようになります!

しかし、インラインブロック要素の性質をもつHTML要素はありません。
ではどうやって「ブロック要素/インライン要素」から「インラインブロック要素」に変換させるのかと言うと、「displayプロパティ」を使ってインラインブロック要素に変換させていきます!

displayプロパティ

displayプロパティとは、要素の形式を変更できるプロパティです。

例えば先ほどの「ブロック要素」を「インライン要素/インラインブロック要素」に変換できたり、「インライン要素」を「ブロック要素/インラインブロック要素」に変換できたりします!

displayプロパティ

displayプロパティの書き方

displayプロパティの書き方は下のように書いていきます。

//インライン要素からインラインブロック要素へ変換

インライン要素{
   display: inline-block;
 }

//インライン要素からブロック要素に変換

インライン要素{
   display: block;
 }

//ブロック要素からインラインブロック要素に変換

ブロック要素{
   display: inline-block;
 }

また、displayプロパティを使うことで、表示状態にある要素を非表示にすることもできます。

表示状態にある要素{
   display: none;
}

まとめ

今回は「ブロック要素」「インライン要素」「インラインブロック要素」それぞれについて解説し、「displayプロパティの使い方」まで解説してきました。

初めのうちは慣れないと思いますが、この記事を見ながらコードを書いていくといいかと思います。

では本日は以上になります。