質問: ### 前提・実現したいこと CSSを使用して下向きの吹き出しを作りたいです。 調べながら作っていたのですが、うまくいきません。問題は以下の2点です。 ### 発生している問題・エラーメッセージ 1. .rectangle部分でleft:50%としているのに、 実際Chromeで見ると、やや右に寄っている。 leftが50%ならばrightも50%となって中心に寄るのではないのでしょうか? 2. 吹き出しの三角形部分が表示されない。 三角形部分のコードを以下のように書いた理由を説明すると、 (1)after 四角形の下に置いてはみ出させるためにbeforeではなくafterにした。 (2)bottom afterの指定があることを考え、四角形のすぐ下から始めるために0。 (3)right 親要素のrectangleの真ん中から三角形を出したいため。 (4)border, border-top 上の三角形のみに色を付ける。それ以外は透明に。 何か認識に間違いがある箇所があれば教えていただきたいです。 ### 該当のソースコード ``` ヘッダー こんにちは ```
回答: > > 1 > > .rectangle部分でleft:50%としているのに、 > > 実際Chromeで見ると、やや右に寄っている。 > > leftが50%ならばrightも50%となって中心に寄るのではないのでしょうか? > > 2 > > 吹き出しの三角形部分が表示されない。 > > 三角形部分のコードを以下のように書いた理由を説明すると、 > > (1)after > > 四角形の下に置いてはみ出させるためにbeforeではなくafterにした。 > > (2)bottom > > afterの指定があることを考え、四角形のすぐ下から始めるために0。 > > (3)right > > 親要素のrectangleの真ん中から三角形を出したいため。 > > (4)border, border-top > > 上の三角形のみに色を付ける。それ以外は透明に。 > > > とのことですので、それぞれ回答しますね。 1については ``` left: calc(50% - ボタンの横幅の半分) ``` としてください。ボタンの横幅の半分は今回50pxですかね? leftの値を0にしてみるとわかりやすいかと。 そこからChromeのデベロッパーツールなどで数値を動かしてみてください。 0だと1番左に寄っちゃいますよね。 てことは、要素の左側の長さがleftの値ということです。 2については > > /*吹き出しの三角形部分*/ > > .restangle:after{ ←restangleになってます。 > > content=""; ←=ではなく:です。 > > position:absolute; > > width:0; > > height:0; > > bottom:0px; ←top:100%にしましょう。これも1と同様、どこにあるのかデベロッパーツールでやってみると感覚が理解できます。 > > right:50% ←最後のセミコロンが抜けてるのと、幅の調整が必要です。これも1と同様ですね。 > > border: 20px solid transparent; > > border-top: 20px solid #F15356; > > } > > > ``` /*吹き出しの三角形部分*/ .rectangle:after{ content:""; position:absolute; width:0; height:0; top:100%; right:calc(50% - 20px); border: 20px solid transparent; border-top: 20px solid #F15356; } ``` こんな感じかな。 あとは、適切にインデント入れたりすると理解が捗ります。 あと、エディタの機能(vscodeとかsublimeの)で、記法の間違いのチェックができると、不要なミスが少なくなります。