bootstrap を使った
行数が 7,
列数が 7
の一つ一つのセルが正方形の
htmlのサンプルを作成していただけないでしょうか？
以下は、Bootstrapを使用して、行数が7、列数が7のグリッドを作成し、
一つ一つのセルが正方形になるHTMLのサンプルコードです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>7x7 Grid</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
}
.grid-item {
background-color: #f8f9fa;
border: 1px solid #dee2e6;
aspect-ratio: 1 / 1; /* Ensures squares */
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="container my-4">
<h1 class="text-center">7x7 Grid</h1>
<div class="grid-container">
<!-- 7x7 Grid Items -->
<!-- Each row contains 7 items -->
<!-- Total 49 items -->
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
<div class="grid-item">11</div>
<div class="grid-item">12</div>
<div class="grid-item">13</div>
<div class="grid-item">14</div>
<div class="grid-item">15</div>
<div class="grid-item">16</div>
<div class="grid-item">17</div>
<div class="grid-item">18</div>
<div class="grid-item">19</div>
<div class="grid-item">20</div>
<div class="grid-item">21</div>
<div class="grid-item">22</div>
<div class="grid-item">23</div>
<div class="grid-item">24</div>
<div class="grid-item">25</div>
<div class="grid-item">26</div>
<div class="grid-item">27</div>
<div class="grid-item">28</div>
<div class="grid-item">29</div>
<div class="grid-item">30</div>
<div class="grid-item">31</div>
<div class="grid-item">32</div>
<div class="grid-item">33</div>
<div class="grid-item">34</div>
<div class="grid-item">35</div>
<div class="grid-item">36</div>
<div class="grid-item">37</div>
<div class="grid-item">38</div>
<div class="grid-item">39</div>
<div class="grid-item">40</div>
<div class="grid-item">41</div>
<div class="grid-item">42</div>
<div class="grid-item">43</div>
<div class="grid-item">44</div>
<div class="grid-item">45</div>
<div class="grid-item">46</div>
<div class="grid-item">47</div>
<div class="grid-item">48</div>
<div class="grid-item">49</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
このコードは、7x7の正方形グリッドを作成します。
それぞれのセルには番号が付いており、
`aspect-ratio`プロパティを使用してセルが正方形になるようにしています。
質問やカスタマイズの希望があればお知らせください！
コメント
コメントを投稿