LANG SELRCT

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

2018年3月8日木曜日

CSSでカードのヘッダを作りたい


このようにカードのヘッダエリアを作る例

カードのヘッダ
カードの内容


つまづいたポイント

  • .cardの中でpaddingを使うとヘッダもpaddingの対象になる
  • .card_headerの中でwidthを使うとcardからはみ出してしまう


対策

  • 一番外側の.cardの中ではpaddingは使わず
  • ヘッダ.card_headerの中ではwidthを使わず
  • カードの内容.contentの中でpaddingを使う




コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<head>
  <style>
    .card {
      width: 360px;
      height: 120px;
      border-radius: 2px;
      border: solid 1px lightgray;
      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    }

    .card_header {
      color: white;
      font-weight: bold;
      background-color: deepskyblue;
      padding: 15px;
    }

    .content {
      padding: 15px;
    }
  </style>
</head>
<body>
    <div class="card">
      <div class="card_header">カードのヘッダ</div>
      <div class="content">カードの内容</div>
    </div>
</body>
</html>
意訳
 



cardのスタイル
幅
高さ
角丸
枠線
影


card_headerのスタイル
文字色
太文字
背景色
余白


paddingのスタイル
余白




カードのdiv
カードのヘッダのdiv
カードの内容のdiv