2025-scroll-state/scroll-state-2-snapped.html at main · codegrid/2025-scroll-state · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demo</title>
  <style>
    ul {
      box-sizing: border-box;
      display: grid;
      grid-auto-flow: row;
      gap: 16px;
      margin: 0;
      padding: 16px;
      list-style: none;
      max-width: 500px;
      width: 100%;
      height: 290px;
      margin: 0 auto;
      overflow-y: auto;
      overscroll-behavior-y: contain;
      scroll-snap-type: y mandatory;
      justify-content: center;
      border: 3px solid tomato;
    }
    ul::before,
    ul::after {
      content: "";
      height: 50vh;
    }

    li {
      position: relative;
      width: 300px;
      height: 280px;
      container-type: scroll-state;
      scroll-snap-align: center;
      overflow: hidden;
    }

    li > a {
      box-sizing: border-box;
      display: block;
      height: 100%;
      background-color: #ccc;
      padding: 16px;
      font-size: 24px;
      line-height: 1.2;
      font-feature-settings: "palt";
      text-decoration: none;
      border-radius: 16px;
      color: #fff;
      font-weight: bold;
    }

    li > p {
      position: absolute;
      bottom: 0;
      translate: -100% 0;
      margin: 0;
      padding: 16px;
      transition: 0.2s;
      pointer-events: none;
      font-size: 14px;

      @container scroll-state(snapped: y) {
        translate: 0 0;
      }
    }
  </style>
  <style>
  @supports not (container-type: scroll-state) {
    body::before {
      /* 日本語で */
      content: "お使いのブラウザは、scroll-stateのコンテナクエリーをサポートしていません。";
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: black;
      color: white;
      text-align: center;
      padding: 10px;
    }
  }
  </style>
</head>
<body>

  <ul>
    <li>
      <a href="#"> <span>第1回 Svelteの特徴</span> </a>
      <p>
        <span>2025年6月5日 公開</span>
        ReactやVue.jsとも違う、シンプルで新しいアプローチの開発ツール、Svelteを紹介します。まずはSvelteを含むプロジェクトをインストールし、テンプレートを試してみましょう。
      </p>
    </li>
    <li>
      <a href="#">
        <span>第2回 Svelteコンポーネントの基本</span>
      </a>
      <p>
        <span>2025年6月19日 公開</span>
        Svelteでアプリケーションを作る上で欠かすことのできない要素である、コンポーネントについて解説します。
      </p>
    </li>
    <li>
      <a href="#">
        <span>第3回 親コンポーネントから子コンポーネントへの値の受け渡し</span>
      </a>
      <p>
        <span>2025年7月3日 公開</span>
        Svelteのコンポーネントを複数に分割し、親子間で状態を受け渡す方法について解説します。$propsというルーンの使い方を通して、親コンポーネントから子コンポーネントへのデータの流れを制御する実践的な手法を紹介します。
      </p>
    </li>
    <li>
      <a href="#">
        <span>第4回 子コンポーネントから親コンポーネントへの値の受け渡し</span>
      </a>
      <p>
        <span>2025年7月10日 公開</span>
        Svelteのコンポーネントを複数に分割し、親子間で状態を受け渡す方法について解説します。今回は$bindableというルーンの使い方を通して、子から親へのデータの流れを制御する実践的な手法を紹介します。
      </p>
    </li>
    <li>
      <a href="#">
        <span>第5回 テンプレートの基本と制御構文 - 1</span>
      </a>
      <p>
        <span>2025年8月14日 公開</span>
        Svelteコンポーネントに備わった独自のマークアップ構文を解説します。コンポーネントのマークアップ部分に使われる、まずは変数展開を見てみましょう。
      </p>
    </li>
    <li>
      <a href="#">
        <span>第6回 テンプレートの基本と制御構文 - 2</span>
      </a>
      <p>
        <span>2025年8月21日 公開</span>
        Svelteコンポーネントに備わった独自の制御構文を解説します。コンポーネントのマークアップ部分に使われる条件分岐、繰り返し処理を解説します。
      </p>
    </li>
  </ul>


</body>
</html>