Google Apps ScriptのCSS
Google Appsとは…
Google Appsとは、Google社が提供しているパブリッククラウド型のサービスのことです。
Google Appsを導入することにより、
Gmailやハングアウト、スプレッドシートなどのドキュメントの共有(管理や編集)だけでなく、スケジュール共有(Googleカレンダー)といったサービスによる情報共有ができるようになります。
またGoogle Appsを使用することにより、IT コストを削減できるだけでなく生産性を高めることができます。これらのGoogle Appsを使ったことがないという方は少ないのではないでしょうか。
Google Apps Script (GAS)とは…
Google Apps Scriptは頭文字をとって「GAS(ガス)」と略されます。
また、Google Apps Scriptは無料で利用できます。
Google Apps Scriptとは、GmailやGoogleカレンダー、Googleドライブなど、Googleが提供しているさまざまなツールやサービスを連携して利用するためにGoogleが開発し、提供しているJavaScript ベースのプログラミング言語です。ただし、開発環境の構築が必要なく、Googleアカウントとインターネット環境さえあれば利用できます。
JavaScriptというのは、Webブラウザ上で動作するプログラミング言語で、Webサービスを作ろうと思ったときには避けては通ることができない言語ですので、ある程度の学習が必要になります。ただし、JavaScriptはエンジニアにとってはポピュラーな言語なので学習コストは多少低いのではないでしょうか。
Google Apps Scripを使えば、カスタムのメニューやダイアログ、サイドバーを Google ドキュメント、スプレッドシート、フォームに追加することができますし、GmailやGoogleカレンダなどのGoogleが提供しているさまざまなサービスと連携して活用することができます。
例えば、GoogleスプレッドシートやGoogleドキュメントなどの操作を自動化して表やグラフを作成することや、決まったフォーマットにドキュメントを整理すること、ファイルの共有管理などができます。
また、Gmailに届いた添付ファイルをGoogleドライブに共有する場合にも、ファイルを自動で共有フォルダにアップロードするように設定できますし、メールの自動送信や返信もできます。
他にもHTML・CSSによってWebページを作成することができます!
しかも、先ほども書いた通り開発環境はGoogleが用意してくれているものを使えるので個別で構築する必要がなく、簡単にWebページを公開することができるのです。
今回はこちらのGoogle Apps ScriptのCSSについて紹介していきたいと思います。
CSSでスタイルする方法
念のため書いておくと、HTMLだけでもimgタグやh1タグ、pタグなどを使って文字の大きさなどを変えることができます。例えば、フォントのサイズを大きくして、かつ太字にしたい場合に使えるspanタグもあります。
ただし、このようなタグばかりでは見栄えに限界があります。この記事もHTMLのタグを使って書いていますが、CSSは使っていないので見栄えは良くないでしょう。すみません…
さて、そこで活躍するのがCSSです。
CSSとは「Cascading Style Sheets」の略で、HTMLの要素に色を付けたり、サイズやレイアウトを変えたり、その他にも様々なスタイルを指定するための言語です。
つまり、スタイルを変更したい要素に対して、どのスタイルで、どのように変更するかを指定して、見栄えを良くしていくというものです。
CSSはHTMLファイルのheadタグ内にstyleタグを用意し、その中に記述をします。
セレクタ { (⇦ セレクタ:どこにスタイルを適応するか)
プロパティ1: ◯◯; (⇦ プロパティ:スタイルの種類)
プロパティ2: △△; (⇦ ◯◯、△△:スタイルに指定したい内容)
}
</style>
ここで気をつける点を挙げておきます。h2やpなどそれぞれのタグは何度も出てくるので、セレクタで単にh2と書くと全てのh2タグの部分に変更がかかってしまいます。
よってそれぞれに、「id属性」(あるid名は1つのHTML内で1つの要素のみ)、もしくは「class属性」(同じclass名を複数の要素につけられる)を与えます。
color: orange;
font-size:15px; (⇦文字のサイズが15px)
}
----------
.class名 { (⇦「.」に続いてclass名を指定)
color: orange;
border-bottom: 1px solid #ccc; (⇦ボーダーのスタイル・太さ・色を指定)
}
----------
p{ (⇦特に指定なしの場合)
color: gray;
margin-bottom:14px; (⇦下マージンを指定。マージンとは要素の外側の余白のこと)
}
最後に
簡単な内容でしたが、今回はGoogle Apps ScriptのCSSについて紹介しました。 CSSはもっと様々なことができます。興味を持ったなら、ぜひともCSSについて学習してみてください。とても面白いですよ!