GAS x HtmlでWebアプリを作ってみよう② CSSでスタイリング

2023年8月1日

YouTube検索Webアプリ作成の2回目です。
前回は検索ワード入力ページをindex.htmlで作成・デプロイし、ブラウザ表示までできました。
ただ、コンテンツが左に寄りすぎているので、今回は完成イメージのようにCSSを当ててスタイルを整えていきましょう。

1. containerクラスを作る
2. css.htmlファイルを用意する
3. cssをindex.htmlに反映させるには
4. シリーズ目次：GAS x HtmlでWebアプリを作ってみよう

containerクラスを作る

まずはindex.htmlを開きます。
h1からformダグまでを新たにdivタグで囲みます。
そのdivタグにクラス属性を与え、クラス名を「container」とします。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <div class="container">
      <h1>YouTube 検索</h1>
      <p>検索ワードを入力して、検索ボタンを押してください。</p>
      <p>関連動画25件のタイトル、リンク、再生数、いいね数が取得できます。</p>
      <form>
        <input type="text">
        <button type="submit">検索</button>
      </form>
    </div>
  </body>
</html>

css.htmlファイルを用意する

次に、新規でhtmlファイルを追加し、ファイル名を「css」とします。
デフォルト記載のコードは消して、図のようにcontainerクラスのスタイルを定義します。
cssファイルではなく、htmlファイルにcssコードを書くのがGASの特徴ですね。

<style>
  .container {
    max-width: 1000px;
    margin: auto;
    padding: 10px 30px 50px;
    background-color: #f5f5f5;
  }
</style>

cssをindex.htmlに反映させるには

最後に、index.htmlのheadタグ内に <?!= HtmlService.createHtmlOutputFromFile('css’).getContent(); ?> の1行を加えれば、cssをindex.htmlファイルに反映させることができます。
ちなみに、<?!= ?>はスクリプトレットタグと言って、このタグ内にGASのスクリプトを記述することが可能です。
ここまで記述できたら、再び新しいデプロイを実行し、URLをクリックしてみましょう。