回答編集履歴

5

アイコン形状の変更

2018/08/02 08:51

投稿

FKM
FKM

スコア3608

test CHANGED
@@ -3,6 +3,10 @@
3
3
  0. 三角形のアイコンを作る。
4
4
 
5
5
  0. position要素とz-index要素を使い、子要素を重ねて配置する。
6
+
7
+
8
+
9
+ 更に三角形を動かしたい位置に動かします。今回はExcel風なので右上隅となります。
6
10
 
7
11
 
8
12
 
@@ -46,19 +50,21 @@
46
50
 
47
51
  .tri_icon{
48
52
 
49
- position: absolute;
53
+    position: absolute;
50
54
 
51
- z-index: 2;
55
+    z-index: 2;
52
56
 
53
- top: 1px;
57
+ top: 0;
54
58
 
55
- left: 1px;
59
+ left: calc(100% - 20px);
56
60
 
57
- border-top: 10px solid transparent;
61
+ border-top: 10px solid red;
58
62
 
59
- border-bottom: 10px solid transparent;
63
+ border-bottom: 10px solid transparent;
60
64
 
61
- border-left: 14px solid black;
65
+ border-left: 10px solid transparent;
66
+
67
+ border-right: 10px solid red;
62
68
 
63
69
  }
64
70
 

4

htmlタグの修正

2018/08/02 08:51

投稿

FKM
FKM

スコア3608

test CHANGED
@@ -5,6 +5,8 @@
5
5
  0. position要素とz-index要素を使い、子要素を重ねて配置する。
6
6
 
7
7
 
8
+
9
+ ``` html
8
10
 
9
11
  <div class="content">
10
12
 

3

解釈違いを修正

2018/08/02 08:44

投稿

FKM
FKM

スコア3608

test CHANGED
@@ -1,18 +1,14 @@
1
- ずはツールチップに表示素を作ります。
1
+ CSSを使います点は次の2点です。
2
+
3
+ 0. 三角形のアイコンを作る。
4
+
5
+ 0. position要素とz-index要素を使い、子要素を重ねて配置する。
2
6
 
3
7
 
4
8
 
5
- ```html
9
+ <div class="content">
6
10
 
7
- <div class="sub">
8
-
9
- <!-- ここの要素に何か行うとイベントが起きる -->
10
-
11
- </div>
12
-
13
- <div class="tooltips">
14
-
15
- <div class="content">
11
+ <div class="comment">
16
12
 
17
13
        <!-- ここにコメントが入る -->
18
14
 
@@ -30,25 +26,9 @@
30
26
 
31
27
 
32
28
 
33
- それからCSSを使います。要点は次の3点です。
34
-
35
- 0. 三角形のアイコンを作る。
36
-
37
- 0. 親要素を隠す。
38
-
39
- 0. position要素とz-index要素を使い、子要素を重ねて配置する。
40
-
41
-
42
-
43
29
  ``` css
44
30
 
45
- .tooltips{
46
-
47
- visibility: hidden;
48
-
49
- }
50
-
51
- .content{
31
+ .comment{
52
32
 
53
33
  width: 100px;
54
34
 
@@ -84,34 +64,4 @@
84
64
 
85
65
 
86
66
 
87
- 説明は一番単純なやり方ですが、応用すれば好きな位置にコメントとアイコンを配置できると思います。アイコンはCSSで作成したり、font awesomeなどからアイコンをダウンロードして使うこともできます。
88
-
89
-
90
-
91
- あとは、jQueryなりJavaScriptなりをつかって、イベント実行後に、要素を見せ隠しすればいいだけです。
67
+ あとは、jQueryなりJavaScriptなりをつかって、コメントの有無で要素を見せ隠しすればいいだけです。
92
-
93
-
94
-
95
- ```jQuery
96
-
97
- <script>
98
-
99
- $(function(){
100
-
101
- $('.sub').on("mouseenter",function(){
102
-
103
- $('.tooltips').css({"visibility":"visible"});
104
-
105
- })
106
-
107
- $('.sub').on("mouseleave",function(){
108
-
109
- $('.tooltips').css({"visibility":"hidden"});
110
-
111
- })
112
-
113
- })
114
-
115
- </script>
116
-
117
- ```

2

文章構成の編集とコメントアウト記号の修正

2018/08/02 08:43

投稿

FKM
FKM

スコア3608

test CHANGED
@@ -1,4 +1,4 @@
1
- 0. まずはツールチップに表示する要素を作ります。
1
+ まずはツールチップに表示する要素を作ります。
2
2
 
3
3
 
4
4
 
@@ -14,7 +14,7 @@
14
14
 
15
15
  <div class="content">
16
16
 
17
-       <-- ここにコメントが入る -->
17
+       <!-- ここにコメントが入る -->
18
18
 
19
19
  </div>
20
20
 
@@ -30,7 +30,13 @@
30
30
 
31
31
 
32
32
 
33
+ それからCSSを使います。要点は次の3点です。
34
+
35
+ 0. 三角形のアイコンを作る。
36
+
37
+ 0. 親要素を隠す。
38
+
33
- 0. それからCSSで親要素を隠し、position要素とz-index要素を使い、子要素を重ねて配置し、三角形の部分を作ります。
39
+ 0. position要素とz-index要素を使い、子要素を重ねて配置す
34
40
 
35
41
 
36
42
 
@@ -78,7 +84,11 @@
78
84
 
79
85
 
80
86
 
81
- 説明は一番単純なやり方ですが、応用すれば好きな位置にコメントとアイコンを配置できると思います。アイコンはCSSで作成したり、font awesomeなどからアイコンをダウンロードして使うこともできます。あとは、jQueryなりJavaScriptなりをつかって、イベント実行後に、要素を見せ隠しすればいいだけです。
87
+ 説明は一番単純なやり方ですが、応用すれば好きな位置にコメントとアイコンを配置できると思います。アイコンはCSSで作成したり、font awesomeなどからアイコンをダウンロードして使うこともできます。
88
+
89
+
90
+
91
+ あとは、jQueryなりJavaScriptなりをつかって、イベント実行後に、要素を見せ隠しすればいいだけです。
82
92
 
83
93
 
84
94
 

1

アイコンの補足

2018/08/02 08:37

投稿

FKM
FKM

スコア3608

test CHANGED
@@ -78,7 +78,7 @@
78
78
 
79
79
 
80
80
 
81
- 説明は一番単純なやり方ですが、応用すれば好きな位置にコメントとアイコンを配置できると思います。アイコンはCSSで作成したり、アイコンを使うこともできます。あとは、jQueryなりJavaScriptなりをつかって、イベント実行後に、要素を見せ隠しすればいいだけです。
81
+ 説明は一番単純なやり方ですが、応用すれば好きな位置にコメントとアイコンを配置できると思います。アイコンはCSSで作成したり、font awesomeなどからアイコンをダウンロードして使うこともできます。あとは、jQueryなりJavaScriptなりをつかって、イベント実行後に、要素を見せ隠しすればいいだけです。
82
82
 
83
83
 
84
84
 
@@ -90,7 +90,13 @@
90
90
 
91
91
  $('.sub').on("mouseenter",function(){
92
92
 
93
+ $('.tooltips').css({"visibility":"visible"});
94
+
95
+ })
96
+
97
+ $('.sub').on("mouseleave",function(){
98
+
93
- $('.tooltips').css({"display":"block"});
99
+ $('.tooltips').css({"visibility":"hidden"});
94
100
 
95
101
  })
96
102