回答編集履歴
4
dividerの追加
test
CHANGED
|
@@ -14,6 +14,14 @@
|
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
17
25
|
# ポイント
|
|
18
26
|
|
|
19
27
|
|
|
@@ -40,6 +48,14 @@
|
|
|
40
48
|
|
|
41
49
|
|
|
42
50
|
|
|
51
|
+
---
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
---
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
43
59
|
# 実装方法（デモ）
|
|
44
60
|
|
|
45
61
|
|
3
PERFECT VERSIONっぽいのができたので，それ用に編集
test
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
正攻法は既に[dit.さんの回答](https://teratail.com/questions/139983#reply-212016)で示されていると思うので，
|
|
2
2
|
|
|
3
|
-
私は
|
|
3
|
+
私はHTMLを書かずに**CSSだけで解決しちゃう方法**を紹介したいと思います！
|
|
4
|
+
|
|
5
|
+
↓
|
|
4
6
|
|
|
5
7
|
|
|
6
8
|
|
|
@@ -8,17 +10,37 @@
|
|
|
8
10
|
|
|
9
11
|
（右上のリミックスボタンでソースの閲覧・編集等ができます）
|
|
10
12
|
|
|
11
|
-
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
12
|
-
|
|
17
|
+
# ポイント
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
13
|
-
|
|
21
|
+
1. aタグの中の文字サイズをゼロにする（テキストノードの非表示）
|
|
22
|
+
|
|
14
|
-
|
|
23
|
+
1. aタグの```vertical-align```を設定する（今回は```top```）
|
|
24
|
+
|
|
25
|
+
1. aタグのhrefを```::before```擬似要素で表示する（```content: attr(href)```）
|
|
26
|
+
|
|
15
|
-
|
|
27
|
+
・その際，文字サイズをpタグの文字サイズに合わせる
|
|
16
|
-
|
|
28
|
+
|
|
17
|
-
|
|
29
|
+
・また，予め```:root```擬似クラスで文字サイズを設定しておく
|
|
30
|
+
|
|
18
|
-
|
|
31
|
+
1. 残りの```::after```擬似要素だけでツールチップを作る
|
|
32
|
+
|
|
33
|
+
・文字サイズをpタグの文字サイズに合わせる
|
|
34
|
+
|
|
35
|
+
・吹き出し部分を付けたい「辺」に，余白を多めにつける（その分が吹きだしのサイズ）
|
|
36
|
+
|
|
37
|
+
・背景画像を```linear-graient()```や```radial-gradient()```で作成し，配置する
|
|
38
|
+
|
|
39
|
+
・背景画像の複数指定の際，```background-size```や```background-position```は，できるだけ固定値ではなく，```%```や```calc()```を使い，汎用性を高める
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
19
|
-
|
|
43
|
+
# 実装方法（デモ）
|
|
20
|
-
|
|
21
|
-
単純作業の繰り返しなので，やってみると意外に簡単です
|
|
22
44
|
|
|
23
45
|
|
|
24
46
|
|
|
@@ -26,9 +48,15 @@
|
|
|
26
48
|
|
|
27
49
|
```html
|
|
28
50
|
|
|
51
|
+
<p>
|
|
52
|
+
|
|
53
|
+
This page's url (
|
|
54
|
+
|
|
29
|
-
<a href="https://teratail.com/questions/139983" class="t
|
|
55
|
+
<a href="https://teratail.com/questions/139983" class="lnk">https://teratail.com/questions/139983</a>
|
|
30
|
-
|
|
56
|
+
|
|
31
|
-
|
|
57
|
+
) is targeting on this page.
|
|
58
|
+
|
|
59
|
+
</p>
|
|
32
60
|
|
|
33
61
|
```
|
|
34
62
|
|
|
@@ -38,13 +66,27 @@
|
|
|
38
66
|
|
|
39
67
|
```css
|
|
40
68
|
|
|
69
|
+
:root{
|
|
70
|
+
|
|
71
|
+
font-size: 18px;
|
|
72
|
+
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
p{
|
|
76
|
+
|
|
77
|
+
font-size: 1rem;
|
|
78
|
+
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
|
|
41
|
-
.
|
|
83
|
+
.lnk:link,
|
|
42
|
-
|
|
84
|
+
|
|
43
|
-
.
|
|
85
|
+
.lnk:visited,
|
|
44
|
-
|
|
86
|
+
|
|
45
|
-
.
|
|
87
|
+
.lnk:hover,
|
|
46
|
-
|
|
88
|
+
|
|
47
|
-
.
|
|
89
|
+
.lnk:active{
|
|
48
90
|
|
|
49
91
|
position: relative;
|
|
50
92
|
|
|
@@ -52,7 +94,9 @@
|
|
|
52
94
|
|
|
53
95
|
max-width: 10rem;
|
|
54
96
|
|
|
55
|
-
color:
|
|
97
|
+
color: currentColor;
|
|
98
|
+
|
|
99
|
+
font-size: 0;
|
|
56
100
|
|
|
57
101
|
text-decoration: none;
|
|
58
102
|
|
|
@@ -62,7 +106,7 @@
|
|
|
62
106
|
|
|
63
107
|
}
|
|
64
108
|
|
|
65
|
-
.
|
|
109
|
+
.lnk::before{/*show target location*/
|
|
66
110
|
|
|
67
111
|
content: attr(href);
|
|
68
112
|
|
|
@@ -70,29 +114,33 @@
|
|
|
70
114
|
|
|
71
115
|
overflow-x: hidden;
|
|
72
116
|
|
|
117
|
+
font-size: 1rem;
|
|
118
|
+
|
|
73
119
|
white-space: nowrap;
|
|
74
120
|
|
|
75
121
|
text-overflow: ellipsis;
|
|
76
122
|
|
|
77
123
|
}
|
|
78
124
|
|
|
79
|
-
.
|
|
125
|
+
.lnk:hover::after,
|
|
80
|
-
|
|
126
|
+
|
|
81
|
-
.
|
|
127
|
+
.lnk:active::after{/*show tooltip*/
|
|
82
128
|
|
|
83
129
|
content: attr(href);
|
|
84
130
|
|
|
131
|
+
display: block;
|
|
132
|
+
|
|
133
|
+
position: absolute;
|
|
134
|
+
|
|
135
|
+
z-index: 1;
|
|
136
|
+
|
|
137
|
+
top: calc(100% - 3px);
|
|
138
|
+
|
|
139
|
+
padding: 10px 5px 5px;
|
|
140
|
+
|
|
85
141
|
color: #fff;
|
|
86
142
|
|
|
87
|
-
display: block;
|
|
88
|
-
|
|
89
|
-
position: absolute;
|
|
90
|
-
|
|
91
|
-
|
|
143
|
+
font-size: 1rem;
|
|
92
|
-
|
|
93
|
-
top: calc(100% - 3px);
|
|
94
|
-
|
|
95
|
-
padding: 10px 5px 5px;
|
|
96
144
|
|
|
97
145
|
background-image:
|
|
98
146
|
|
|
@@ -152,25 +200,15 @@
|
|
|
152
200
|
|
|
153
201
|
}
|
|
154
202
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
.the_link.compromise{
|
|
158
|
-
|
|
159
|
-
max-width: none;
|
|
160
|
-
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
.the_link.compromise::before{
|
|
164
|
-
|
|
165
|
-
content: "";
|
|
166
|
-
|
|
167
|
-
}
|
|
168
|
-
|
|
169
203
|
```
|
|
170
204
|
|
|
171
205
|
|
|
172
206
|
|
|
207
|
+
これでHTMLを編集できないときでも，
|
|
208
|
+
|
|
173
|
-
こ
|
|
209
|
+
このCSSを当てて，セレクタの名前やプロパティ値を編集すれば，
|
|
210
|
+
|
|
211
|
+
無事ツールチップが表示できるようになりますね！
|
|
174
212
|
|
|
175
213
|
|
|
176
214
|
|
2
コードの実用性の向上？
test
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
（右上のリミックスボタンでソースの閲覧・編集等ができます）
|
|
10
10
|
|
|
11
|
-
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
|
|
@@ -26,7 +26,9 @@
|
|
|
26
26
|
|
|
27
27
|
```html
|
|
28
28
|
|
|
29
|
-
<a href="https://teratail.com/questions/139983"
|
|
29
|
+
<a href="https://teratail.com/questions/139983" class="the_link"></a>
|
|
30
|
+
|
|
31
|
+
<a href="https://thimble.mozilla.org/en-US/" class="the_link compromise">https://thimble.moz...</a>
|
|
30
32
|
|
|
31
33
|
```
|
|
32
34
|
|
|
@@ -36,23 +38,19 @@
|
|
|
36
38
|
|
|
37
39
|
```css
|
|
38
40
|
|
|
39
|
-
|
|
41
|
+
.the_link:link,
|
|
40
42
|
|
|
41
|
-
|
|
43
|
+
.the_link:visited,
|
|
42
44
|
|
|
43
|
-
|
|
45
|
+
.the_link:hover,
|
|
44
46
|
|
|
45
|
-
|
|
47
|
+
.the_link:active{
|
|
46
48
|
|
|
47
49
|
position: relative;
|
|
48
50
|
|
|
49
51
|
display: inline-block;
|
|
50
52
|
|
|
51
|
-
margin: 2rem;
|
|
52
|
-
|
|
53
53
|
max-width: 10rem;
|
|
54
|
-
|
|
55
|
-
height: 1.6rem;
|
|
56
54
|
|
|
57
55
|
color: #333;
|
|
58
56
|
|
|
@@ -60,15 +58,17 @@
|
|
|
60
58
|
|
|
61
59
|
border-bottom: dashed 1px gray;
|
|
62
60
|
|
|
61
|
+
vertical-align: top;
|
|
62
|
+
|
|
63
63
|
}
|
|
64
64
|
|
|
65
|
-
|
|
65
|
+
.the_link::before{/*show target location*/
|
|
66
66
|
|
|
67
67
|
content: attr(href);
|
|
68
68
|
|
|
69
69
|
display: block;
|
|
70
70
|
|
|
71
|
-
overflow: hidden;
|
|
71
|
+
overflow-x: hidden;
|
|
72
72
|
|
|
73
73
|
white-space: nowrap;
|
|
74
74
|
|
|
@@ -76,9 +76,9 @@
|
|
|
76
76
|
|
|
77
77
|
}
|
|
78
78
|
|
|
79
|
-
|
|
79
|
+
.the_link:hover::after,
|
|
80
80
|
|
|
81
|
-
|
|
81
|
+
.the_link:active::after{/*show tooltip*/
|
|
82
82
|
|
|
83
83
|
content: attr(href);
|
|
84
84
|
|
|
@@ -87,6 +87,8 @@
|
|
|
87
87
|
display: block;
|
|
88
88
|
|
|
89
89
|
position: absolute;
|
|
90
|
+
|
|
91
|
+
z-index: 1;
|
|
90
92
|
|
|
91
93
|
top: calc(100% - 3px);
|
|
92
94
|
|
|
@@ -150,6 +152,20 @@
|
|
|
150
152
|
|
|
151
153
|
}
|
|
152
154
|
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
.the_link.compromise{
|
|
158
|
+
|
|
159
|
+
max-width: none;
|
|
160
|
+
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.the_link.compromise::before{
|
|
164
|
+
|
|
165
|
+
content: "";
|
|
166
|
+
|
|
167
|
+
}
|
|
168
|
+
|
|
153
169
|
```
|
|
154
170
|
|
|
155
171
|
|
1
誤字修正，参考リンク追加，その他ちょっと修正
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
正攻法は既に[dit.さんの回答](https://teratail.com/questions/139983#reply-212016)で示されていると思うので，
|
|
2
2
|
|
|
3
3
|
私はできるだけHTMLを書かずにCSSだけで解決しちゃう方法でやってみました↓
|
|
4
4
|
|
|
@@ -154,6 +154,24 @@
|
|
|
154
154
|
|
|
155
155
|
|
|
156
156
|
|
|
157
|
-
HTMLを直接編集できないときでも，このCSSを当てれば
|
|
157
|
+
これでHTMLを直接編集できないときでも，このCSSを当てて，セレクタの名前や，いらないプロパティ値を編集すれば，無事ツールチップが表示できるようになりますね！
|
|
158
|
+
|
|
159
|
+
|
|
158
160
|
|
|
159
161
|
ぜひお試しください！^^
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
---
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+
|
|
169
|
+
参考：
|
|
170
|
+
|
|
171
|
+
|
|
172
|
+
|
|
173
|
+
- [backgroundまとめ。ショートハンド、複数指定、各プロパティ](https://qiita.com/katsunory/items/1e952d3f5ab2a0306c4d)（背景画像の複数指定のtips）
|
|
174
|
+
|
|
175
|
+
- [cssのcontentプロパティを使いこなそう！](https://www.webcreatorbox.com/tech/content-property)（contentプロパティの活用，擬似要素のセレクタ）
|
|
176
|
+
|
|
177
|
+
- [CSSのセレクタとは？覚えておきたい25種類と書き方](https://saruwakakun.com/html-css/reference/selector)（idやclassに頼らない詳細な指定方法）
|