CSSでカードのヘッダを作りたい で作ったヘッダ付きのカードをJavaScriptで作ってみる
コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
|
意訳
この機能がやること
指定したHTMLファイルを表示する
|
index.html
<!DOCTYPE html>
<html>
<head>
<style>
.card {
width: 360px;
min-height: 240px;
border-radius: 3px;
border: solid 1px lightgray;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
margin-bottom: 20px;
margin-right: 20px;
}
.card_header {
color: white;
font-weight: bold;
background-color: deepskyblue;
padding: 15px;
border-radius: 3px 3px 0px 0px
}
.card_content {
padding: 15px;
}
</style>
</head>
<body>
<div id="main_div"></div>
<script>
document.addEventListener('DOMContentLoaded', create_card());
function create_card() {
var parent_div = document.getElementById("main_div");
var card_div = create_card_div(parent_div);
var card_header = create_card_header(card_div);
var card_content = create_card_content(card_div);
}
function create_card_div(parent_div) {
var card_div = document.createElement("div");
card_div.setAttribute("class", "card");
parent_div.appendChild(card_div);
return card_div;
}
function create_card_header(card_div) {
var card_header = document.createElement("div");
card_header.setAttribute("class", "card_header");
card_header.textContent = "header";
card_div.appendChild(card_header);
}
function create_card_content(card_div) {
var card_content = document.createElement("div");
card_content.setAttribute("class", "card_content");
card_content.textContent = "content";
card_div.appendChild(card_content);
}
</script>
</body>
</html>
|
