Skip to content

Commit 17f985c

Browse files
nakatermnakaterm
committed
演習問題を追加し構成を変更
1 parent 805b494 commit 17f985c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+752
-102
lines changed

‎docs/2-browser-apps/05-css-layout/_samples/align-items/index.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!doctype html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>料金プラン</title>
6+
<link rel="stylesheet" href="./style.css" />
7+
</head>
8+
<body>
9+
<div id="container">
10+
<div class="card">
11+
<div class="card-header">
12+
<div class="plan">Free</div>
13+
<a href="" class="info">詳細</a>
14+
</div>
15+
<div class="price">無料</div>
16+
<button type="button" class="button">今すぐ始める</button>
17+
<ul>
18+
<li>基本的な機能</li>
19+
</ul>
20+
</div>
21+
<div class="card">
22+
<div class="card-header">
23+
<div class="plan">Basic</div>
24+
<a href="" class="info">詳細</a>
25+
</div>
26+
<div class="price">$5</div>
27+
<button type="button" class="button">今すぐ始める</button>
28+
<ul>
29+
<li>基本的な機能</li>
30+
<li>AIアシスタントのサポート</li>
31+
<li>5GBのストレージ</li>
32+
</ul>
33+
</div>
34+
<div class="card">
35+
<div class="card-header">
36+
<div class="plan">Premium</div>
37+
<a href="" class="info">詳細</a>
38+
</div>
39+
<div class="price">$20</div>
40+
<button type="button" class="button">今すぐ始める</button>
41+
<ul>
42+
<li>全ての機能</li>
43+
<li>AIアシスタントのサポート</li>
44+
<li>20GBのストレージ</li>
45+
</ul>
46+
</div>
47+
</div>
48+
</body>
49+
</html>

‎docs/2-browser-apps/05-css-layout/_samples/align-items/style.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
body {
2+
background-color: #f0f0f0;
3+
}
4+
5+
#container {
6+
display: flex;
7+
justify-content: center;
8+
gap: 16px;
9+
}
10+
11+
.card {
12+
background-color: #fff;
13+
width: 240px;
14+
border: 1px solid #bbb;
15+
border-radius: 8px;
16+
padding: 24px;
17+
}
18+
19+
.card-header {
20+
display: flex;
21+
justify-content: space-between;
22+
align-items: center;
23+
}
24+
25+
.info {
26+
color: #0d6efd;
27+
}
28+
29+
.plan {
30+
font-weight: bold;
31+
font-size: 24px;
32+
}
33+
34+
.price {
35+
margin-top: 8px;
36+
font-size: 20px;
37+
}
38+
39+
.button {
40+
background-color: #0d6efd;
41+
color: #fff;
42+
font-size: 16px;
43+
width: 100%;
44+
border: none;
45+
border-radius: 8px;
46+
padding: 8px;
47+
margin-top: 16px;
48+
}

‎docs/2-browser-apps/05-css-layout/_samples/border-radius/index.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,17 @@
66
<link rel="stylesheet" href="./style.css" />
77
</head>
88
<body>
9-
<h1>料金プラン</h1>
109
<div id="container">
1110
<div class="card">
12-
<h2>Free</h2>
11+
<div class="plan">Free</div>
1312
<div class="price">無料</div>
1413
<button type="button" class="button">今すぐ始める</button>
1514
<ul>
1615
<li>基本的な機能</li>
1716
</ul>
1817
</div>
1918
<div class="card">
20-
<h2>Basic</h2>
19+
<div class="plan">Basic</div>
2120
<div class="price">$5</div>
2221
<button type="button" class="button">今すぐ始める</button>
2322
<ul>
@@ -27,7 +26,7 @@ <h2>Basic</h2>
2726
</ul>
2827
</div>
2928
<div class="card">
30-
<h2>Premium</h2>
29+
<div class="plan">Premium</div>
3130
<div class="price">$20</div>
3231
<button type="button" class="button">今すぐ始める</button>
3332
<ul>

‎docs/2-browser-apps/05-css-layout/_samples/border-radius/style.css‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,15 @@ body {
99
border-radius: 8px;
1010
}
1111

