display

2024 7/07

2023.12.30 2024.07.07

記事の内容

display

displayプロパティは、要素の表示方法を指定するために使用されます。

displayプロパティ

記法

.クラス名　{
　display : 表示方法;
}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>displayプロパティ</title>
  </head>

  <body>
    <p>インライン要素</p>
    <span class="apple-green">通常</span>
    <span class="block turquoise-blue">display：block適応</span>
    <hr />
    <p>ブロック要素</p>
    <p class="apple-green">通常</p>
    <p class="inline turquoise-blue">display：inline適応</p>
    <hr />
    <p>インラインブロック要素</p>
    <p class="apple-green">通常</p>
    <p class="inline-block turquoise-blue">display：inline-block適応</p>
    <hr />
    <p>flexなし</p>
    <div class="apple-green">要素1</div>
    <div class="turquoise-blue">要素2</div>
    <div class="yamabuki">要素3</div>
    <p>flexあり</p>
    <div class="flex">
      <div class="apple-green">要素1</div>
      <div class="turquoise-blue">要素2</div>
      <div class="yamabuki">要素3</div>
    </div>
    <hr />
    <p>grid</p>
    <div class="grid">
      <div class="grid-item1 apple-green">要素1</div>
      <div class="grid-item2 turquoise-blue">要素2</div>
      <div class="grid-item3 yamabuki">要素3</div>
    </div>
  </body>
</html>

.block {
  display: block;
}
.inline {
  display: inline;
}
.inline-block {
  display: inline-block;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.grid-item1 {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}
.grid-item2 {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}
.grid-item3 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}
/* 色指定 */
.apple-green {
  background-color: #bfdd9e;
}

.turquoise-blue {
  background-color: #56c1db;
}

.yamabuki {
  background-color: #f4af2b;
}

出力結果

インライン要素

通常 display：block適応

ブロック要素

通常

display：inline適応

インラインブロック要素

通常

display：inline-block適応

flexなし

要素1

要素2

要素3

flexあり

要素1

要素2

要素3

grid

要素1

要素2

要素3

block・inline・inline-blockの違い

並び

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>displayプロパティ(並び)</title>
  </head>

  <body>
    <p>ブロック要素(縦並び)</p>
    <p class="block apple-green">要素A</p>
    <p class="block turquoiseーblue">要素B</p>
    <p class="block yamabuki">要素C</p>
    <hr />
    <p>インライン要素(横並び)</p>
    <p class="inline apple-green">要素A</p>
    <p class="inline turquoiseーblue">要素B</p>
    <p class="inline yamabuki">要素C</p>
    <hr />
    <p>インラインブロック要素(横並び)</p>
    <p class="inline-block apple-green">要素A</p>
    <p class="inline-block turquoiseーblue">要素B</p>
    <p class="inline-block yamabuki">要素C</p>
  </body>
</html>

.block {
  display: block;
}
.inline {
  display: inline;
}
.inline-block {
  display: inline-block;
}

/* 色指定 */
.apple-green {
  background-color: #bfdd9e;
}

.turquoise-blue {
  background-color: #56c1db;
}

.yamabuki {
  background-color: #f4af2b;
}

出力結果

ブロック要素(縦並び)

要素A

要素B

要素C

インライン要素(横並び)

要素A

要素B

要素C

インラインブロック要素(横並び)

要素A

要素B

要素C

幅・高さ

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>displayプロパティ(幅・高さ)</title>
  </head>

  <body>
    <p>ブロック要素(幅・高さが指定できる) ○</p>
    <p class="block apple-green">要素A</p>
    <p class="block turquoiseーblue">要素B</p>
    <p class="block yamabuki">要素C</p>
    <hr />
    <p>インライン要素(幅・高さが指定できない) ×</p>
    <p class="inline apple-green">要素A</p>
    <p class="inline turquoiseーblue">要素B</p>
    <p class="inline yamabuki">要素C</p>
    <hr />
    <p>インラインブロック要素(幅・高さが指定できる) ○</p>
    <p class="inline-block apple-green">要素A</p>
    <p class="inline-block turquoiseーblue">要素B</p>
    <p class="inline-block yamabuki">要素C</p>
  </body>
</html>

