ホバーしたら吹き出しが大きくなるところまでは出来たのですが、テキストが入れ替わってくれません。
質問文のコードでテキストが入れ替わらない原因は、以下の 2 つです。
クラス属性は通常、属性名とそれに続く等号と、それに続く引用符に囲まれた属性値で構成されます。たとえば、p
要素にexample
というクラス名を付与するためには、 <p class="example"></p>
というように書くことが出来ます( 参考: HTMLを始めよう | MDN - 属性 )。
クラス名を指定して要素にスタイルを適用する場合、.example
のように、 HTML で指定したクラス名の前に終止符を付ける必要があります( 参考: クラスセレクター | MDN )。
以上を踏まえて質問文のコードを見ると、以下の HTML, CSS の記述は誤りであることがわかります。
HTML
1<span class"first"><p>クリック</p></span>
CSS
1balloon1:hover .first {
2 opacity: 0;
3}
4balloon1:hover .second {
5 opacity: 1;
6}
これらの問題を修正したコードは、以下のようになります。
HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5 <meta charset="utf-8">
6 <title>タイトル</title>
7
8 <style>
9 body {
10 padding: 300px 400px;
11 }
12
13 .balloon1 {
14 position: relative;
15 display: inline-block;
16 padding: 10px 10px;
17 min-width: 120px;
18 max-width: 100%;
19 line-height: 70px;
20 max-height: 100%;
21 color: #555;
22 background: #e0edff;
23 border-radius: 15px;
24 float: center;
25 transition: 1s;
26 -webkit-transition: 1s;
27 }
28
29 .balloon1:before {
30 content: "";
31 position: absolute;
32 top: 100%;
33 left: 30%;
34 margin-left: -15px;
35 border: 15px solid transparent;
36 border-top: 15px solid #e0edff;
37 }
38
39 .balloon1 p {
40 display: inline-block;
41 text-align: center;
42 vertical-align: middle;
43 }
44
45 .balloon1:hover {
46 transform: scale(3);
47 font-size: 10px;
48 }
49
50 .first,
51 .second {
52 width: 100%;
53 position: absolute;
54 transition: 1s;
55 }
56
57 .first {
58 opacity: 1;
59 font-size: 16px;
60 }
61
62 .second {
63 opacity: 0;
64 }
65
66 .balloon1:hover .first {
67 opacity: 0;
68 }
69
70 .balloon1:hover .second {
71 opacity: 1;
72 }
73 </style>
74
75</head>
76
77<body>
78
79 <div class="balloon1">
80 <span class="first"><p>クリック</p></span><span class="second"><p>詳細文</p></span>
81 </div>
82
83</body>
84</html>
すごく初歩的ですが、テキストが左右中央になりません。
インラインコンテンツの水平方向の配置位置は、text-align
プロパティにより設定することが出来ます。.balloon1
に対してtext-align
プロパティを設定することで、テキストを中央寄せにすることが出来ます。ここで、.balloon1
に設定されているfloat
プロパティは、無効な値を指定しており意味がないため、削除します。
CSS
1.balloon1 {
2 position: relative;
3 display: inline-block;
4 padding: 10px 10px;
5 min-width: 120px;
6 max-width: 100%;
7 line-height: 70px;
8 max-height: 100%;
9 color: #555;
10 background: #e0edff;
11 border-radius: 15px;
12 text-align: center; /* 追記 */
13 transition: 1s;
14 -webkit-transition: 1s;
15}
ここで、.first, .second
に対してposition: absolute;
を指定しているため、他の要素はこの要素が存在しないかのように振舞います。しかし、今回の場合、top
, right
, bottom
, left
プロパティを指定していないため、これらのクラスが付与された要素は通常どおり(position: static;
が適用されたかのように)に配置されます。これにより、.first, .second
のテキストの配置位置が、吹き出しからずれてしまいます。この問題を防ぐために、.first, .second
に対して、top
, left
プロパティを指定します。
CSS
1.first,
2.second {
3 width: 100%;
4 position: absolute;
5 top: 0; /* 追記 */
6 left: 0; /* 追記 */
7 transition: 1s;
8}
以上の変更を行うと、質問文のコードは以下のようになります。
HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5 <meta charset="utf-8">
6 <title>タイトル</title>
7
8 <style>
9 body {
10 padding: 300px 400px;
11 }
12
13 .balloon1 {
14 position: relative;
15 display: inline-block;
16 padding: 10px 10px;
17 min-width: 120px;
18 max-width: 100%;
19 line-height: 70px;
20 max-height: 100%;
21 color: #555;
22 background: #e0edff;
23 border-radius: 15px;
24 text-align: center;
25 transition: 1s;
26 -webkit-transition: 1s;
27 }
28
29 .balloon1:before {
30 content: "";
31 position: absolute;
32 top: 100%;
33 left: 30%;
34 margin-left: -15px;
35 border: 15px solid transparent;
36 border-top: 15px solid #e0edff;
37 }
38
39 .balloon1 p {
40 display: inline-block;
41 text-align: center;
42 vertical-align: middle;
43 }
44
45 .balloon1:hover {
46 transform: scale(3);
47 font-size: 10px;
48 }
49
50 .first,
51 .second {
52 width: 100%;
53 position: absolute;
54 top: 0;
55 left: 0;
56 transition: 1s;
57 }
58
59 .first {
60 opacity: 1;
61 font-size: 16px;
62 }
63
64 .second {
65 opacity: 0;
66 }
67
68 .balloon1:hover .first {
69 opacity: 0;
70 }
71
72 .balloon1:hover .second {
73 opacity: 1;
74 }
75 </style>
76
77</head>
78
79<body>
80
81 <div class="balloon1">
82 <span class="first"><p>クリック</p></span><span class="second"><p>詳細文</p></span>
83 </div>
84
85</body>
86</html>
上記のコードを実行すると、吹き出しが潰れてしまい、テキストがはみ出ていることに気づくかと思います。アンカーポイントの問題を解決する前に、この問題を修正します。ここで、.first, .second
に対してposition: absolute;
を指定していることを思い出してください。position: absolute;
を指定すると、他の要素はこの要素が存在しないかのように振舞うという特性がありました。このことから、吹き出しが潰れてしまった原因は、position: absolute;
だとわかります。しかし、position: absolute;
は必要な記述なので、消すことは出来ません。そのため、今回はafter
擬似要素を使ってこの問題を解決します。質問文のコードに、以下のような CSS を追記します。すると、テキストが吹き出し内に収まり、問題が解決出来たことがわかると思います。
CSS
1.balloon1::after {
2 display: block;
3 content: "";
4 padding-top: 100%;
5}
ズームインする時のアンカーポイント(軸)を中央でなく下にずらしたいのですが、アンカーポイントをどうコードで指示すればいいかわかりません。
transform-origin
プロパティを使うことにより、要素を変形するときの原点を設定することが出来ます。今回は下(水平方向は中央としておきます)を原点に取りたいので、以下のように.balloon1
の CSS にtransform-origin
プロパティを追加する必要があります。
CSS
1.balloon1 {
2 position: relative;
3 display: inline-block;
4 padding: 10px 10px;
5 min-width: 120px;
6 max-width: 100%;
7 line-height: 70px;
8 max-height: 100%;
9 color: #555;
10 background: #e0edff;
11 border-radius: 15px;
12 text-align:center;
13 transition: 1s;
14 -webkit-transition: 1s;
15 transform-origin: bottom; /* 追加 */
16}
また、p
要素はspan
要素内に記述出来ないため、 HTML を以下のように修正します。
HTML
1<div class="balloon1">
2 <p class="first"><span>クリック</span></p>
3 <p class="second"><span>詳細文</span></p>
4</div>
すると、最終的なコードは以下のようになります( 動作確認用リンク )。
HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="utf-8">
5 <title>タイトル</title>
6 <style>
7 body {
8 padding: 300px 400px;
9 }
10
11 .balloon1 {
12 position: relative;
13 display: inline-block;
14 padding: 10px 10px;
15 min-width: 120px;
16 max-width: 100%;
17 line-height: 70px;
18 max-height: 100%;
19 color: #555;
20 background: #e0edff;
21 border-radius: 15px;
22 text-align: center;
23 transition: 1s;
24 -webkit-transition: 1s;
25 transform-origin: bottom;
26 }
27
28 .balloon1:before {
29 content: "";
30 position: absolute;
31 top: 100%;
32 left: 30%;
33 margin-left: -15px;
34 border: 15px solid transparent;
35 border-top: 15px solid #e0edff;
36 }
37
38 .balloon1::after {
39 display: block;
40 content: "";
41 padding-top: 100%;
42 }
43
44 .balloon1 p {
45 display: inline-block;
46 text-align: center;
47 vertical-align: middle;
48 }
49
50 .balloon1:hover {
51 transform: scale(3);
52 font-size: 10px;
53 }
54
55 .first,
56 .second {
57 width: 100%;
58 position: absolute;
59 top: 0;
60 left: 0;
61 transition: 1s;
62 }
63
64 .first {
65 opacity: 1;
66 font-size: 16px;
67 }
68
69 .second {
70 opacity: 0;
71 }
72
73 .balloon1:hover .first {
74 opacity: 0;
75 }
76
77 .balloon1:hover .second {
78 opacity: 1;
79 }
80 </style>
81</head>
82<body>
83 <div class="balloon1">
84 <p class="first"><span>クリック</span></p>
85 <p class="second"><span>詳細文</span></p>
86 </div>
87</body>
88</html>