cssで吹き出しを作成した時の疑問

Question

今年、ウェブサイトを立ち上げましたが、まだまだ初心者で少しずつでも上達したいと思い、今も毎日とはいきませんが勉強中です。　実は画像にポインターを持っていくと吹き出しが出るようにならないかと色々検索していたら「今日はCSSだけでお手軽に吹き出しを作る方法」のサイトがありました。（http://blog.asial.co.jp/1140）そのサイトには吹き出しを作るときのソースを下記のように書いてありました。 1. 2. 3. 4. 5. 6. 7. 8. * { 9. box-sizing: border-box; 10. } 11. 12. .wrapper { 13. padding: 30px; 14. position: relative; 15. } 16. 17. .box { 18. position: relative; 19. background: #ccc; 20. height: 70px; 21. width: 100px; 22. margin-bottom: 20px; 23. border-radius: 50px; 24. } 25. 26. .box:before { 27. content: ''; 28. position: absolute; 29. background: #ccc; 30. height: 20px; 31. width: 20px; 32. border-radius: 10px; 33. bottom: -20px; 34. left: 70px; 35. } 36. 37. .box:after { 38. content: ''; 39. position: absolute; 40. background: #ccc; 41. height: 10px; 42. width: 10px; 43. border-radius: 5px; 44. bottom: -30px; 45. left: 90px; 46. } 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. これを参考にして最終的にcssファイルに次のように書き込みました。 .box{ 　position:relative; 　background: lightcyan; 　height:130px; 　width:130px; 　text-align:center; 　padding:30px; 　border-radius:100px; 　display:none;} .box:before{ 　content:''; 　position:absolute; 　background:lightcyan; 　height:20px; 　width:20px; 　border-radius:10px; 　bottom:100px; 　left:-20px; } .box:after{ 　content:''; 　position:absolute; 　background:lightcyan; 　height:10px; 　width:10px; 　border-radius:10px; 　bottom:100px; 　left:-30px; } a:hover .box { 　display: block; 　line-height : 20px;} サイトのページには

今年も無事に
1年を
過ごす事が
できました。
嬉しかった
ニャ～。

そうすると、下図のように、猫のイラストの上にポインターを持っていくと左図の表示が右図のようになり、思ったような表示になりました。 https://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/3/523296536_57f606a5603fc/M.png 質問なのですが、最初は 8. * { 9. box-sizing: border-box; 10. } 11. 12. .wrapper { 13. padding: 30px; 14. position: relative; 15. } を入れていたのですが 12. .wrapper { 13. padding: 30px; 14. position: relative; 15. } は何ら影響がないみたいだったので削除しました。一応表示は思ったようになったようだったのですが、よく見てみるとそれぞれのサイトのページの～の幅が少し変化して、ページ全体の文字の表示や画像の配置にズレがしょうじていました。それで、　* { box-sizing: border-box; }　を削除したらズレもなく表示もうまくいきました。それでこの　＊　はどういう意味かネットで調べましたがわかりませんでした。この8～10のソースの意味を教えて頂ければと思います。　また、12～15の　.wrapper{・・・}　27、38の　content: '';　の「””」もよく呑み込めません。出来れば合わせて教えていただければと思います。　それから　・・・　の使用の仕方なのですが、私が10カ月ほど前に初級のWeb作成で習ったときは　・・・や・・・　のような使い方だったのですが、今回色々試して　・・・としたら思ったようになりました。このような使い方でよいのでしょうか？まただけでの使用も良いのでしょうか？　本当に未熟者の欲張った質問とは思いますが、出来るだけ解りやすく説明していただければ幸いと思います。　よろしくお願いします。　

Ogre7077 · Accepted Answer

■ * { box-sizing: border-box; }

ページ内の全ての要素/タグ(*) にて、箱型領域(box)の幅を計算する仕組みを変える。
https://developer.mozilla.org/ja/docs/Web/CSS/bo …
注意)
この指定をすると、ページ内の他の部分にて計算が狂い、デザインが崩れる可能性があり大変危険です。
適用範囲を限定したり、そもそも指定しない場合での width/height に変更するなどしてください。

■ .wrapper { position: relative; }

子孫要素で "position:absolute" を指定する際に必要となる「包含ブロック」を定義している。
https://developer.mozilla.org/ja/docs/Web/CSS/po …