12-
.price {
12+
.plan {
13+
font-weight: bold;
1314
font-size: 24px;
1415
}
1516

17+
.price {
18+
font-size: 20px;
19+
}
20+
1621
.button {
1722
background-color: #0d6efd;
1823
color: #fff;

‎docs/2-browser-apps/05-css-layout/_samples/border/index.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,17 @@
66
<link rel="stylesheet" href="./style.css" />
77
</head>
88
<body>
9-
<h1>料金プラン</h1>
109
<div id="container">
1110
<div class="card">
12-
<h2>Free</h2>
11+
<div class="plan">Free</div>
1312
<div class="price">無料</div>
1413
<button type="button" class="button">今すぐ始める</button>
1514
<ul>
1615
<li>基本的な機能</li>
1716
</ul>
1817
</div>
1918
<div class="card">
20-
<h2>Basic</h2>
19+
<div class="plan">Basic</div>
2120
<div class="price">$5</div>
2221
<button type="button" class="button">今すぐ始める</button>
2322
<ul>
@@ -27,7 +26,7 @@ <h2>Basic</h2>
2726
</ul>
2827
</div>
2928
<div class="card">
30-
<h2>Premium</h2>
29+
<div class="plan">Premium</div>
3130
<div class="price">$20</div>
3231
<button type="button" class="button">今すぐ始める</button>
3332
<ul>

‎docs/2-browser-apps/05-css-layout/_samples/border/style.css‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,15 @@ body {
88
border: 1px solid #bbb;
99
}
1010

11-
.price {
11+
.plan {
12+
font-weight: bold;
1213
font-size: 24px;
1314
}
1415

16+
.price {
17+
font-size: 20px;
18+
}
19+
1520
.button {
1621
background-color: #0d6efd;
1722
color: #fff;

‎docs/2-browser-apps/05-css-layout/_samples/flexbox/index.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,17 @@
66
<link rel="stylesheet" href="./style.css" />
77
</head>
88
<body>
9-
<h1>料金プラン</h1>
109
<div id="container">
1110
<div class="card">
12-
<h2>Free</h2>
11+
<div class="plan">Free</div>
1312
<div class="price">無料</div>
1413
<button type="button" class="button">今すぐ始める</button>
1514
<ul>
1615
<li>基本的な機能</li>
1716
</ul>
1817
</div>
1918
<div class="card">
20-
<h2>Basic</h2>
19+
<div class="plan">Basic</div>
2120
<div class="price">$5</div>
2221
<button type="button" class="button">今すぐ始める</button>
2322
<ul>
@@ -27,7 +26,7 @@ <h2>Basic</h2>
2726
</ul>
2827
</div>
2928
<div class="card">
30-
<h2>Premium</h2>
29+
<div class="plan">Premium</div>
3130
<div class="price">$20</div>
3231
<button type="button" class="button">今すぐ始める</button>
3332
<ul>

‎docs/2-browser-apps/05-css-layout/_samples/flexbox/style.css‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,33 @@ body {
44

55
#container {
66
display: flex;
7+
gap: 16px;
78
}
89

910
.card {
1011
background-color: #fff;
1112
width: 240px;
1213
border: 1px solid #bbb;
1314
border-radius: 8px;
14-
padding: 16px;
15-
margin: 16px;
15+
padding: 24px;
1616
}
1717

18-
.price {
18+
.plan {
19+
font-weight: bold;
1920
font-size: 24px;
2021
}
2122

23+
.price {
24+
font-size: 20px;
25+
}
26+
2227
.button {
2328
background-color: #0d6efd;
2429
color: #fff;
2530
font-size: 16px;
2631
width: 100%;
2732
border: none;
2833
border-radius: 8px;
29-
padding: 12px;
34+
padding: 8px;
3035
margin-top: 16px;
3136
}

‎docs/2-browser-apps/05-css-layout/_samples/justify-content/index.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!doctype html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>料金プラン</title>
6+
<link rel="stylesheet" href="./style.css" />
7+
</head>
8+
<body>
9+
<div id="container">
10+
<div class="card">
11+
<div class="plan">Free</div>
12+
<div class="price">無料</div>
13+
<button type="button" class="button">今すぐ始める</button>
14+
<ul>
15+
<li>基本的な機能</li>
16+
</ul>
17+
</div>
18+
<div class="card">
19+
<div class="plan">Basic</div>
20+
<div class="price">$5</div>
21+
<button type="button" class="button">今すぐ始める</button>
22+
<ul>
23+
<li>基本的な機能</li>
24+
<li>AIアシスタントのサポート</li>
25+
<li>5GBのストレージ</li>
26+
</ul>
27+
</div>
28+
<div class="card">
29+
<div class="plan">Premium</div>
30+
<div class="price">$20</div>
31+
<button type="button" class="button">今すぐ始める</button>
32+
<ul>
33+
<li>全ての機能</li>
34+
<li>AIアシスタントのサポート</li>
35+
<li>20GBのストレージ</li>
36+
</ul>
37+
</div>
38+
</div>
39+
</body>
40+
</html>

‎docs/2-browser-apps/05-css-layout/_samples/justify-content/style.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
body {
2+
background-color: #f0f0f0;
3+
}
4+
5+
#container {
6+
display: flex;
7+
justify-content: center;
8+
gap: 16px;
9+
}
10+
11+
.card {
12+
background-color: #fff;
13+
width: 240px;
14+
border: 1px solid #bbb;
15+
border-radius: 8px;
16+
padding: 24px;
17+
}
18+
19+
.plan {
20+
font-weight: bold;
21+
font-size: 24px;
22+
}
23+
24+
.price {
25+
font-size: 20px;
26+
}
27+
28+
.button {
29+
background-color: #0d6efd;
30+
color: #fff;
31+
font-size: 16px;
32+
width: 100%;
33+
border: none;
34+
border-radius: 8px;
35+
padding: 8px;
36+
margin-top: 16px;
37+
}

0 commit comments

Comments
 (0)