Photo by
peishum
プログラミングを勉強します47日目：200509
前回までの振り返り
■前回の外部設計
https://note.com/daichan_dream/n/n09f74decd548
■前回の内部設計
https://note.com/daichan_dream/n/n09f74decd548
■アウトプットイメージ
https://note.com/daichan_dream/n/n2ab044382c9b
昨日はスプレットシートの内容をネットに公開するにあたり
CSSで加工してみることに挑戦したのがうまくいきませんでした。
今日はこれの続きに挑戦します。
■Google Apps ScriptのWebアプリケーションにCSSでスタイル設定をする
https://tonari-it.com/gas-html-css/#toc1
よくわかなくなったので冷静になるためにもう1度0からにして
コードを貼り付けていきました。すると簡単にできてしまいました。
よくある簡単な入力漏れや改行ミスがあったのだと思います。
使用したコードを記載しておきます。
といっても、もともと公開されているものを写経しただけですがね。
■GAS
function doGet() {
return HtmlService.createTemplateFromFile("index").evaluate();
}■HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<base target="_top">
<?!= include('css'); ?>
</head>
<body>
<section id="header">
<h1>Google Apps ScriptでCSSを設定する</h1>
</section><!-- #header -->
<section id="contents">
<h2>見出し１</h2>
こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
<ul class="products">
<li>
説明です。説明です。説明です。説明です。説明です。説明です。説明です。説明です。説明です。
</li>
<li>
説明です。説明です。説明です。説明です。説明です。説明です。説明です。説明です。説明です。</p>
</li>
<li>
<p>説明です。説明です。説明です。説明です。説明です。説明です。説明です。説明です。説明です。</p>
</li>
</ul>
<h2>見出し２</h2>
<h3>小見出し2-1</h3>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
<h3>小見出し2-2</h3>
こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
</section><!-- #contents -->
<section id="footer">Copyright(c)Plannauts inc.</section>
</body>■CSS
<style>
body{
font-family:Verdana,Arial;
font-size:14px;
}
#header{
margin-bottom:15px;
border-bottom: 1px solid #ccc;
}
#contents{
}
#footer{
font-size:12px;
color:#ccc;
text-align:center;
border-top:1px solid #ccc;
padding:10px 0 20px;
}
h2,h3{
font-size:bold;
}
h2{
font-size:16px;
border-left:5px solid #ccc;
padding:3px 0 3px 10px;
margin-bottom:10px;
}
h3{
border-bottom:1px solid #ccc;
padding:3px 0;
margin-bottom:10px;
}
p{
margin-bottom:14px;
}
</style>とりあえず今日の目標にしていたGASの内部でCSSを動かすことができるは
達成できました。また小さな一歩が進みました。
そしたら明日はまずはインプット形式の表をまずWEB上に
公開できるようにしていきます。