WEBサイトで角丸の四角や吹き出しを使いたいです
CSSで角丸の四角や吹き出しを作る手順を説明します
CSSで吹き出しを描く
ブログなどで、以下のように会話形式でセリフとして説明内容を書くことがよくあります。
ここにセリフとして文章を表示します
この記事では、CSSで吹き出しを描く方法を説明します。
CSSで吹き出しの形を作る手順
この記事では、以下の手順で吹き出しを作成していきます。
- 吹き出しのセリフを書く四角形の枠を描く
- 四角が吹き出しに見えるように三角形を描いて四角にくっつける
- 吹き出しの横にキャラクターの画像を表示する
角丸の四角形を描く
まずは、セリフを囲む角丸の四角形を描きます。
border-radius で角丸の四角形を描く
CSSのborder-radius
を指定すると、枠線の角を丸くすることができます。
border-radius
の値は数値やパーセンテージなどで指定します。
.radius {
/* 角丸の半径サイズを数値で指定 */
border-radius: 100px;
}
.radius2 {
/* 角丸の半径サイズをパーセンテージで指定 */
border-radius: 20% 40%;
}
border-radius
については、以下の記事で、より詳しく描いています。
CSSで三角形を描く方法
CSSで三角形を描くには、以下の2つの方法があります。
- borderプロパティを使って枠線で三角形を描く
- clip-pathで三角形を描く
border
プロパティで描く枠線で三角形を表します。
枠線の太さが三角形の大きさになります。
See the Pen CSS-triangle by mik20621 (@mik20621) on CodePen.
border
プロパティの枠線の端は四角形ですが、縦横の枠線が交わると重なった箇所が三角形になります。
その三角形の部分だけを残すことで、三角形を表示します。
See the Pen CSS-triangle by mik20621 (@mik20621) on CodePen.
角丸の四角形と三角形を並べて表示する
吹き出しの形に見えるように、角丸の四角形と三角形をくっつけて並べて表示します。
ここでは、角丸の四角形の:before
要素で三角形を表示しています。
See the Pen bubble-clip by mik20621 (@mik20621) on CodePen.
吹き出しの横に画像を表示する
吹き出しの横に画像を表示することで、誰のセリフかわかるようにします。
ここでは、疑似要素::after
でキャラクターの画像を表示しています。
See the Pen CSS-bubble-icon by mik20621 (@mik20621) on CodePen.
疑似要素::before、::afterの書き方は、以下の記事でより詳しく説明しています。