LANG SELRCT

コードを書く場所についてはこちら

2018年3月9日金曜日

ラジオボタンを均等に配置したい float, table, flexbox


ラジオボタンやチェックボックスなどを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
ラベルとラジオボタンを配置