【GAS】天気予報を表示するアプリを作る～HTMLにCSSを追記～【第6回】

2022/06/24

前回は、テーブルに天気予報を入れて整列して表示させました。今回は、テーブルをもっと見やすくするために、CSSで線を書きます。

CSSを追記

今回はCSSを追記します。と言っても普通に追記するのではありません。GASでは、CSSファイルを作成できないので、HTMLファイルを別に作り、その中にCSSを書いて表示したいHTMLファイルにインポートします。ですので、今回はgsファイルはお休みです。

HTML

新規にCSSを書き込むHTMLファイルを作成します。名前はわかりやすくcss.htmlにしました。今回は、線を引くだけのcssですが、テーブルに交互に背景色を設定して見やすくすることも可能です。

css
<style>
table , td, th {
	border: 1px solid #595959;
	border-collapse: collapse;
}
td, th {
	padding: 3px;
	height: 25px;
}
</style>

インポートする側のHTMLには<head>タグ内に追記をしましょう。「<?!= HtmlService.createHtmlOutputFromFile('css’).getContent(); ?>」を書き込みます。

weathers
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
  </head>
  <body>
   …

実行結果

実行して地域を選んだあとの表示画面で、線が引けていたらOKです。

実行結果
実行結果

最後に

今回は、CSS専用のHTMLファイルを作ってCSSを追記しました。CSSが長くなってしまう場合に、分けておくと作業が楽になると思います。

次回は、今のままではとても見づらい日付を整理したいと思います。

詳解！ Google Apps Script完全入門 [第3版]

Amazon
楽天
Google Apps Script目的別リファレンス 実践サンプルコード付き

Amazon
楽天

【GAS】天気予報を表示するアプリを作る～目次～

PC,GASGoogle,Google Apps Script,API,天気予報アプリ

Posted by pyonnyan