今回設定したスタイル
.blue が設定されていたら青文字
.bt が設定されていたら背景色は灰色
.blueか.btどちらかが設定されていたら太文字
.blueと.btの両方が設定されていたら背景色はピンク
.blue.bt
と書くとblueとbtの両方が設定されているときのスタイル
.blue, .bt
と書くとblueまたはbtのどちらかが設定されているときのスタイル(共通のスタイル)
と書くとblueとbtの両方が設定されているときのスタイル
.blue, .bt
と書くとblueまたはbtのどちらかが設定されているときのスタイル(共通のスタイル)
コード.gs
function doGet() { return HtmlService.createHtmlOutputFromFile("index"); } |
意訳この機能がやること 指定したHTMLファイルを表示する |
index.html
<!DOCTYPE html> <html> <head> <style> .blue { color: blue; } .bt { width: 60px; height: 30px; background-color: lightgrey; border: none; } .blue.bt { background-color: lightblue; } .blue, .bt { font-weight: bold; } </style> </head> <body> <label class="blue">ラベル</label> <button class="bt">ボタン</button> <button class="blue bt">ボタン</button> </body> </html> |
意訳blueのスタイル btのスタイル blueとbt両方が設定されているときのスタイル blueとbtに共通のスタイル ラベルにblueのスタイルを設定 ボタンにbtのスタイルを設定 ボタンにblueとbtのスタイルを設定 |