【HTML display】CSSのdisplayとは？使い方を基礎から徹底解説　

DMM WEBCAMP トップ > WEBCAMP MEDIA > プログラミング > 【HTML display】CSSのdisplayとは？使い方を基礎から徹底解説　

公開日: 2021.07.31

更新日: 2024.01.04

htmlでWEBページを作っていると、画像を横に並べてみたいとか、縦に画像を並べたいといったことがあるかと思います。これらを実現できるのがdisplayになります。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ

目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】大手DMMが運営のプログラミングスクール転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】フリーランスのエンジニアを最短で目指すエンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

displayって何ができる？

displayで表現可能なイメージ例を以下に紹介します。

種類	例	イメージ
inline	<div style=”display:inline;”>inline</div> <div style=”display:inline;”>inline</div> <div style=”display:inline;”>inline</div>
block	<div style=”display:block;”>block</div> <div style=”display:block;”>block</div> <div style=”display:block;”>block</div>
list-item	<div style=”display:list-item;”>list-item</div> <div style=”display:list-item;”>list-item</div> <div style=”display:list-item;”>list-item</div>
none	<div style=”display:none;”>none</div> <div style=”display:none;”>none</div> <div style=”display:none;”>none</div>	(何も表示されない)
table	長いので省略
grid	長いので省略

未経験でも確実にプログラミングスキルを身につけられる！
【DMM WEBCAMP】では、専属コーチが卒業まで伴走します！

✔短期間で効率的にプログラミングスキルを身につけたい
✔プログラミングを独学で進めていくのが不安
✔家での時間を有効に使ってスキルアップがしたい
といった方におすすめです！

＼実践的なスキルが身に付くカリキュラム／

今すぐ詳細を見る！

displayの種類

displayの代表的なものを紹介していきます。

inline

display:inlineと宣言すると横並びに表示がされます。要素同士は改行されずに少し隙間を空けながら並びます。

CSS

.inline1{
 display:inline;
 background-color:#90ee90;
 border: 1px solid #006400;
 width: 150px;
}

.inline2{
 display:inline;
 background-color:#87cefa;
 border: 1px solid #006400;
 width: 150px;
}

.inline3{
 display:inline;
 background-color:#ffb6c1;
 border: 1px solid #006400;
 width: 150px;
}

HTML

<div class="inline1">inline1</div>
<div class="inline2">inline2</div>
<div class="inline3">inline3</div>

表示

block

display:blockと宣言すると縦並びに表示がされます。要素同士は改行され表示されます。

CSS

.block1{
 display:block;
 background-color:#90ee90;
 border: 1px solid #006400;
 width: 150px;
}

.block2{
 display:block;
 background-color:#87cefa;
 border: 1px solid #006400;
 width: 150px;
}

.block3{
 display:block;
 background-color:#ffb6c1;
 border: 1px solid #006400;
 width: 150px;
}

HTML

<div class="block1">block1</div>
<div class="block2">block2</div>
<div class="block3">block3</div>

表示

list-item

display:list-itemと宣言するとリスト状に表示がされます。先頭に・が付与されます。

CSS

.list-item1{
 display:list-item;
 list-style-position: inside;
 background-color:#90ee90;
 border: 1px solid #006400;
 width: 150px;
}

.list-item2{
 display:list-item;
 list-style-position: inside;
 background-color:#87cefa;
 border: 1px solid #006400;
 width: 150px;
}

.list-item3{
 display:list-item;
  list-style-position: inside;
 background-color:#ffb6c1;
 border: 1px solid #006400;
 width: 150px;
}

HTML

<div class="list-item1">list-item1</div>
<div class="list-item2">list-item2</div>
<div class="list-item3">list-item3</div>

表示

list-item2

none

display:noneと宣言すると要素が表示されません。

CSS

.none1{
 display:inline;
 background-color:#90ee90;
 border: 1px solid #006400;
 width: 150px;
}
.none2{
 display:none;
 background-color:#87cefa;
 border: 1px solid #006400;
 width: 150px;
}
.none3{
 display:inline;
 background-color:#ffb6c1;
 border: 1px solid #006400;
 width: 150px;
}

HTML

<div class="none1">none1</div>
<div class="none2">none2</div>
<div class="none3">none3</div>

表示

visibility hiddenとの違い

visibility hiddenとnoneの違いは、表示のされ方にあります。noneでは、要素が詰めて表示されます。visibility hiddenでは、要素は詰められずに表示されます。

