LANG SELRCT

コードを書く場所についてはこちら

2018年5月26日土曜日

スタイルを複数設定するときの備忘録


今回設定したスタイル


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