当記事では、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を使って画面サイズに応じて表示・非表示することもできます。
これらのコツを使って、画面サイズに応じて最適なレイアウトを実現していってください。