CSS

.visibilityhidden1{
 display:inline;
 background-color:#90ee90;
 border: 1px solid #006400;
 width: 150px;
}

.visibilityhidden2{
 display:inline;
 visibility:hidden;
 background-color:#87cefa;
 border: 1px solid #006400;
 width: 150px;
}

.visibilityhidden3{
 display:inline;
 background-color:#ffb6c1;
 border: 1px solid #006400;
 width: 150px;
}

HTML

<div class="visibilityhidden1">visibilityhidden1</div>
<div class="visibilityhidden2">visibilityhidden2</div>
<div class="visibilityhidden3">visibilityhidden3</div>

表示

noneの使いどころ

noneはスマホ、タブレット、PCなど画面の解像度が違う機器で表示を変えたいときに有効です。

@media screen and (max-width: 640px){　}と指定すると横幅が640px以下になるとnoneで非表示にするといったことが可能です。

CSS

.screennone1{
 display:inline;
 background-color:#90ee90;
 border: 1px solid #006400;
 width: 150px;
}

.screennone2{
 display:inline;
 background-color:#87cefa;
 border: 1px solid #006400;
 width: 150px;
}

.screennone3{
 display:inline;
 background-color:#ffb6c1;
 border: 1px solid #006400;
 width: 150px;
}

@media screen and (max-width: 640px){
 .screennone1{
  display:inline;
  background-color:#90ee90;
  border: 1px solid #006400;
  width: 150px;
 }
 .screennone2{
  display:none;
  background-color:#87cefa;
  border: 1px solid #006400;
  width: 150px;
 }
 .screennone3{
  display:inline;
  background-color:#ffb6c1;
  border: 1px solid #006400;
  width: 150px;
 }
}

HTML

<div class="screennone1">screennone1</div>
<div class="screennone2">screennone2</div>
<div class="screennone3">screennone3</div>

640px以上の表示

screennone

640px未満の表示

screennone2

table

tableでは表形式で表示がされます。行は、display: table-row;列はdisplay: table-cell;それらを囲む親要素にdisplay: table;と宣言します。

CSS

.table  {
  display: table;
  width: 200px;
  margin-top: 10px;
}

.table-row {
  display: table-row;
}

.table-cell1 {
  display: table-cell;
  border: 1px solid #006400;
  background-color:#90ee90;
}

.table-cell2 {
  display: table-cell;
  border: 1px solid #006400;
  background-color:#87cefa;
}

.table-cell3 {
  display: table-cell;
  border: 1px solid #006400;
  background-color:#ffb6c1;
}

HTML

<div class="table">
 <div class="table-row">
  <div class="table-cell1">table1</div>
  <div class="table-cell2">table2</div>
  <div class="table-cell3">table3</div>
 </div>
 <div class="table-row">
  <div class="table-cell3">table4</div>
  <div class="table-cell1">table5</div>
  <div class="table-cell2">table6</div>
</div>

表示

table2

表の間に隙間を空ける

表の間に隙間を空けたい場合は親要素tableに border-collapse: separate;とborder-spacing: 10px 10px;といったように指定します。

CSS

.tablespace  {
  display: table;
  width: 200px;
  margin-top: 10px;
  border-collapse: separate;
  border-spacing: 10px 10px;
}

.table-row {
  display: table-row;
}

.table-cell1 {
  display: table-cell;
  border: 1px solid #006400;
  background-color:#90ee90;
}

.table-cell2 {
  display: table-cell;
  border: 1px solid #006400;
  background-color:#87cefa;
}

.table-cell3 {
  display: table-cell;
  border: 1px solid #006400;
  background-color:#ffb6c1;
}

HTML

<div class="table">
 <div class="table-row">
  <div class="table-cell1">table1</div>
  <div class="table-cell2">table2</div>
  <div class="table-cell3">table3</div>
 </div>
 <div class="table-row">
  <div class="table-cell3">table4</div>
  <div class="table-cell1">table5</div>
  <div class="table-cell2">table6</div>
</div>

表示

table3

grid

grid は、格子状に好きな順番に要素を配置したりすることが可能です。

gridの外枠をコンテナ、中の要素をアイテムと呼びます。

CSS

