4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

GASでCSSを使用する

Last updated at Posted at 2022-07-28

概要

gasでWebアプリ開発をする際にCSS(外部ファイル)が適用されず少し悩んだところがあったので忘れないためにメモをしておく
(2022/07/29現在の内容です)

CSSを適用する

まず以下のようなファイルを作成します。
ファイル作成の仕方は「+」ボタンを押してhtmlファイルを選択し名前を入力します。

image.png

そして各ファイルに記述を行います。
注意してほしいのはコード.gasの内容
Googleなどで調べると以下のような記述があったりするが動かなかった。
恐らくだがこれは外部サイトにgasのプロジェクトの内容を出力したりする時に使うのではと思われる(違っていたらすみません)

  return HtmlService.createHtmlOutputFromFile('index');  

以下のように記述することで無事CSSが適用できた

function doGet() {
  return HtmlService.createTemplateFromFile("index").evaluate();
  // こっちだとCSSなどの外部ファイルが読み込めない
  // return HtmlService.createHtmlOutputFromFile('index');  
}

あとはそれぞれのファイルを記述していき
※CSSファイルので囲むのに注意

index.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= HtmlService.createHtmlOutputFromFile("css").getContent(); ?>
  </head>
  <body>
    <p class="text">Hello world</p>
    <?!= HtmlService.createHtmlOutputFromFile("js").getContent(); ?>
  </body>
</html>
css.html
<style>
  .text {
    color: red;
  }
</style>

これでCSSができようされた

4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?