.block {
  display: block;
  width: 50px;
  height: 50px;
}
.inline {
  display: inline;
  width: 50px;
  height: 50px;
}
.inline-block {
  display: inline-block;
  width: 50px;
  height: 50px;
}

/* 色指定 */
.apple-green {
  background-color: #bfdd9e;
}

.turquoise-blue {
  background-color: #56c1db;
}

.yamabuki {
  background-color: #f4af2b;
}

出力結果

ブロック要素(幅・高さが指定できる) ○

要素A

要素B

要素C

インライン要素(幅・高さが指定できない) ×

要素A

要素B

要素C

インラインブロック要素(幅・高さが指定できる) ○

要素A

要素B

要素C

text-align

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>displayプロパティ(text-align)</title>
  </head>

  <body>
    <p>ブロック要素(指定できない) ×</p>
    <div class="text-align">
      <p class="block apple-green">要素A</p>
      <p class="block turquoiseーblue">要素B</p>
      <p class="block yamabuki">要素C</p>
    </div>
    <hr />
    <p>インライン要素(指定できる) ○</p>
    <div class="text-align">
      <p class="inline apple-green">要素A</p>
      <p class="inline turquoiseーblue">要素B</p>
      <p class="inline yamabuki">要素C</p>
    </div>
    <hr />
    <p>インラインブロック要素(指定できる) ○</p>
    <div class="text-align">
      <p class="inline-block apple-green">要素A</p>
      <p class="inline-block turquoiseーblue">要素B</p>
      <p class="inline-block yamabuki">要素C</p>
    </div>
  </body>
</html>

.text-align {
  text-align: center;
}
.block {
  display: block;
  width: 50px;
}
.inline {
  display: inline;
}
.inline-block {
  display: inline-block;
}

/* 色指定 */
.apple-green {
  background-color: #bfdd9e;
}

.turquoise-blue {
  background-color: #56c1db;
}

.yamabuki {
  background-color: #f4af2b;
}

出力結果

ブロック要素(指定できない) ×

要素A

要素B

要素C

インライン要素(指定できる) ○

要素A

要素B

要素C

インラインブロック要素(指定できる) ○

要素A

要素B

要素C

vertical-align

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>displayプロパティ(vertical-align)</title>
  </head>

  <body>
    <div>
      <p>ブロック要素(指定できない) ×</p>
      <span class="sample">sample</span>
      <p class="vertical-align-top block apple-green">要素A</p>
      <p class="vertical-align-middle block turquoiseーblue">要素B</p>
      <p class="vertical-align-bottom block yamabuki">要素C</p>
    </div>
    <hr />
    <div>
      <p>インライン要素(指定できる) ○</p>
      <span class="sample">sample</span>
      <p class="vertical-align-top inline apple-green">要素A</p>
      <p class="vertical-align-middle inline turquoiseーblue">要素B</p>
      <p class="vertical-align-bottom inline yamabuki">要素C</p>
    </div>
    <hr />
    <div>
      <p>インラインブロック要素(指定できる) ○</p>
      <span class="sample">sample</span>
      <p class="vertical-align-top inline-block apple-green">要素A</p>
      <p class="vertical-align-middle inline-block turquoiseーblue">要素B</p>
      <p class="vertical-align-bottom inline-block yamabuki">要素C</p>
    </div>
    <hr />
  </body>
</html>

.vertical-align-top {
  vertical-align: top;
}
.vertical-align-middle {
  vertical-align: middle;
}
.vertical-align-bottom {
  vertical-align: bottom;
}
.block {
  display: block;
}
.inline {
  display: inline;
}
.inline-block {
  display: inline-block;
}

.sample {
  font-size: 50px;
}

/* 色指定 */
.apple-green {
  background-color: #bfdd9e;
}

.turquoise-blue {
  background-color: #56c1db;
}

.yamabuki {
  background-color: #f4af2b;
}

出力結果

ブロック要素(指定できない) ×

sample

要素A

要素B

要素C

インライン要素(指定できる) ○

sample

要素A

要素B

要素C

インラインブロック要素(指定できる) ○

sample

要素A

要素B

要素C

flex

要素を柔軟に配置し、コンテナ内のスペースを効率的に利用するために使用されます。

プロパティ	説明
flex-direction	子要素の並ぶ向き
flex-wrap	子要素の折り返し
justify-content	水平方向の揃え
align-items	垂直方向の揃え
align-content	複数行にした時の揃え

