LANG SELRCT

Google Apps Scriptのコードを書く場所  (新規作成: スプレッドシート | スクリプトエディタ

2018年3月19日月曜日

stickyで画面スクロールしてもついてくる要素を作る


こういう要素を作ってみる

固定要素(スクロールしても上端に固定)
テキスト1
テキスト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

















最新の投稿

現在日時から四半期の開始日と終了日を知りたい

今の日時を取得して、現在の四半期の開始日と終了日を知りたくて書いたコードです。 コード.gs function myFunction() { const month = new Date().getMonth() + 1;// monthは0始まりなので+1 ...