.container{
 display: grid;
 grid-template-columns: 100px 110px 120px;
 grid-template-rows: 30px 40px 50px 60px;
 grid-template-areas:
  "area1 area2 area4"
  "area1 area3 area4"
  "area5 area5 area5";
}
.item1 {
 grid-area: area1;
 background: #90ee90;
 border: 1px solid #006400;
}
.item2 {
 grid-area: area2;
 background: #87cefa;
 border: 1px solid #006400;
}
.item3 {
 grid-area: area3;
 background: #ffb6c1;
 border: 1px solid #006400;
}
.item4 {
 grid-area: area4;
 background: #90ee90;
 border: 1px solid #006400;
}
.item5 {
 grid-area: area5;
 background: #87cefa;
 border: 1px solid #006400;
}

HTML

<div class="container">
 <div class="item1">griditem1</div>
 <div class="item2">griditem2</div>
 <div class="item3">griditem3</div>
 <div class="item4">griditem4</div>
 <div class="item5">griditem5</div>
</div>

表示

grid2

縦・横幅の設定

コンテナ部分にgrid-template-columnsと grid-template-rowsにて横幅と縦幅を設定します。

grid-template-columns: 100px 110px 120px;にてセルの左から100px、110px、120pxと指定しています。grid-template-rows: 30px 40px 50px 60px;にてセルの上から30px、40px、50px、60pxと指定しています。

CSS

.container{
 display: grid;
 grid-template-columns: 100px 110px 120px;
 grid-template-rows: 30px 40px 50px 60px;
}

レイアウトの設定

コンテナ部分にgrid-template-areasにてレイアウト設定をします。表示例を見ていただくとわかりますがgrid-template-areasに記述した通りにレイアウトがされます。1行は” “で区切り、1行の中のセルは、スペースで区切ることでレイアウトが簡単に作成可能です。以下のように改行してそろえておくと直感的にわかりやくすなります。

CSS

.container{
 display: grid;
 grid-template-columns: 100px 110px 120px;
 grid-template-rows: 30px 40px 50px 60px;
 grid-template-areas:
  "area1 area2 area4"
  "area1 area3 area4"
  "area5 area5 area5";
}

アイテムの設定とエリアとの紐づけ

アイテム部分にgrid-areaにてエリアとアイテムが紐づけすることが可能です。

CSS

.item1 {
 grid-area: area1;
 background: #90ee90;
 border: 1px solid #006400;
}

ディスプレイサイズに合わせてアイテム表示を折り返す

コンテナ部分にgrid-template-columns: repeat(auto-fill, 150px);というように記述することでディスプレイの横幅に合わせて表示を折り返すことが可能です。

CSS

.containerauto{
 display: grid; 
 grid-template-columns: repeat(auto-fill, 150px);
 grid-auto-rows: 30px;
}

.itemauto1 {
 background: #90ee90;
 border: 1px solid #006400;
}

.itemauto2 {
 background: #87cefa;
 border: 1px solid #006400;
}

.itemauto3 {
 background: #ffb6c1;
 border: 1px solid #006400;
}

.itemauto4 {
 background: #90ee90;
 border: 1px solid #006400;
}

.itemauto5 {
 background: #87cefa;
 border: 1px solid #006400;
}

HTML

<div class="containerauto">
 <div class="itemauto1">gridautoitem1</div>
 <div class="itemauto2">gridautoitem2</div>
 <div class="itemauto3">gridautoitem3</div>
 <div class="itemauto4">gridautoitem4</div>
 <div class="itemauto5">gridautoitem5</div>
</div>

画面が大きいときの表示

gridauto

画面が小さいときの表示

gridauto2

まとめ

displayの理解は進んだでしょうか？displayのtableやgridが自由に使えるようになると思い通りのWEBデザインができるようになってきます。displayを使いこなしてWEBデザイン頑張りましょう。

【DMM WEBCAMP】は受講生の97%が未経験からのスタート！
充実のサポート体制で、プログラミングスキルを確実に身につけられます！

✔一人ひとりに合わせた学習計画で進められるため、仕事や学校と両立できる
✔未経験者のために開発された実践的なカリキュラムを用意
✔︎専属コーチが卒業まで学習をサポート

＼目的別で選べる3つのコース／

あなたの適正コースを診断！

資料請求

DMM WEBCAMPでは転職成功率98％を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

資料をダウンロードする
IT技術の発展により、今後10~20年程度で47％の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

資料をダウンロードする
働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

資料をダウンロードする