Skip to content

Commit 0084559

Browse files
geckotangclaude
geckotang
and
claude
committed
add: CSS Anchor Positioningの基本デモを追加
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
0 parents  commit 0084559

8 files changed

Lines changed: 605 additions & 0 deletions

‎anchor-basic.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
<title>ボタンの下にツールチップを表示する</title>
8+
<style>
9+
*, *::before, *::after {
10+
box-sizing: border-box;
11+
}
12+
13+
body {
14+
margin: 0;
15+
font-family: sans-serif;
16+
min-height: 100vh;
17+
display: flex;
18+
align-items: center;
19+
justify-content: center;
20+
background-color: #f5f5f5;
21+
}
22+
23+
.anchor {
24+
anchor-name: --my-anchor;
25+
width: fit-content;
26+
padding: 8px 16px;
27+
background-color: #1a73e8;
28+
color: #fff;
29+
border-radius: 4px;
30+
}
31+
32+
.tooltip {
33+
position: absolute;
34+
position-anchor: --my-anchor;
35+
top: calc(anchor(bottom) + 8px);
36+
left: anchor(center);
37+
translate: -50% 0;
38+
padding: 8px 16px;
39+
background-color: #333;
40+
color: #fff;
41+
border-radius: 4px;
42+
white-space: nowrap;
43+
}
44+
45+
/* 吹き出しの三角（上向き） */
46+
.tooltip::before {
47+
content: "";
48+
position: absolute;
49+
top: -6px;
50+
left: 50%;
51+
translate: -50% 0;
52+
border: 6px solid transparent;
53+
border-top: none;
54+
border-bottom-color: #333;
55+
}
56+
</style>
57+
</head>
58+
<body>
59+
<div class="anchor">アンカー要素</div>
60+
<div class="tooltip">ツールチップのテキストが入ります</div>
61+
</body>
62+
</html>

‎anchor-multiple.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
<title>複数のアンカーを基準にする</title>
8+
<style>
9+
*, *::before, *::after {
10+
box-sizing: border-box;
11+
}
12+
13+
body {
14+
margin: 0;
15+
font-family: sans-serif;
16+
min-height: 100vh;
17+
background-color: #f5f5f5;
18+
position: relative;
19+
}
20+
21+
.anchor-a {
22+
anchor-name: --anchor-a;
23+
position: absolute;
24+
top: 50px;
25+
left: 50px;
26+
padding: 8px 16px;
27+
background-color: #1a73e8;
28+
color: #fff;
29+
border-radius: 4px;
30+
}
31+
32+
.anchor-b {
33+
anchor-name: --anchor-b;
34+
position: absolute;
35+
top: 200px;
36+
right: 100px;
37+
padding: 8px 16px;
38+
background-color: #e8711a;
39+
color: #fff;
40+
border-radius: 4px;
41+
}
42+
43+
.positioned {
44+
position: absolute;
45+
/* position-anchor は指定しない。anchor() の引数でアンカー名を直接指定する */
46+
top: anchor(--anchor-a bottom);
47+
left: anchor(--anchor-a right);
48+
bottom: anchor(--anchor-b top);
49+
right: anchor(--anchor-b left);
50+
margin: 8px;
51+
background-color: rgba(26, 115, 232, 0.1);
52+
border: 2px dashed #1a73e8;
53+
display: flex;
54+
align-items: center;
55+
justify-content: center;
56+
}
57+
</style>
58+
</head>
59+
<body>
60+
<div class="anchor-a">アンカーA</div>
61+
<div class="anchor-b">アンカーB</div>
62+
<div class="positioned">AとBの間</div>
63+
</body>
64+
</html>

‎anchor-sides.html‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
<title>ツールチップの位置を上下左右に変える</title>
8+
<style>
9+
*, *::before, *::after {
10+
box-sizing: border-box;
11+
}
12+
13+
body {
14+
margin: 0;
15+
font-family: sans-serif;
16+
min-height: 100vh;
17+
background-color: #f5f5f5;
18+
}
19+
20+
.anchor {
21+
anchor-name: --my-anchor;
22+
/* 画面中央に配置 */
23+
position: absolute;
24+
top: 50%;
25+
left: 50%;
26+
translate: -50% -50%;
27+
padding: 16px 24px;
28+
background-color: #1a73e8;
29+
color: #fff;
30+
border-radius: 4px;
31+
}
32+
33+
.tooltip {
34+
position: absolute;
35+
position-anchor: --my-anchor;
36+
margin: 8px;
37+
padding: 8px 16px;
38+
background-color: #333;
39+
color: #fff;
40+
border-radius: 4px;
41+
white-space: nowrap;
42+
}
43+
44+
.tooltip-top {
45+
position-area: top center;
46+
}
47+
48+
/* 吹き出しの三角（下向き） */
49+
.tooltip-top::before {
50+
content: "";
51+
position: absolute;
52+
bottom: -6px;
53+
left: 50%;
54+
translate: -50% 0;
55+
border: 6px solid transparent;
56+
border-bottom: none;
57+
border-top-color: #333;
58+
}
59+
60+
.tooltip-right {
61+
position-area: center right;
62+
}
63+
64+
/* 吹き出しの三角（左向き） */
65+
.tooltip-right::before {
66+
content: "";
67+
position: absolute;
68+
left: -6px;
69+
top: 50%;
70+
translate: 0 -50%;
71+
border: 6px solid transparent;
72+
border-left: none;
73+
border-right-color: #333;
74+
}
75+
76+
.tooltip-bottom {
77+
position-area: bottom center;
78+
}
79+
80+
/* 吹き出しの三角（上向き） */
81+
.tooltip-bottom::before {
82+
content: "";
83+
position: absolute;
84+
top: -6px;
85+
left: 50%;
86+
translate: -50% 0;
87+
border: 6px solid transparent;
88+
border-top: none;
89+
border-bottom-color: #333;
90+
}
91+
92+
.tooltip-left {
93+
position-area: center left;
94+
}
95+
96+
/* 吹き出しの三角（右向き） */
97+
.tooltip-left::before {
98+
content: "";
99+
position: absolute;
100+
right: -6px;
101+
top: 50%;
102+
translate: 0 -50%;
103+
border: 6px solid transparent;
104+
border-right: none;
105+
border-left-color: #333;
106+
}
107+
</style>
108+
</head>
109+
<body>
110+
<div class="anchor">アンカー要素</div>
111+
<div class="tooltip tooltip-top">上</div>
112+
<div class="tooltip tooltip-right">右</div>
113+
<div class="tooltip tooltip-bottom">下</div>
114+
<div class="tooltip tooltip-left">左</div>
115+
</body>
116+
</html>

