commit 107e7263ef30d9bfed969d75cca01f9a7d6e25ec
parent 00dd942b2a8d3a0c058170c14d9ce994663b5d84
Author: Matsuda Kenji <info@mtkn.jp>
Date: Sat, 28 Feb 2026 12:44:28 +0900
add flexbox and grid example
Diffstat:
3 files changed, 84 insertions(+), 0 deletions(-)
diff --git a/content/computer/web_design/_index.html b/content/computer/web_design/_index.html
@@ -11,3 +11,8 @@ title = 'ウェブデザイン'
<iframe src="navbar.html" title="navbar"></iframe>
</div>
<a href="navbar.html">ページ</a>
+
+<div class="resizer">
+ <iframe src="card.html" title="card"></iframe>
+</div>
+<a href="card.html">ページ</a>
diff --git a/content/computer/web_design/card.html b/content/computer/web_design/card.html
@@ -0,0 +1,78 @@
++++
+date = '2026-02-28T12:14:56+09:00'
+draft = false
+title = 'Card'
++++
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Navbar</title>
+<style>
+body {
+ background-color: #777777;
+}
+.grid-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 1rem;
+ justify-items: center;
+}
+.card {
+ border: solid #a1f7f7 3px;
+ background-color: #ffffea;
+ padding: 1rem;
+ display: flex;
+ flex-direction: column;
+ width: 80%;
+}
+.card img {
+ width: 100%;
+}
+.card .description {
+ flex-grow: 1;
+}
+.card .link {
+ align-self: end;
+}
+</style>
+</head>
+<body>
+<h1>Card</h1>
+<div class="grid-container">
+ <div class="card">
+ <h2>item</h2>
+ <img src="#" width="200px" height="141px"></img>
+ <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ <a class="link" href="#">read more</a>
+ </div>
+ <div class="card">
+ <h2>item</h2>
+ <img src="#" width="200px" height="141px"></img>
+ <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu.
+ </p>
+ <a class="link" href="#">read more</a>
+ </div>
+ <div class="card">
+ <h2>item</h2>
+ <img src="#" width="200px" height="141px"></img>
+ <p class="description">Lorem ipsum dolor sit amet.
+ </p>
+ <a class="link" href="#">read more</a>
+ </div>
+ <div class="card">
+ <h2>item</h2>
+ <img src="#" width="200px" height="141px"></img>
+ <p class="description">Lorem.
+ </p>
+ <a class="link" href="#">read more</a>
+ </div>
+ <div class="card">
+ <h2>item</h2>
+ <img src="#" width="200px" height="141px"></img>
+ <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ <a class="link" href="#">read more</a>
+ </div>
+</div>
+</body>
diff --git a/content/computer/web_design/style.css b/content/computer/web_design/style.css
@@ -3,6 +3,7 @@
display: flex;
overflow: hidden;
resize: both;
+ height: 500px;
}
.resizer > * {
