今回設定したスタイル
.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のスタイルを設定 |
