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

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

ただいまの
回答率

90.47%

  • HTML

    9284questions

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

  • CSS

    6013questions

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

cssで吹き出しを作りたい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 238

Tazusa

score 32

 前提・実現したいこと

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
上の三角形のみに色を付ける。それ以外は透明に。

何か認識に間違いがある箇所があれば教えていただきたいです。

 該当のソースコード

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>ヘッダー</title>
<style>
body{
margin:0;
padding:0;
width:100%;
height:100%;
}
/*ここからはヘッダーのためのコード*/
.all{
position:fixed;
width:100%;
height:120px;
border-radius:10%
}

.backColor{
background-color:#fff;
box-shadow: 0 0 3px;
padding: 10px 10px 10px;
height: 120px;
width:100%;
}

.line{
border: 5px solid #F15356;
height:100px;
width:100%;
border-radius:10%
}
/*ここまでヘッダーのためのコード*/

/*吹き出しの四角部分*/
.rectangle{
position:relative;
display:inline-block;
background-color:#F15356;
color:white;
padding:10px;
border-radius:3px;
top:200px;
left:50%;
}

/*吹き出しの三角形部分*/
.restangle:after{
content="";
position:absolute;
width:0;
height:0;
bottom:0px;
right:50%
border: 20px solid transparent;
border-top: 20px solid #F15356;
}

*,*:before, *:after{
box-sizing:border-box;
}

</style>
</head>
<body>
<div class="all">
    <div class="backColor">
        <div class="line">
        </div>
    </div>
</div>
<p class="rectangle">こんにちは</p>
</body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+4

/*吹き出しの三角形部分*/
/*.restangle:after{ re「s」tangleになっている */
.rectangle:after{
/*content=""; 「=」じゃない。*/
content:"";
position:absolute;
width:0;
height:0;
/*bottom:0px; 相対位置なので。*/
top:100%;
right:calc(50% - 20px);/*「;」が無い&borderの幅を引き忘れている */
border: 20px solid transparent;
border-top: 20px solid #F15356;
}

動くサンプル:https://jsfiddle.net/qkemc8vg/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/06 00:56

    ありがとうございます。calcなどは知らず、大変参考になりました。
    追加で質問が2つあるのですが、
    1. 三角形部分でbottom:0;が相対位置だからおかしいというところがよく理解できません。
    bottom:0;で実行すると、長方形の上から三角形が始まってしまったのですが、
    これは関係あるのでしょうか。
    2.四角形も三角形もやはり右よりに配置されているのですが、
    これはなんとか解決する方法はないのでしょうか。
    text-align:center;もやってみたのですが解決できませんでした。

    初心者で申し訳ありませんが、よろしくお願いします。

    キャンセル

  • 2018/06/06 01:00

    bottomについて、
    absoluteを指定すると親要素の中での位置指定になるということでしたので、
    bottom 0 (下端から0)という意味で書いたのですが…

    キャンセル

  • 2018/06/06 01:06

    bottomについては、
    bottom: 0;
    の意味は、下端から上に向かって0という意味なので、
    Tazusaさんのやりたいようにするためには
    bottom: -20px;
    としないといけないんですよね~。
    top: 100%;
    は上端から下に向かって100%ということになります。

    キャンセル

  • 2018/06/06 09:23

    To: Tazusaさん

    【CSSのpositionを総まとめ!absoluteやfixedの使い方は?】
    https://saruwakakun.com/html-css/basic/relative-absolute-fixed#section2

    【CSSで要素を上下や左右から中央寄せする7つの方法 | 株式会社グランフェアズ】
    https://www.granfairs.com/blog/staff/centering-by-css

    To: teruriさん
    補足ありがとうございます。

    キャンセル

  • 2018/06/06 17:32

    terumiさん、kei344さん、ありがとうございます。
    bottomについて理解できました。

    キャンセル

+3

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の)で、記法の間違いのチェックができると、不要なミスが少なくなります。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/06 17:40 編集

    回答ありがとうございます。
    bottomについては理解できたのですが、
    まだ中央寄せについてはわからないことがあります。
    rectangleにて、ボタンの横幅が必要ですが、その算出は、
    (フォントのデフォルト16px) * 5文字 / 2 + 片方のpadding
    で宜しいでしょうか?

    そうだとすると、もう一つ"2018年6月6日です。"と書いた四角形で、paddingが上下左右40pxだと、16 * 9文字 / 2 + 40 =112pxがマイナスされると思います。
    しかし、実際calc(50% - 112px)だと右寄りになっています。
    この考え方が間違っているのでしょうか?

    キャンセル

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

  • ただいまの回答率 90.47%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML

    9284questions

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

  • CSS

    6013questions

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