flex-direction

アイテムを水平方向または垂直方向に並べることができます。

flex-direction

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>flex-directionについて</title>
  </head>

  <body>
    <div class="main-title">flex-directionについて</div>

    <div class="section">
      <div class="section-title">flex-direction: row</div>
      <div class="flex flex-row">
        <div class="apple-green">要素1</div>
        <div class="turquoise-blue">要素2</div>
        <div class="yamabuki">要素3</div>
      </div>
    </div>
    <hr />
    <div class="section">
      <div class="section-title">flex-direction: row-reverse</div>
      <div class="flex flex-row-reverse">
        <div class="apple-green">要素1</div>
        <div class="turquoise-blue">要素2</div>
        <div class="yamabuki">要素3</div>
      </div>
    </div>
    <hr />
    <div class="section">
      <div class="section-title">flex-direction: column</div>
      <div class="flex flex-col">
        <div class="apple-green">要素1</div>
        <div class="turquoise-blue">要素2</div>
        <div class="yamabuki">要素3</div>
      </div>
    </div>
    <hr />
    <div class="section">
      <div class="section-title">flex-direction: column-reverse</div>
      <div class="flex flex-col-reverse">
        <div class="apple-green">要素1</div>
        <div class="turquoise-blue">要素2</div>
        <div class="yamabuki">要素3</div>
      </div>
    </div>
  </body>
</html>

.main-title {
  font-size: 2em;
  text-align: center;
  margin-bottom: 40px;
}
.section {
  margin-bottom: 40px;
}
.section-title {
  font-size: 1.5em;
  margin-bottom: 20px;
}

/* flex関係 */
.flex {
  display: flex;
  gap: 10px;
}
.flex div {
  padding: 20px;
  text-align: center;
  color: #fff;
  border-radius: 5px;
}
.flex-row {
  flex-direction: row;
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}

/* 色指定 */
.apple-green {
  background-color: #bfdd9e;
}
.turquoise-blue {
  background-color: #56c1db;
}
.yamabuki {
  background-color: #f4af2b;
}

出力結果

flex-directionについて

flex-direction: row

要素1

要素2

要素3

flex-direction: row-reverse

要素1

要素2

要素3

flex-direction: column

要素1

要素2

要素3

flex-direction: column-reverse

要素1

要素2

要素3

flex-wrap

アイテムが一行に収まらない場合に折り返しを行うかどうかを指定します。

flex-wrap

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>flex-wrapについて</title>
  </head>

  <body>
    <div class="main-title">flex-wrapについて</div>

    <div class="section">
      <div class="section-title">flex-wrap: nowrap</div>
      <div class="flex flex-nowrap">
        <div class="apple-green">要素1</div>
        <div class="turquoise-blue">要素2</div>
        <div class="yamabuki">要素3</div>
        <div class="apple-green">要素4</div>
        <div class="turquoise-blue">要素5</div>
        <div class="yamabuki">要素6</div>
        <div class="apple-green">要素7</div>
      </div>
    </div>
    <hr />
    <div class="section">
      <div class="section-title">flex-wrap: wrap</div>
      <div class="flex flex-wrap">
        <div class="apple-green">要素1</div>
        <div class="turquoise-blue">要素2</div>
        <div class="yamabuki">要素3</div>
        <div class="apple-green">要素4</div>
        <div class="turquoise-blue">要素5</div>
        <div class="yamabuki">要素6</div>
        <div class="apple-green">要素7</div>
      </div>
    </div>
    <hr />
    <div class="section">
      <div class="section-title">flex-wrap: wrap-reverse</div>
      <div class="flex flex-wrap-reverse">
        <div class="apple-green">要素1</div>
        <div class="turquoise-blue">要素2</div>
        <div class="yamabuki">要素3</div>
        <div class="apple-green">要素4</div>
        <div class="turquoise-blue">要素5</div>
        <div class="yamabuki">要素6</div>
        <div class="apple-green">要素7</div>
      </div>
    </div>
  </body>
</html>

.main-title {
  font-family: Arial, sans-serif;
  font-size: 2em;
  text-align: center;
  margin-bottom: 40px;
  color: #333;
}
.section {
  margin-bottom: 40px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}
