設定UIを作りたい。
アプリ作成を進めていくと、具体的な機能を設定するためのUIが作りたくなる。
往々にして、それらは「テーブル形式」になっているのに気づく。
たとえば、こんな感じ。
■環境設定
■数値テーブル
■数値パッド
■Key・Valueペア
■ポップアップ
「テーブル形式」を表すには、TABLEタグと関連タグを使用すると、Geminiに教えてもらった。
TABLEタグ・TRタグ・TDタグ
TABLEタグの中にTRタグを内包し、TRタグの中にTDタグを内包する形式でHTMLを構成していく。
| タグ | 役割 |
|---|---|
| TABLE | テーブル全体を表す |
| TR | 「行」を表す |
| TD | 「列・セル」を表す |
これらのタグはコンテナとして機能するらしく、実際の操作対象は、TDタグにINPUTタグ等を内包するようにしていく。
TABLEタグの構成要素は、これ以外に、TBODYタグ、THタグがあるらしいが、必須でないらしく扱わないことにした。
テーブル構成例
例であげた「環境設定」をHTMLで構成してみた、一部省略。
<table class=",,," id=",,,">
<tr class=",,,">
<td>
<input type="text" class="..." value="ぷよクエ" placeholder="ゲーム名">
</td>
<td>
<input type="text" class="..." value="5" placeholder="編成数">
</td>
<td>
<div class="..."></div>
</td>
<td>
<input type="text" class="..." value="3" placeholder="コンボ数" title="NSコンボ数">
</td>
<td>
<input type="text" class="..." value="3100,4000,5000" placeholder="NSコンボ加点" title="NSコンボ加点">
</td>
<td>
<div class="..."></div>
</td>
<td>
<input type="text" class="..." value="4" placeholder="コンボ数" title="GMコンボ数">
</td>
<td>
<input type="text" class="..." value="30000,40000,50000" placeholder="GMコンボ加点" title="GMコンボ加点">
</td>
</tr>
</table>
テーブルにスクロールバーをつけるには。
テーブルにスクロールバーをつけるには、TABLEタグを内包するようにDIVタグのようなコンテナタグを用意する必要があるとのこと。
こんな感じ。
<div class="table">
<table class="table">
...
</table>
</div>
そして、CSSを指定する。
.table {
width: 100%; /* テーブル全体を親要素いっぱいに広げる */
table-layout: fixed; /* td の％指定を絶対にする */
overflow-y: auto;
}
要するに、コンテナ（DIV）が見えている範囲を表し、TABLEが表全体を表す感じ。
※「overflow-y」を指定すると、「縦スクロールバー」が付きます。
※「overflow-x」を指定すると、「横スクロールバー」が付きます。
次回は、TABLEをクラスで表現してみる。
UIを作るたびに、HTMLとしての文字列を作るのは、ちょっとナンセンスに感じた。
クラスで表現したいと思う。