‎anchor-size-basic.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
<title>ツールチップをアンカーと同じ幅にする</title>
8+
<style>
9+
*, *::before, *::after {
10+
box-sizing: border-box;
11+
}
12+
13+
body {
14+
margin: 0;
15+
font-family: sans-serif;
16+
min-height: 100vh;
17+
display: flex;
18+
align-items: center;
19+
justify-content: center;
20+
background-color: #f5f5f5;
21+
}
22+
23+
.anchor {
24+
anchor-name: --my-anchor;
25+
width: 200px;
26+
padding: 8px 16px;
27+
background-color: #1a73e8;
28+
color: #fff;
29+
border-radius: 4px;
30+
}
31+
32+
.tooltip {
33+
position: absolute;
34+
position-anchor: --my-anchor;
35+
position-area: bottom center;
36+
width: anchor-size(width); /* アンカー要素の幅を参照 */
37+
margin: 8px;
38+
padding: 8px 16px;
39+
background-color: #333;
40+
color: #fff;
41+
border-radius: 4px;
42+
}
43+
44+
/* 吹き出しの三角（上向き）
45+
ツールチップ幅 = アンカー幅なので left: 50% がアンカーの中央 */
46+
.tooltip::before {
47+
content: "";
48+
position: absolute;
49+
top: -6px;
50+
left: 50%;
51+
translate: -50% 0;
52+
border: 6px solid transparent;
53+
border-top: none;
54+
border-bottom-color: #333;
55+
}
56+
</style>
57+
</head>
58+
<body>
59+
<div class="anchor">アンカー要素（幅200px）</div>
60+
<div class="tooltip">アンカーと同じ幅のツールチップ</div>
61+
</body>
62+
</html>

‎anchor-size-calc.html‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
<title>アイコンの3倍の高さのツールチップ</title>
8+
<style>
9+
*, *::before, *::after {
10+
box-sizing: border-box;
11+
}
12+
13+
body {
14+
margin: 0;
15+
font-family: sans-serif;
16+
min-height: 100vh;
17+
display: flex;
18+
align-items: center;
19+
justify-content: center;
20+
background-color: #f5f5f5;
21+
}
22+
23+
.anchor {
24+
anchor-name: --my-anchor;
25+
width: 40px;
26+
height: 40px;
27+
padding: 0;
28+
background: none;
29+
border: none;
30+
cursor: pointer;
31+
color: #1a73e8;
32+
}
33+
34+
.anchor svg {
35+
width: 100%;
36+
height: 100%;
37+
fill: currentColor;
38+
}
39+
40+
.tooltip {
41+
position: absolute;
42+
position-anchor: --my-anchor;
43+
position-area: center right;
44+
height: calc(anchor-size(height) * 3); /* アンカーの高さの3倍 */
45+
width: 200px;
46+
margin: 12px;
47+
padding: 8px 16px;
48+
background-color: #333;
49+
color: #fff;
50+
border-radius: 4px;
51+
}
52+
53+
.tooltip p {
54+
height: 100%;
55+
margin: 0;
56+
overflow: auto;
57+
}
58+
59+
/* 吹き出しの三角（左向き） */
60+
.tooltip::before {
61+
content: "";
62+
position: absolute;
63+
left: -6px;
64+
top: 50%;
65+
translate: 0 -50%;
66+
border: 6px solid transparent;
67+
border-left: none;
68+
border-right-color: #333;
69+
}
70+
</style>
71+
</head>
72+
<body>
73+
<button class="anchor" type="button">
74+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" aria-label="ヘルプ">
75+
<!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->
76+
<path d="M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM320 240C302.3 240 288 254.3 288 272C288 285.3 277.3 296 264 296C250.7 296 240 285.3 240 272C240 227.8 275.8 192 320 192C364.2 192 400 227.8 400 272C400 319.2 364 339.2 344 346.5L344 350.3C344 363.6 333.3 374.3 320 374.3C306.7 374.3 296 363.6 296 350.3L296 342.2C296 321.7 310.8 307 326.1 302C332.5 299.9 339.3 296.5 344.3 291.7C348.6 287.5 352 281.7 352 272.1C352 254.4 337.7 240.1 320 240.1zM288 432C288 414.3 302.3 400 320 400C337.7 400 352 414.3 352 432C352 449.7 337.7 464 320 464C302.3 464 288 449.7 288 432z"/>
77+
</svg>
78+
</button>
79+
<div class="tooltip">
80+
<p>ここにツールチップの説明テキストが入ります。ある程度長いテキストを入れて、アイコンの高さの3倍という制約でスクロールが発生することを示します。テキストをさらに続けて、スクロールバーが表示されるくらいの長さにします。</p>
81+
</div>
82+
</body>
83+
</html>

0 commit comments

Comments
 (0)