Bye Bye Moore

猫マンション建築の野望を胸に零細事業主として資本主義の荒波に漕ぎ出したアラサー男の技術メモ

GASの拡張をGoogle公式のCSSセットに合わせる

基本的には、Gsuiteさんで出してるCSSセットを読み込むだけ

    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">

実際のところ

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('Stylesheet'); ?>
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
  </head>
  <body>
  
  <div class="sidebar branding-below">
    <div class="block form-group">
      <label for="text">
        <b>テキストエリア</b></label>
      <textarea id="text" rows="2">
      </textarea>
    </div>
  
    <div class="block">
      <input type="checkbox" id="save-prefs">
      <label for="save-prefs">
        チェックボックス</label>
    </div>
    
      <p>List of things:</p>
    <ul id="data">
      <li>Loading...</li>
  </ul> 

  
   <div class="block">
      <button class="blue">ボタン</button>
      <button>ボタン2</button>
    </div>
  </div>
  
  <div class="sidebar bottom">
    <span class="gray">
      フッター</span>
  </div>
  </body>
</html>

<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
  google.script.run.withSuccessHandler(showThings)
      .getData();
});

function showThings(things) {
  var list = $('#data');
  list.empty();
  for (var i = 0; i < things.length; i++) {
    list.append('<li>' + things[i][i] + '</li>');
  }
}
</script>
<style>
p {
  color: green;
}
      
.branding-below {
  bottom: 56px;
  top: 0;
}

</style>

f:id:shuzo_kino:20180813235450p:plain


CSS Package for Add-ons  |  Apps Script  |  Google Developers