chamotarooo https://blog.hatena.ne.jp/chamotarooo/ chamotaroooのブログ https://chamotaro.hatenablog.com/ 技術 はじめに 手紙風のカードの上辺に、青い吹き出しのラベルを載せる実装をした。 最初の版は見た目こそデザインに近かったが、1つの要素に20個のクラスが並び、文字も少し上に寄って見えた。 文字の位置を補正するとチームに戻され、クラスを減らそうとすると、吹き出しの尻尾の描き方で迷った。 最終形にたどり着くまでに、補正を2通り、尻尾の描き方を6通り比べている。 それぞれ、なぜ捨てたのか。 数値は、すべて記事のコードを手元で再現して測ったものだ。 React 19.2 で HTML を作り、Tailwind CSS 4.1 と Radix Themes 3.2 の CSS を当てて、Playwright … 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fchamotaro.hatenablog.com%2Fentry%2Ftech%2Fspeech-bubble-pill-label" title="カードにまたがる吹き出しラベルを、CSS の補正をやめて作り直すまで - chamotaroooのブログ" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> Hatena Blog https://hatena.blog 2026-10-09 22:28:00 rich https://chamotaro.hatenablog.com/entry/tech/speech-bubble-pill-label 1.0 100%