ラジオボタンやチェックボックスなどをdiv内で均等に並べる例です
以下の3つのパターンでそれぞれ.htmlを書いてみました
- float
- table
- flexbox
このように表示したい（この例はfloatを使ったもの）
コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
|
意訳この機能がやること 指定したHTMLファイルを表示する |
floatでやる場合
index.html
<html>
<body>
<head>
<style>
.border_solid {
width: 480px;
height: 120px;
border: solid 1px lightgray;
}
.border_solid label {
display: block;
float: left;
width: 240px;
}
</style>
</head>
<div class="border_solid">
<label><input type="radio" name="group1">HTML</label>
<label><input type="radio" name="group1">CSS</label>
<label><input type="radio" name="group1">JavaScript</label>
<label><input type="radio" name="group1">Google Apps Script</label>
<label><input type="radio" name="group1">Chrome Extensions</label>
<label><input type="radio" name="group1">正規表現</label>
<label><input type="radio" name="group1">API</label>
</div>
</body>
</html>
|
意訳border_solidのスタイル 幅 高さ 枠線 border_solidの中のlabelのスタイル ブロック要素にする 回り込み 幅 外枠div ラベルとラジオボタンを配置 |
tableでやる場合
index.html<html>
<body>
<head>
<style>
.border_solid {
width: 480px;
height: 120px;
border: solid 1px lightgray;
}
.border_solid label {
width: 240px;
}
</style>
</head>
<table class="border_solid">
<tbody>
<tr>
<td><label><input type="radio" name="group1">HTML</label></td>
<td><label><input type="radio" name="group1">CSS</label></td>
</tr>
<tr>
<td><label><input type="radio" name="group1">JavaScript</label></td>
<td><label><input type="radio" name="group1">Google Apps Script</label></td>
</tr>
<tr>
<td><label><input type="radio" name="group1">Chrome Extensions</label></td>
<td><label><input type="radio" name="group1">正規表現</label></td>
</tr>
<tr>
<td><label><input type="radio" name="group1">API</label></td>
</tr>
</tbody>
</table>
</body>
</html>
| 意訳border_solidのスタイル 幅 高さ 枠線 border_solidの中のlabelのスタイル 幅 tableを配置する |
flexboxでやる場合
index.html<html>
<body>
<head>
<style>
.border_solid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 480px;
height: 120px;
border: solid 1px lightgray;
}
.border_solid label{
width: 240px;
}
</style>
</head>
<div class="border_solid">
<label><input type="radio" name="group1">HTML</label>
<label><input type="radio" name="group1">CSS</label>
<label><input type="radio" name="group1">JavaScript</label>
<label><input type="radio" name="group1">Google Apps Script</label>
<label><input type="radio" name="group1">Chrome Extensions</label>
<label><input type="radio" name="group1">正規表現</label>
<label><input type="radio" name="group1">API</label>
</div>
</body>
</html>
| 意訳border_solidのスタイル flexで表示する 横方向に 折り返す 幅 高さ 枠線 border_solidの中のlabelのスタイル 幅 外枠div ラベルとラジオボタンを配置 |