■ .box:before { content:''; ... }

before/after で、吹き出しの小さい丸二つを描画しています。具体的には、
「文言が空で灰色のテキストフィールドを、縦横引き伸ばして角を丸くして表示」→ 灰色の丸
content:'' が無いと、「文言が無いので表示しなくて良い」と判断されてしまいます。

■ <a style="cursor:pointer"> ... </a>

間違ってはいませんが混乱しそうなので、以下の様に変更することをオススメします。
:hover は別に <a> だけの特権ではありません。

<style>
.wrapper { cursor:pointer; }
.wrapper .box { display:none; }
.wrapper:hover .box { display:block; }
</style>
<div class=wrapper><img><div class=box></div></div>

ORUKA1951 · Answer

初心者にありがちなのですが、デザインに入れ込みすぎて、基本が抜けてしまっている。そして、適当なサイトでソースを理解せず流用していく。なんでもそうですが、基本からきちんと順を追って学ぶほうがはるかに早く上達するし、間違った道に迷いこまない。単純に、メッセージを入れた段落があるので、それを吹き出しのように表示したい・・ということですよ。２０年前のHTML4.01の勧告以来、最も重視すべきは「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」なのですよ。この場合、HTMLは単純に

　首を傾げた猫今年も無事に
1年を
過ごす事が
できました。
嬉しかった
ニャ～。

だけ、先でどのようにデザインしようが好きにできる。そもそも自分でもわかりやすい。ので、メンテナンスも簡単になる。 CSSは p#message{position:relative;width:160px;height:160px;padding:20px;background-color:yellow;float:left;} p#message img{width:160px;height:auto;} p#message span{display:none;color:red;width:100px;height:100px;border-radius:80px;left:200px;top:20px;padding:20px;text-align:center;} p#message:hover:before, p#message:hover:after, p#message span{position:absolute;background-color:lightcyan;z-index:10;} /* hover時 */ /* 疑似要素をつくる */ p#message:hover:before, p#message:hover:after{content:"";display:block;} /* 個別にサイズの指定 */ p#message:hover:before{width:10px;height:10px;border-radius:5px;left:150px;top:100px;} p#message:hover:after{width:20px;height:20px;border-radius:10px;left:170px;top:80px;} /* 隠していたものを表示 */ p#message:hover span{display:block;} きちんと基礎から学びなおしましょう。それが最も早道なのですよ。 HTML: 基本的に文書構造しか書かない。最適な要素がない時に限ってdivやspanを使用し、classやidでその意味を補足する。「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」「ウェブ制作者は、 div 要素を、他に適切な要素がないときなど、最後の手段の要素として見なすことが、強く推奨されます。div 要素の代わりにもっと適切な要素を使うことは、読者にとってアクセシビリティ向上に、ウェブ制作者にとってメンテナンス性の向上につながります。( http://www.html5.jp/tag/elements/div.html )」それによって、自在にデザインできますし、ユーザーエージェントごとにプレゼンテーションを変えたり、デザインを変更することも容易になる。 HTML 4.01 Specification (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html#toc ) ★参考にされたサイトの最も欠けている部分　Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )の右上のDATAでチェックしてごらんなさい。 CSS 　きちんとセレクタ書きましょう。 p#message:hover span 段落要素のうち一意セレクタ(message)を持つものがhover(疑似クラス)したときの[子孫(半角スペース)」であるspan要素は・・・　ときちんと書いておくと、後々メンテナンスがとても楽でしょ。それによって詳細度もきちんと指定される。この場合詳細度は、112ですね。だから、詳細度が102p#message spanを上書きする。記述順にかかわらず。少なくとも Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification 日本語訳( https://momdo.github.io/css2/Overview.html ) 　の 4 構文と基本データ型 5 セレクター 6 プロパティ値とカスケーディング、継承の割り当ては身に着けて取り掛からないとなりません。基本中の基本で、そのサイトは全くご存じないみたい。　こんなにシンプルで分かりやすいものになるはずです。

cssで吹き出しを作成した時の疑問

初心者にありがちなのですが、デザインに入れ込みすぎて、基本が抜けてしまっている。

■ * { box-sizing: border-box; }

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング