実現したいこと
htmlで「お絵かきロジック」を表示したいと考えています
以下のような表示をしようと考えています
全体をgridスタイルを使って実現しようと考えています。
1行目のcssのスタイルの設定がどうすれば良いかわかりません
1行目のヒントがサンプルのように所定の位置に収まるようにかつ下寄せになって欲しいです。
別にgridスタイル以外でも実現できれば良いです。
ただし、個々のマスをクリックした時に、クリックイベントが発生するような仕組みは実現出来るような方法でお願いします。（マスをクリックすると■→□となるようなイベントを実装するので）
試したこと
css に
transform: rotate(90deg)
を設定したところ、文字列が90度回転することを確認しましたが、位置や寄せが思い通りになりません
実行結果
該当のソースコード
html
1<!DOCTYPE html>2<html lang="ja">3 <head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Dynamic Random Grid</title>7 <h1>お絵かきロジック</h1>8 <div class="grid-container"></div>9 <style>10 .grid-container {11 display: grid;12 gap: 1px;13 grid-template-columns: auto repeat(var(--numCols), var(--cellSize));14 grid-template-rows: auto repeat(var(--numRows), var(--cellSize));15 width: fit-content;16 height: fit-content;17 }18 19 .v-hint {20 color: blue;21 transform: rotate(90deg); /* テキストを左90度回転 */22 transform-origin: top; /* 回転の基準点を指定 */23 white-space: nowrap; /* テキストが折り返されないようにする */24 border: 1px solid #000;25 text-align: right; /* 文字列を下寄せする */26 vertical-align: bottom; /* 文字列を左寄せする */27 height: fit-content;28 }29 30 .h-hint {31 height: var(--cellSize);32 color: red;33 align-items: center;34 justify-content: center;35 border: 1px solid #000;36 }37 38 .cell {39 width: var(--cellSize);40 height: var(--cellSize);41 display: flex;42 align-items: center;43 justify-content: center;44 border: 1px solid #000;45 }46 </style>47 </head>48 <body>49 <script>50 function generateRandomGrid() {51 // 行数と列数を動的に変更52 const numRows = 6;53 const numCols = 5;54 const cellSize = '20px';55 document.documentElement.style.setProperty('--cellSize', cellSize);56 document.documentElement.style.setProperty('--numCols', numCols - 1);57 document.documentElement.style.setProperty('--numRows', numRows - 1);58 59 const gridContainer = document.querySelector('.grid-container');60 gridContainer.innerHTML = ''; // グリッドをクリア61 62 for (let row = 0; row < numRows; row++) {63 for (let col = 0; col < numCols; col++) {64 const cell = document.createElement('div');65 if (row === 0 && col === 0) {66 cell.innerText = col.toString().repeat(col);67 } else if (row === 0 && col !== 0) {68 //縦ヒントクラスを適用69 cell.classList.add('v-hint');70 cell.innerText = col.toString().repeat(col);71 } else if (row !== 0 && col === 0) {72 //横ヒントクラスを適用73 cell.classList.add('h-hint');74 cell.innerText = row.toString().repeat(row);75 } else {76 cell.classList.add('cell');77 cell.innerText = '■';78 }79 gridContainer.appendChild(cell);80 }81 }82 }83 84 // 初回のグリッド生成85 generateRandomGrid();86 </script>87 </body>88</html>
0 コメント