質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

425閲覧

CSSで作成した吹き出しのテキストがホバー時に入れ替わらない+@

satoruko

総合スコア12

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/01/10 09:15

編集2019/01/10 09:44

前提・実現したいこと

CSSで吹き出しを作っています。
「クリック」とテキスト書かれた小さい吹き出しをホバーすると吹き出しが大きくなり、テキストが「説明文」へと入れ替わる吹き出しを作りたいのですが上手くいかず困っています。

発生している問題・エラーメッセージ

①ホバーしたら吹き出しが大きくなるところまでは出来たのですが、テキストが入れ替わってくれません。 cssのopacityで命令しているのですが・・・原因がわかりません。 ②すごく初歩的ですが、テキストが左右中央になりません。 ③ズームインする時のアンカーポイント(軸)を中央でなく下にずらしたいのですが、アンカーポイントをどうコードで指示すればいいかわかりません。

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <style> body { padding: 300px 400px; } .balloon1 { position: relative; display: inline-block; padding: 10px 10px; min-width: 120px; max-width: 100%; line-height: 70px; max-height: 100%; color: #555; background: #e0edff; border-radius: 15px; float: center; transition: 1s; -webkit-transition: 1s; } .balloon1:before{ content: ""; position: absolute; top: 100%; left: 30%; margin-left: -15px; border: 15px solid transparent; border-top: 15px solid #e0edff; } .balloon1 p { display: inline-block; text-align: center; vertical-align: middle; } .balloon1:hover{ transform: scale(3); font-size: 10px; } .first,.second { width: 100%; position: absolute; transition: 1s; } .first { opacity: 1; font-size: 16px; } .second { opacity: 0; } .balloon1:hover .first { opacity: 0; } .balloon1:hover .second { opacity: 1; } </style> </head> <body> <div class="balloon1"> <span class="first"><p>クリック</p></span><span class="second"><p>詳細文</p></span> </div> </body>

試したこと

検索してみて探したやり方なのであまり変えていませんが、他の方法を探してもなかなか上手くいきません。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2019/01/10 09:36

typoあります。 <span class"first"> ↓ <span class="first"> balloon1:hover .first { ↓ .balloon1:hover .first {
satoruko

2019/01/10 09:42

Lhankor_Mhy様ありがとうございます。 とんでもない凡ミスでした・・・!申し訳ありません、本当にありがとうございます・・・! ですが修正した上で確認したら、テキストが吹き出しの下に表示されてしまいました・・・。
Lhankor_Mhy

2019/01/10 09:48

吹き出しの下になるのは、::before擬似要素がabsoluteになってコンテンツがなくなっているからです。
guest

回答3

0

ベストアンサー

ホバーしたら吹き出しが大きくなるところまでは出来たのですが、テキストが入れ替わってくれません。

質問文のコードでテキストが入れ替わらない原因は、以下の 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>

投稿2019/01/10 10:31

編集2019/01/10 10:36
s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

satoruko

2019/01/10 11:13

解決できました!とても丁寧に解説いただけたのでしっかり理解しながら解決する事ができました、本当にありがとうございます!もっと勉強します
guest

0

こんな感じでどうでしょうか?

html

1 <style> 2 3 body { 4 padding: 300px 400px; 5 } 6 7 .balloon1 { 8 position: relative; 9 display: inline-block; 10 padding: 10px 10px; 11 min-width: 120px; 12 max-width: 100%; 13 line-height: 70px; 14 height: 100px; /* 追加 +/ 15 /* max-height: 100%; */ 16 color: #555; 17 background: #e0edff; 18 border-radius: 15px; 19 float: center; 20 transition: 1s; 21 -webkit-transition: 1s; 22 } 23 24 .balloon1:before{ 25 content: ""; 26 position: absolute; 27 top: 100%; 28 left: 30%; 29 margin-left: -15px; 30 border: 15px solid transparent; 31 border-top: 15px solid #e0edff; 32 } 33 34 .balloon1 p { 35 display: inline-block; 36 text-align: center; 37 vertical-align: middle; 38 } 39 40 .balloon1:hover{ 41 transform: scale(3); 42 /* font-size: 10px; */ 43 } 44 45 .first,.second { 46 width: 100%; 47 position: absolute; 48 left: 0; /* 追加 */ 49 transition: 1s; 50 } 51 52 .first { 53 font-size: 16px; 54 } 55 .second { 56 opacity: 0; 57 font-size: 10px; /* 追加 */ 58 } 59 .balloon1:hover .first { 60 opacity: 0; 61 } 62 .balloon1:hover .second { 63 opacity: 1; 64 } 65 66</style> 67 68</head> 69<body> 70 71 <div class="balloon1"> 72 <p class="first">クリック</p> <!-- span削除 --> 73 <p class="second">詳細文</p> <!-- span削除 --> 74 </div> 75

投稿2019/01/10 10:23

akihiro3

総合スコア955

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

satoruko

2019/01/10 11:12

上手く実装できました!ありがとうございます!
guest

0

気になるところがいくつかありますが、以下のように変更してみてください。

HTML

1<div class="balloon1"> 2 <p class="first">クリック</p><p class="second">詳細文</p> 3</div>

css

1/* .balloon1:before は削除*//* やっぱり削除しなくていいです。*/ 2.balloon1:after{ 3 content: ""; 4 display:inline-block; 5}

投稿2019/01/10 10:00

編集2019/01/10 10:12
Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2019/01/10 10:11

ああ、::before擬似要素は吹き出しの部分のためにあったんですね。 そこは削除しないでください。失礼しました。
satoruko

2019/01/10 11:12

after要素を失念していました。解決できました、ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問