基本的には、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>ボタン２</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>
