このようにカードのヘッダエリアを作る例
カードのヘッダ
カードの内容
つまづいたポイント
- .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 |