.section-title {
  font-size: 1.5em;
  margin-bottom: 20px;
}

/* flex関係 */
.flex {
  display: flex;
  gap: 10px;
}
.flex div {
  padding: 20px;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  flex: 1 1 100px;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

/* 色指定 */
.apple-green {
  background-color: #bfdd9e;
}
.turquoise-blue {
  background-color: #56c1db;
}
.yamabuki {
  background-color: #f4af2b;
}

出力結果

flex-wrapについて

flex-wrap: nowrap

要素1

要素2

要素3

要素4

要素5

要素6

要素7

flex-wrap: wrap

要素1

要素2

要素3

要素4

要素5

要素6

要素7

flex-wrap: wrap-reverse

要素1

要素2

要素3

要素4

要素5

要素6

要素7

justify-content

横方向に沿ってどのように配置するかを指定します。

justify-content

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>justify-contentについて</title>
  </head>

  <body>
    <div class="main-title">justify-contentについて</div>

    <div class="section">
      <div class="section-title">justify-content: flex-start</div>
      <div class="flex justify-start">
        <div class="apple-green">要素1</div>
        <div class="turquoise-blue">要素2</div>
        <div class="yamabuki">要素3</div>
      </div>
    </div>
    <hr />
    <div class="section">
      <div class="section-title">justify-content: flex-end</div>
      <div class="flex justify-end">
        <div class="apple-green">要素1</div>
        <div class="turquoise-blue">要素2</div>
        <div class="yamabuki">要素3</div>
      </div>
    </div>
    <hr />
    <div class="section">
      <div class="section-title">justify-content: center</div>
      <div class="flex justify-center">
        <div class="apple-green">要素1</div>
        <div class="turquoise-blue">要素2</div>
        <div class="yamabuki">要素3</div>
      </div>
    </div>
    <hr />
    <div class="section">
      <div class="section-title">justify-content: space-between</div>
      <div class="flex justify-space-between">
        <div class="apple-green">要素1</div>
        <div class="turquoise-blue">要素2</div>
        <div class="yamabuki">要素3</div>
      </div>
    </div>
    <hr />
    <div class="section">
      <div class="section-title">justify-content: space-around</div>
      <div class="flex justify-space-around">
        <div class="apple-green">要素1</div>
        <div class="turquoise-blue">要素2</div>
        <div class="yamabuki">要素3</div>
      </div>
    </div>
  </body>
</html>

.main-title {
  font-family: Arial, sans-serif;
  font-size: 2em;
  text-align: center;
  margin-bottom: 40px;
  color: #333;
}
.section {
  margin-bottom: 40px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}
.section-title {
  font-size: 1.5em;
  margin-bottom: 20px;
}

/* flex関係 */
.flex {
  display: flex;
  gap: 10px;
}
.flex div {
  padding: 20px;
  text-align: center;
  color: #fff;
  border-radius: 5px;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-space-between {
  justify-content: space-between;
}
.justify-space-around {
  justify-content: space-around;
}

/* 色指定 */
.apple-green {
  background-color: #bfdd9e;
}
.turquoise-blue {
  background-color: #56c1db;
}
.yamabuki {
  background-color: #f4af2b;
}

出力結果

justify-contentについて

justify-content: flex-start

要素1

要素2

要素3

justify-content: flex-end

要素1

要素2

要素3

justify-content: center

要素1

要素2

要素3

justify-content: space-between

要素1

要素2

要素3

justify-content: space-around

要素1

要素2

要素3

align-items

垂直方向にどのように揃えるかを指定します。

align-items

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>align-itemsについて</title>
  </head>

  <body>
    <div class="main-title">align-itemsについて</div>

    <div class="section">
      <div class="section-title">align-items: flex-start</div>
      <div class="flex align-start">
        <div class="box apple-green">要素1</div>
        <div class="box turquoise-blue">要素2</div>
        <div class="box yamabuki">要素3</div>
      </div>
    </div>
    <hr />
    <div class="section">
      <div class="section-title">align-items: flex-end</div>
      <div class="flex align-end">
        <div class="box apple-green">要素1</div>
        <div class="box turquoise-blue">要素2</div>
        <div class="box yamabuki">要素3</div>
      </div>
    </div>
    <hr />
    <div class="section">
      <div class="section-title">align-items: center</div>
      <div class="flex align-center">
        <div class="box apple-green">要素1</div>
        <div class="box turquoise-blue">要素2</div>
        <div class="box yamabuki">要素3</div>
      </div>
    </div>
    <hr />
    <div class="section">
      <div class="section-title">align-items: stretch</div>
      <div class="flex align-stretch">
        <div class="box apple-green">要素1</div>
        <div class="box turquoise-blue">要素2</div>
        <div class="box yamabuki">要素3</div>
      </div>
    </div>
    <hr />
    <div class="section">
      <div class="section-title">align-items: baseline</div>
      <div class="flex align-baseline">
        <div class="box apple-green large-text">要素1</div>
        <div class="box turquoise-blue medium-text">要素2</div>
        <div class="box yamabuki small-text">要素3</div>
      </div>
    </div>
  </body>
</html>

.main-title {
  font-family: Arial, sans-serif;
  font-size: 2em;
  text-align: center;
  margin-bottom: 40px;
  color: #333;
}
.section {
  margin-bottom: 40px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}
.section-title {
  font-size: 1.5em;
  margin-bottom: 20px;
}
.box {
  width: 100px;
}
.large-text {
  font-size: 22px;
}
.medium-text {
  font-size: 18px;
}
.small-text {
  font-size: 14px;
}

/* flex関係 */
.flex {
  display: flex;
  gap: 10px;
  height: 150px;
  border: 1px solid #ccc;
  background-color: white;
}
.flex div {
  padding: 20px;
  text-align: center;
  color: #fff;
  border-radius: 5px;
}
.align-start {
  align-items: flex-start;
}
.align-end {
  align-items: flex-end;
}
.align-center {
  align-items: center;
}
.align-stretch {
  align-items: stretch;
}
.align-baseline {
  align-items: baseline;
}

/* 色指定 */
.apple-green {
  background-color: #bfdd9e;
}
.turquoise-blue {
  background-color: #56c1db;
}
.yamabuki {
  background-color: #f4af2b;
}

出力結果

align-itemsについて

align-items: flex-start

要素1

要素2

要素3

align-items: flex-end

要素1

要素2

要素3

align-items: center

要素1

要素2

要素3

align-items: stretch

要素1

要素2

要素3

align-items: baseline

要素1

要素2

要素3

align-content

複数の行が存在する場合にのみ適用され、各行の間のスペースをどのように分配するかを指定します。

align-content

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>align-contentについて</title>
  </head>

  <body>
    <div class="main-title">align-contentについて</div>

    <div class="section">
      <div class="section-title">align-content: flex-start</div>
      <div class="flex-container align-content-start">
        <div class="box apple-green">要素1</div>
        <div class="box turquoise-blue">要素2</div>
        <div class="box yamabuki">要素3</div>
        <div class="box apple-green">要素4</div>
        <div class="box turquoise-blue">要素5</div>
        <div class="box yamabuki">要素6</div>
        <div class="box apple-green">要素7</div>
      </div>
    </div>

    <div class="section">
      <div class="section-title">align-content: flex-end</div>
      <div class="flex-container align-content-end">
        <div class="box apple-green">要素1</div>
        <div class="box turquoise-blue">要素2</div>
        <div class="box yamabuki">要素3</div>
        <div class="box apple-green">要素4</div>
        <div class="box turquoise-blue">要素5</div>
        <div class="box yamabuki">要素6</div>
        <div class="box apple-green">要素7</div>
      </div>
    </div>

    <div class="section">
      <div class="section-title">align-content: center</div>
      <div class="flex-container align-content-center">
        <div class="box apple-green">要素1</div>
        <div class="box turquoise-blue">要素2</div>
        <div class="box yamabuki">要素3</div>
        <div class="box apple-green">要素4</div>
        <div class="box turquoise-blue">要素5</div>
        <div class="box yamabuki">要素6</div>
        <div class="box apple-green">要素7</div>
      </div>
    </div>

    <div class="section">
      <div class="section-title">align-content: space-between</div>
      <div class="flex-container align-content-space-between">
        <div class="box apple-green">要素1</div>
        <div class="box turquoise-blue">要素2</div>
        <div class="box yamabuki">要素3</div>
        <div class="box apple-green">要素4</div>
        <div class="box turquoise-blue">要素5</div>
        <div class="box yamabuki">要素6</div>
        <div class="box apple-green">要素7</div>
      </div>
    </div>

    <div class="section">
      <div class="section-title">align-content: space-around</div>
      <div class="flex-container align-content-space-around">
        <div class="box apple-green">要素1</div>
        <div class="box turquoise-blue">要素2</div>
        <div class="box yamabuki">要素3</div>
        <div class="box apple-green">要素4</div>
        <div class="box turquoise-blue">要素5</div>
        <div class="box yamabuki">要素6</div>
        <div class="box apple-green">要素7</div>
      </div>
    </div>

    <div class="section">
      <div class="section-title">align-content: stretch</div>
      <div class="flex-container align-content-stretch">
        <div class="box apple-green">要素1</div>
        <div class="box turquoise-blue">要素2</div>
        <div class="box yamabuki">要素3</div>
        <div class="box apple-green">要素4</div>
        <div class="box turquoise-blue">要素5</div>
        <div class="box yamabuki">要素6</div>
        <div class="box apple-green">要素7</div>
      </div>
    </div>
  </body>
</html>

.main-title {
  font-family: Arial, sans-serif;
  font-size: 2em;
  text-align: center;
  margin-bottom: 40px;
  color: #333;
}
.section {
  margin-bottom: 40px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}
.section-title {
  font-size: 1.5em;
  margin-bottom: 20px;
}
.box {
  padding: 20px;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  flex: 1 1 100px;
}

/* flex関係 */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  height: 300px;
  border: 1px solid #ccc;
  background-color: white;
}
.align-content-start {
  align-content: flex-start;
}
.align-content-end {
  align-content: flex-end;
}
.align-content-center {
  align-content: center;
}
.align-content-space-between {
  align-content: space-between;
}
.align-content-space-around {
  align-content: space-around;
}
.align-content-stretch {
  align-content: stretch;
}

/* 色指定 */
.apple-green {
  background-color: #bfdd9e;
}
.turquoise-blue {
  background-color: #56c1db;
}
.yamabuki {
  background-color: #f4af2b;
}

出力結果

align-contentについて

align-content: flex-start

要素1

要素2

要素3

要素4

要素5

要素6

要素7

align-content: flex-end

要素1

要素2

要素3

要素4

要素5

要素6

要素7

align-content: center

要素1

要素2

要素3

要素4

要素5

要素6

要素7

align-content: space-between

要素1

要素2

要素3

要素4

要素5

要素6

要素7

align-content: space-around

要素1

要素2

要素3

要素4

要素5

要素6

要素7

align-content: stretch

要素1

要素2

要素3

要素4

要素5

要素6

要素7

grid

ピクセル指定

grid-template-columns : グリッドコンテナの列の数と幅を指定
grid-template-rows : グリッドコンテナの行の数と高さを指定

grid(ピクセル)

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>gridについて</title>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <div class="main-title">gridについて</div>

    <div class="section">
      <div class="section-title">columns 3 : rows2</div>
      <div class="main-container">
        <div class="grid grid-container1">
          <div class="grid-item apple-green">要素1</div>
          <div class="grid-item turquoise-blue">要素2</div>
          <div class="grid-item yamabuki">要素3</div>
          <div class="grid-item apple-green">要素4</div>
          <div class="grid-item turquoise-blue">要素5</div>
          <div class="grid-item yamabuki">要素6</div>
        </div>
      </div>
    </div>
    <hr />
    <div class="section">
      <div class="section-title">columns 2 : rows3</div>
      <div class="main-container">
        <div class="grid grid-container2">
          <div class="grid-item apple-green">要素1</div>
          <div class="grid-item turquoise-blue">要素2</div>
          <div class="grid-item yamabuki">要素3</div>
          <div class="grid-item apple-green">要素4</div>
          <div class="grid-item turquoise-blue">要素5</div>
          <div class="grid-item yamabuki">要素6</div>
        </div>
      </div>
    </div>
  </body>
</html>

.main-title {
  font-family: Arial, sans-serif;
  font-size: 2em;
  text-align: center;
  margin-bottom: 40px;
  color: #333;
}
.section {
  margin-bottom: 40px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

/* グリッド県警 */
.grid {
  display: grid;
  gap: 10px;
}
/* columns 3 : rows2 */
.grid-container1 {
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px;
}
/* columns 2 : rows3 */
.grid-container2 {
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px 100px;
}
.grid-item {
  background-color: #4caf50;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}

/* 色指定 */
.apple-green {
  background-color: #bfdd9e;
}
.turquoise-blue {
  background-color: #56c1db;
}
.yamabuki {
  background-color: #f4af2b;
}

出力結果

gridについて

columns 3 : rows2

要素1

要素2

要素3

要素4

要素5

要素6

columns 2 : rows3

要素1

要素2

要素3

要素4

要素5

要素6

フレーム指定

フレーム(fr)は、Gridレイアウトの比率指定単位で、利用可能スペースを分割するために使用されます。

grid(フレーム)

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>grid(フレーム)について</title>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <div class="main-title">gridについて</div>

    <div class="section">
      <div class="section-title">columns 3 : rows 2</div>
      <div class="main-container">
        <div class="grid grid-flame-container1">
          <div class="grid-item apple-green">要素1</div>
          <div class="grid-item turquoise-blue">要素2</div>
          <div class="grid-item yamabuki">要素3</div>
          <div class="grid-item apple-green">要素4</div>
          <div class="grid-item turquoise-blue">要素5</div>
          <div class="grid-item yamabuki">要素6</div>
        </div>
      </div>
    </div>
    <hr />
    <div class="section">
      <div class="section-title">columns 2 : rows 3</div>
      <div class="main-container">
        <div class="grid grid-flame-container2">
          <div class="grid-item apple-green">要素1</div>
          <div class="grid-item turquoise-blue">要素2</div>
          <div class="grid-item yamabuki">要素3</div>
          <div class="grid-item apple-green">要素4</div>
          <div class="grid-item turquoise-blue">要素5</div>
          <div class="grid-item yamabuki">要素6</div>
        </div>
      </div>
    </div>
  </body>
</html>

.main-title {
  font-family: Arial, sans-serif;
  font-size: 2em;
  text-align: center;
  margin-bottom: 40px;
  color: #333;
}
.section {
  margin-bottom: 40px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

/* グリッド設定 */
.grid {
  display: grid;
  gap: 10px;
}
/* columns 3 : rows 2 */
.grid-container1 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
/* columns 2 : rows 3 */
.grid-flame-container2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
.grid-flame-item {
  background-color: #4caf50;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}

/* 色指定 */
.apple-green {
  background-color: #bfdd9e;
}
.turquoise-blue {
  background-color: #56c1db;
}
.yamabuki {
  background-color: #f4af2b;
}

出力結果

gridについて

columns 3 : rows 2

要素1

要素2

要素3

要素4

要素5

要素6

columns 2 : rows 3

要素1

要素2

要素3

要素4

要素5

要素6

リピート指定

リピート(repeat)は、Gridレイアウトで同じサイズの列や行を複数回繰り返して定義するために使用されます。

grid(リピート)

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>gridについて</title>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <div class="main-title">gridについて</div>

    <div class="section">
      <div class="section-title">columns 3 : rows 2</div>
      <div class="main-container">
        <div class="grid grid-repeat-container1">
          <div class="grid-item apple-green">要素1</div>
          <div class="grid-item turquoise-blue">要素2</div>
          <div class="grid-item yamabuki">要素3</div>
          <div class="grid-item apple-green">要素4</div>
          <div class="grid-item turquoise-blue">要素5</div>
          <div class="grid-item yamabuki">要素6</div>
        </div>
      </div>
    </div>
    <hr />
    <div class="section">
      <div class="section-title">columns 2 : rows 3</div>
      <div class="main-container">
        <div class="grid grid-repeat-container2">
          <div class="grid-item apple-green">要素1</div>
          <div class="grid-item turquoise-blue">要素2</div>
          <div class="grid-item yamabuki">要素3</div>
          <div class="grid-item apple-green">要素4</div>
          <div class="grid-item turquoise-blue">要素5</div>
          <div class="grid-item yamabuki">要素6</div>
        </div>
      </div>
    </div>
  </body>
</html>

.main-title {
  font-family: Arial, sans-serif;
  font-size: 2em;
  text-align: center;
  margin-bottom: 40px;
  color: #333;
}
.section {
  margin-bottom: 40px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

/* グリッド設定 */
.grid {
  display: grid;
  gap: 10px;
}
/* columns 3 : rows 2 */
.grid-repeat-container1 {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
}
/* columns 2 : rows 3 */
.grid-repeat-container2 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 150px);
}
.grid-item {
  background-color: #4caf50;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}

/* 色指定 */
.apple-green {
  background-color: #bfdd9e;
}
.turquoise-blue {
  background-color: #56c1db;
}
.yamabuki {
  background-color: #f4af2b;
}

出力結果

gridについて

columns 3 : rows 2

要素1

要素2

要素3

要素4

要素5

要素6

columns 2 : rows 3

要素1

要素2

要素3

要素4

要素5

要素6

グリッド線

グリッド線（grid lines）とは、グリッドアイテムを配置するための仮想的な線のことです。

grid-column-start : グリッドアイテムの開始位置（列）
grid-column-end : グリッドアイテムの終了位置（列）
grid-row-start : グリッドアイテムの開始位置（行）
grid-row-end : グリッドアイテムの終了位置（行）

grid(線)

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>grid(グリッド線)について</title>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <div class="grid-line-container">
      <div class="grid-item item1 apple-green">要素1</div>
      <div class="grid-item item2 turquoise-blue">要素2</div>
      <div class="grid-item item3 yamabuki">要素3</div>
      <div class="grid-item item4 apple-green">要素4</div>
    </div>
  </body>
</html>

/* グリッド県警 */
.grid-line-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
}
.grid-item {
  background-color: #4caf50;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  border: 1px solid #333;
}
.item1 {
  grid-column-start: 1; /* 列線1から開始 */
  grid-column-end: 3; /* 列線3で終了（2列分を占有） */
  grid-row-start: 1; /* 行線1から開始 */
  grid-row-end: 2; /* 行線2で終了（1行分を占有） */
}
.item2 {
  grid-column-start: 3; /* 列線3から開始 */
  grid-column-end: 5; /* 列線5で終了（2列分を占有） */
  grid-row-start: 1; /* 行線1から開始 */
  grid-row-end: 2; /* 行線2で終了（1行分を占有） */
}
.item3 {
  grid-column-start: 1; /* 列線1から開始 */
  grid-column-end: 2; /* 列線2で終了（1列分を占有） */
  grid-row-start: 2; /* 行線2から開始 */
  grid-row-end: 3; /* 行線3で終了（1行分を占有） */
}
.item4 {
  grid-column-start: 2; /* 列線2から開始 */
  grid-column-end: 5; /* 列線5で終了（3列分を占有） */
  grid-row-start: 2; /* 行線2から開始 */
  grid-row-end: 3; /* 行線3で終了（1行分を占有） */
}

/* 色指定 */
.apple-green {
  background-color: #bfdd9e;
}
.turquoise-blue {
  background-color: #56c1db;
}
.yamabuki {
  background-color: #f4af2b;
}

出力結果

要素1

要素2

要素3

要素4

エリア指定

grid-template-areas : グリッド内の領域に名前を付けて、それらの名前に基づいてアイテム配置

grid(エリア

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Grid(エリア指定)について</title>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <div class="grid-area-container">
      <div class="grid-area-item header">Header</div>
      <div class="grid-area-item sidebar">Sidebar</div>
      <div class="grid-area-item main">Main</div>
      <div class="grid-area-item footer">Footer</div>
    </div>
  </body>
</html>

/* グリッドコンテナの設定
  - grid-template-columns: 3つの列を指定。幅はそれぞれ1fr, 3fr, 1fr。
  - grid-template-rows: 3つの行を指定。高さはそれぞれauto, 1fr, auto。
  - grid-template-areas: グリッド領域の名前を指定。 */
.grid-area-container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  gap: 10px;
  height: 100vh;
}
/* グリッドアイテムの共通スタイル
  - background-color: 背景色を指定。
  - color: テキストの色を指定。
  - padding: 内側の余白を指定。
  - border-radius: 角を丸くする。
   - border: 枠線を指定。 */
.grid-area-item {
  background-color: #4caf50;
  color: white;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  border: 1px solid #333;
}
/* グリッドアイテムの配置
   - grid-area: グリッド領域の名前を指定して配置。 */
.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.main {
  grid-area: main;
}
.footer {
  grid-area: footer;
}

出力結果

Main