こういう要素を作ってみる
固定要素（スクロールしても上端に固定）
テキスト1
テキスト2
テキスト3
テキスト4
テキスト5
テキスト6
テキスト7
テキスト8
テキスト9
テキスト10
テキスト11
テキスト12
テキスト2
テキスト3
テキスト4
テキスト5
テキスト6
テキスト7
テキスト8
テキスト9
テキスト10
テキスト11
テキスト12
コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
|
意訳この機能がやること 指定したHTMLファイルを表示する |
index.html
<!DOCTYPE html>
<html>
<head>
<style>
.sticky {
position: sticky;
top: 0;
}
.height40 {
height: 40px;
}
.height1200 {
height: 1200px;
}
.card {
width: 360px;
border: solid 1px lightgray;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
background: white;
}
</style>
</head>
<body>
<div class="card height40 sticky">固定エリア</div>
<div class="card height1200">
<p>テキスト1</p>
<p>テキスト2</p>
<p>テキスト3</p>
<p>テキスト4</p>
<p>テキスト5</p>
<p>テキスト6</p>
<p>テキスト7</p>
<p>テキスト8</p>
<p>テキスト9</p>
<p>テキスト10</p>
<p>テキスト11</p>
<p>テキスト12</p>
</div>
</body>
</html>
|
意訳stickyのスタイル 画面をスクロールしても↓で設定した位置に固定する 上端からの距離 height40のスタイル 高さ height1200のスタイル 高さ cardのスタイル 幅 枠線 影 背景色 固定エリアのdiv スクロールされるエリアのdiv |
