GASで作ったWebページにCSSでスタイルをする最初の一歩


color

photo credit: Dean Hochman ping pong balls via photopin (license)

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

GASユーザー向けのHTML入門ということで、GASによる簡単なWebページの作り方をお伝えしています。

前回の記事はコチラです。

GASのWebページにGoogleドライブ内の画像を挿入する方法
GASユーザー向けHTML入門ということで簡単なWebページの作り方をお伝えしています。今回は、Google Apps ScriptによるWebページにGoogleドライブ内の画像を挿入する方法です。

GASのWebページ内にGoogleドライブにある画像を挿入する方法をお伝えしました。

今回のお題はスタイル、そうCSSです。

では、GASで作ったWebページにCSSでスタイルをする最初の一歩についてお伝えしていいます。

では、行ってみましょう!

前回のおさらい

まずは前回のおさらいからです。

以下のようなHTMLファイル

さあ、このHTMLファイルをもとにWebページを表示してみましょう!

GASで作ったスタイル前のWebページ

…寂しい。

そうなんです、見栄えがシンプル過ぎですよね。

この見栄えをなんとかするのがCSSの役割となります。

CSSとは

CSSとはCascading Style Sheetsの略で、HTMLの要素に色、サイズ、レイアウト、その他様々なスタイルを指定するための言語です。

スタイルを変更したい要素に、どのスタイルを、どのように変更するかを指定することで、好みの見栄えにしていくことができます。

CSSの記述する場所

それで、スタイルを指定するCSSをどこに記述するかというと、HTMLファイルのheadタグ内に以下のようなstyleタグを用意して、その中にCSSを記述をします。

<style>
 CSS
</style>

bodyタグ内ではなくて、headタグ内に記述するんですね。

CSSの記述の基本

CSSの記述は以下が基本になります。

セレクタ {
 プロパティ1: 値1;
 プロパティ2: 値2;
 …
}

なんか、いろいろと指定することが多そうですね…CSSは「どこに」「何を」「どうする」の3点セットです。

  • セレクタ:スタイルを適用する要素を指定「どこに?」
  • プロパティ:スタイルの種類「何を?」
  • :スタイルに指定したい内容「どうする?」

以降、いくつかのパターンについて見ていきましょう。

指定のタグにスタイルを付与する

セレクタの指定の仕方は、かなりいろいろとあるのですが、最もシンプルなパターンは特定のタグ要素にスタイルを指定するという方法です。

CSSの記述としては、以下のようになりますね。

タグ {
 プロパティ1: 値1;
 プロパティ2: 値2;
 …
}

例えば、以下のようなCSSです。

プロパティと値については説明していませんが、これならなんとなく予想つきますね。

  • h2タグの文字色をオレンジに、フォントサイズをそこそこ大きく
  • pタグの文字色をグレーに、フォントサイズを小さく

実際に表示すると、以下のようになります。

CSSでスタイルしたGASのWebページ

h2のフォントサイズはCSS前の指定前と一緒ですね。もともとが「x-large」だったんですね。

その他は変更が確認できています。

まとめ

以上、GASで作成したWebページにCSSでスタイルを設定する方法についてお伝えしました。

CSSとは何か、また指定のタグへのスタイルの設定についておわかりいただけたかと思います。

まとめのHTMLソースはこちらです。

さて、次回ですが、この続きとしてCSSを特定の要素だけに指定する方法についてお伝えします。

【GASユーザーのためのHTML入門】好きな要素にだけCSSでスタイルを適用する
GASユーザーのためのHTML講座ということで、簡単なWebページの作り方を解説しています。今回はGASのWebページにid属性、class属性を使ってCSSのスタイルを好きな要素にだけ適用する方法です。

どうぞお楽しみに!

連載目次:GASユーザーのための初めてのHTML・CSS講座

Google Apps ScriptではHTML・CSSを使ってWebページを作成し、公開することもできます。本シリーズでは、HTMLやCSSの全くの初心者が、GAS環境を利用してその基本的な知識を身に着けられるようにお手伝いしますよ!
  1. Google Apps Scriptで最も簡単なWebページを作成して公開する
  2. GASでWebページを表示するdoGet関数のスクリプトについて丁寧に解説
  3. GASで作成した最も簡単なWebページのHTMLコードについて丁寧に解説
  4. 【GASユーザーのためのHTML入門】よく使う基本のHTMLタグを紹介します
  5. 【GASユーザーのためのHTML入門】アンカーリンクを張るaタグの書き方
  6. GASのWebページにGoogleドライブ内の画像を挿入する方法
  7. GASで作ったWebページにCSSでスタイルをする最初の一歩
  8. 【GASユーザーのためのHTML入門】好きな要素にだけCSSでスタイルを適用する
  9. 【GASユーザーのためのHTML入門】範囲指定するだけの便利なdivタグとspanタグ
  10. GASでWebページを作るときにHTMLとCSSを別ファイルに記述する方法
  11. GASでWebページを作成する際にCSSフレームワークBootstrapを導入する方法
  12. GASのWebページのナビゲーションをBootstrapでスタイルする方法
  13. GASとBootstrapでWebページを超簡単にいい感じのレイアウトにする方法
  14. GASでWebページを作るときにページのタイトルを設定する方法
  15. GASで作成したWebページにファビコンを設定する方法
  16. GASで作成したWebページをスマホで表示させたいときのmetaタグviewportの設定

  投稿者プロフィール

タカハシノリアキ株式会社プランノーツ 代表取締役
株式会社プランノーツ代表、コミュニティ「ノンプロ研」主宰。1976年こどもの日生まれ。東京板橋区在住。「ITで日本の『働く』の価値を上げる!」をテーマに、VBA&GASの開発、講師、執筆などをしております。→詳しいプロフィールはコチラ
★ご依頼・ご相談はお気軽にどうぞ!→お問い合わせはコチラ
★フォロー頂ければ嬉しいです。

コメント