MENU

【CSS】displayプロパティの概要と使い方

当記事では、CSSのdisplayプロパティの概要を解説します。

displayプロパティの使い方や具体的な活用法、少々難しいflexやgridをつかったレイアウトの作り方についてまとめました。

目次

CSSのdisplayプロパティとは

CSSの「display」プロパティは、HTML要素の表示形式を指定するために使用されます。「display」プロパティには、ブロック、インライン、インラインブロック、ノーマルなど、様々な値があります。

ブロック要素は、親要素の幅いっぱいに広がり、前後に改行が入ります。インライン要素は、親要素の幅に合わせて表示され、前後に改行が入りません。インラインブロック要素は、ブロック要素のように幅いっぱいに広がりますが、インライン要素のように前後に改行が入りません。

また「display: none」を指定すると、要素が表示されなくなります。

CSS「display: flex」を使ったレイアウトの作り方

「display: flex」を使ったレイアウトを作ることで、要素を縦横に配置し、サイズや位置を調整することができます。

「flex-direction」プロパティで、子要素の並び順を指定し、「justify-content」プロパティで、子要素の水平方向の配置を調整します。

「align-items」プロパティで、子要素の垂直方向の配置を調整することができます。

CSS「display: grid」を使ったグリッドレイアウトの作り方

「display: grid」を使ったグリッドレイアウトを作ることで、要素を行と列に分割し、配置することができます。

「grid-template-columns」プロパティで列のサイズを、「grid-template-rows」プロパティで行のサイズを指定します。

「grid-column」プロパティで要素を特定の列に、「grid-row」プロパティで要素を特定の行に配置することができます。

CSSの「display: none」と「visibility: hidden」の違い

「display: none」と「visibility: hidden」の違いは、下記の通りです。

  • display: none:要素が画面上に表示されないだけ
  • visibility: hidden:要素が画面上に表示されないだけでなく、要素が占めるスペースも消える

「display: none」を指定した場合、要素が画面上から消えるだけで、その要素が占めるスペースは残ります。

一方で「visibility: hidden」を指定した場合、要素が画面上から消えるだけでなく、その要素が占めるスペースも消える点が大きな違いです。

CSSのdisplayプロパティを使ったレスポンシブデザインについて

レスポンシブデザインを実現したい場合、「@media」を使って画面サイズに応じて「display」プロパティを変更することで、レイアウトを変えることができます。

また「display: none」を指定した要素をJavaScriptを使って画面サイズに応じて表示・非表示することもできます。

これらのコツを使って、画面サイズに応じて最適なレイアウトを実現していってください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

Webエンジニアのodakoです。コードの書き方やWeb制作に関するTipsをご紹介していきます。

目次