WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。凝ったデザインなどには吹き出しなどを作成したりします。内容を画像ではなくテキストにしたい場合があると思います。吹出し画像を文字数に合わせて調節したり、分割して組み立てたりするのは大変ですよね。そんなときにCSSのみで吹き出しが作れたらとても助かります。CSSで吹き出しを作成する基本的な部分をご紹介したいと思います。吹き出しで重要な部分の三角形を作成してみます。transparent;width:0;border-right-color:#000;border-left-width:0;次にこれらを利用して吹き出しを作成してみます。枠のない吹出しを作成する場合は、:beforeと:afterのどちらかを使って作成します。transparent;border-right-color:#ddd;border-left-width:0;left:-20px;content:””;display:block;top:30px;position:absolute;width:0;}今回は枠無しバージョンをご紹介致しました。近いうちに枠有りバージョンをご紹介できたらと思います。それだけでなく、様々な形の吹き出しを作成できますので、それらもご紹介していきたいと思います。これでデザインの幅やコーディングの幅が広がったかと思います。この記事を参考に少しでも役立てていただければ幸いです。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。私が好きなパステルトーンの可愛い素材が揃っているサイトです。...【Illustrator】簡単!マーブル模様の作り方マーブル模様って、パターンと違って規則性もないし、表現するのは大変ですよね。...【Illustrator】写真を簡単にモノクロベクター画像にする方法みなさまこんにちは、新人Aです。WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。