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なし
flexあり
grid
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
アイテムを水平方向または垂直方向に並べることができます。
<!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-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;
}
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;
}
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-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;
}
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;
}
フレーム指定
フレーム(fr)は、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;
}
リピート指定
リピート(repeat)は、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 lines)とは、グリッドアイテムを配置するための仮想的な線のことです。
<!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;
}
エリア指定
<!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;
}