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

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

ただいまの
回答率

90.34%

  • HTML

    9625questions

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

  • CSS

    6231questions

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

CSSの吹き出し文字の位置がずれる

解決済

回答 3

投稿 編集

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

irukaken

score 4

おはようございます。
この画像のような吹き出しを作ろうとしています。

いろんなパラメータを操作したりして綺麗な形を作ろうとしているのですが、
吹き出し内の文字列が上下中央揃えと左右中央揃えがずれてしまいます。
paddingで調整しても、吹き出しの三角形の高さがずれたりしてしまいます。
良さげなCSSのオプションで上手く実現できる方法があるでしょうか。

イメージ説明
イメージ説明

<FONT class="sample">文字列</FONT>
.sample
{
  margin:0px 15px 0px 0px;
  padding:1.5px 0px 0px 0px;
  height:22.5px;
  border-radius:1em 0em 0em 1em;
  position:relative;
  display:inline-block;
  text-align:center;
  width:90px;
  color:#ffffff;
  background:#007000;
}

.sample:after
{
  content:"";
  position:absolute;
  top:50%;
  right:-24px;
  margin-top:-12px;
  border:12px solid transparent;
  border-left:12px solid #7f0f5b;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

+2

flexboxレイアウトなら簡単です。

.sample
{
  margin:0px 15px 0px 0px;
  padding:0px 0px 0px 0px; /*paddingで位置調整しないので0に変更*/
  height:22.5px;
  border-radius:1em 0em 0em 1em;
  position:relative;

  display:flex; /*変更(inline-flexでも可)*/
  justify-content: center; /*追加*/
 align-items: center; /*追加*/

  text-align:center;
  width:90px;
  color:#ffffff;
  background:#007000;
  font-size: 0.8em; /*文字小さくしたほうが分かりやすいので一回り小さく*/
}

関係ありませんがFONTタグはもう廃止されてます。
pタグなどを使うようにしましょう。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/12/08 01:02

    ありがとうございます。
    実装してみたところ、↑の画像のように文字はやや上にずれてしまいます。
    また、after で三角形は同じものを使ったところ、
    やはり三角形の端がはみ出してしまいます。heightで調整をしてみてダメではない状況になりましたが、
    上下中央揃えの実現が質問の目的ですので、いい方法はありますでしょうか?

    キャンセル

  • 2018/12/08 10:38

    表示確認のブラウザに何を使ってますか?
    flexboxがプレフィクス無しで動くのはIEだとIE11だけです。
    flexboxのサポート環境詳細はこちらでご確認ください。
    https://caniuse.com/#search=flex

    サポートされている環境ならば上記の記述で指定したエリアの上下左右中央にコンテンツを自動配置することができます。(サポート環境でも動かないならスペルミスなどの可能性が高いです)
    もし古い環境も含めて上下中央に配置したいなら、
    yoshinaviさんが回答されているようにheightとline-heightを同じpx数値に揃えるという方法があります。
    ただしこれは複数行の文字列には対応していませんので、可変長の文字列が入って折返しが発生したり、
    長い文字列を改行して2行で表示したいといった場合には使用できません。

    なお三角形の矢印部分をきちんと揃える部分については三角形の高さとボックスの高さが揃うように数値を調整するしかないんじゃないでしょうか。数学が得意なら計算すればどの数値の組み合わせの時にピッタリ同じ数値になるかは計算できると思います。(私は得意じゃないので揃うまでいろいろ試す派ですが/苦笑)

    キャンセル

  • 2018/12/08 16:12

    ありがとうございます。
    ブラウザは、PC版として最新版Firefox・Chrome・Safari、AndroidのFirefoxでテストをしており、
    IEは試しておりませんでした。
    flexbox というのは知らないオプションでしたが、コピペで実装しているのでスペルミスではなさそうです。
    その後も数時間試してみたのですが、CSSでの描画は画像と違ってアンチエイリアシスによるドットの欠落や、
    拡大縮小にも強いことや、CSSテンプレートでいろんな場所に使い回せる点を考慮してのものでした。
    vertival-aling は使えないので、line-height や font-size なども使っていろいろ試しましたが、
    三角形がはみ出したりしてどうしてもトレードオフでした。
    PCでうまくサイズがあったとしても、view-port等で画面サイズを統一しない限り、
    スマホアクセスになったり拡大率などの関係でCSSの描画だとずれやすいので、
    暫定対応として画像を使うことにしました。ご回答ありがとうございました。

    キャンセル

checkベストアンサー

+1

対応していないブラウザもありますが clip-pathで。

.sample {
  margin: 0 1em 0 0;
  padding: .5em 0 .45em;
  border-radius: 1em 0 0 1em;
  position: relative;
  display: inline-block;
  text-align: center;
  width: 90px;
  color: #ffffff;
  background-color: #007000;
  line-height: 1.1;
}

.sample::after {
  content: "";
  position: absolute;
  width: 1.5em;
  top: 0;
  bottom: 0;
  left: 100%;
  background-color: #7f0f5b;
  -webkit-clip-path: polygon(20% 0, 100% 50%, 10% 100%, 0% 100%, 0% 0%);
  clip-path: polygon(20% 0, 100% 50%, 10% 100%, 0% 100%, 0% 0%);
}

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


【clip-path | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/clip-path

【【CSS】CSSでマスク、クリッピングをしてみよう | unitopi - ユニトピ -】
http://unitopi.com/css3-clip/

【Can I use... Support tables for HTML5, CSS3, etc】
https://caniuse.com/#search=clip-path

【html - How to make clip-path works on microsoft edge? - Stack Overflow】
https://stackoverflow.com/questions/39477755/how-to-make-clip-path-works-on-microsoft-edge

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/12/08 16:17

    ありがとうございます。
    なるほど、clip-path を使うんですね。これは盲点でした。
    うまいですねぇ~ 完璧です。

    キャンセル

0

「line-height」を「height:22.5px;」に揃えてみてください。

以下を追加してください。

.sample {
  line-height: 22.5px;
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/12/08 16:05

    ありがとうございます。
    実はこの質問を投稿する前にも、line-height ・ font-size ・ height を使って調整も試みましたが、
    なかなかうまくいっておりませんでした。
    現状CSSだけで三角形を作るとなるとピクセル単位での調整が必要みたいですね。
    私はCSSをネットで逆引きしていろいろと属性やオプションを調べて使ってる程度なので、
    これからも勉強する余地がありそうです。

    キャンセル

  • 2018/12/08 16:21

    他の回答にもあるように、中央寄せはいくつかあります。ブラウザはデフォルトCSSがあるので、リセットしてから試してみてください。
    1行ならheightとline-heightを同じ値にすると、テキストは中央(上下)に寄ります。

    キャンセル

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

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

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

  • HTML

    9625questions

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

  • CSS

    6231questions

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