HTML・CSSで実装するかわいいフキダシのアイデア - ICS MEDIA

見出しなどのテキストを目立たせたいときに便利なフキダシ（吹き出し）。 この記事では、HTMLとCSSだけで簡単に実装できる、シンプルなデザインのフキダシをご紹介します。 雑誌やポスターなどで見かける可愛いあしらいをウェブサイトにも取り入れたいと思ったことが、今回のテーマを選んだきっかけです。 とくにフキダシは、少ないコードで表現でき、見出しなどのテキストに華やかな印象を与えられます。 ウェブサイトを制作する際に、ぜひ取り入れてみてください。 また、この記事のほとんどの作例で、CSSの疑似要素『::before』と『::after』を利用しています。 疑似要素を使うと、不要なHTMLタグを増やさずにCSSで装飾できます。 ::before ＝ 選択した要素の最初の子要素として疑似要素を生成 ::after ＝ 選択した要素の最後の子要素として疑似要素を生成 これらは、要素に装飾的な内容を追加

[kvx]

文字量に合わせて可変させたりはSVGだと難しいのでは

[ozomatli]

フシギダネに空目したせいでページ開いてガッカリしちゃった。なんでカタカナで書くのよ。

[nekoline]

今だとSVGだよね。わざわざ擬似要素でやる時っていつかな？うーん、アニメーションもSVGで出来るしなぁ

[bhuh]

すてきを超えてしゅてき！！

[Falky]

フキダシはカタカナ表記も一般的だろ。

[dltlt]

Dark Reader を使っていると、吹き出しの一部が消えてしまう

[kijtra]

背景色の変化に対応しにくいと気づいてやめるんだよね

[helldeath]

めっちゃかわいいやん！つかおつかお。

[yarumato]

“作例では、CSSの疑似要素::beforeと::afterを使い、不要なHTMLタグを増やさずにCSSで装飾している。1-6 枠 + 三角つまみのフキダシ。1-8 立体感のある。1-11 ふたつの円 + 線。1-12 下から呼びかける。2-1 塗り + 三角つまみ”

[ejointjp]

最近はもうsvgに頼っちゃうなぁ

[dkhsynjnpeyc]

フォントが勘亭流でもかわいくなるんだろうか