CSSで角丸の四角形や吹き出しを作る方法

2024年1月17日

当ページのリンクには広告が含まれています。

URLをコピーしました！

生徒

WEBサイトで角丸の四角や吹き出しを使いたいです

先生

CSSで角丸の四角や吹き出しを作る手順を説明します

この記事でわかること

CSSで角丸の四角や三角形を描く方法
CSSで吹き出しの形を描く方法
吹き出しの横に画像を表示する方法

CSSで吹き出しを描く

ブログなどで、以下のように会話形式でセリフとして説明内容を書くことがよくあります。

生徒

ここにセリフとして文章を表示します

この記事では、CSSで吹き出しを描く方法を説明します。

CSSで吹き出しの形を作る手順

この記事では、以下の手順で吹き出しを作成していきます。

吹き出しのセリフを書く四角形の枠を描く
四角が吹き出しに見えるように三角形を描いて四角にくっつける
吹き出しの横にキャラクターの画像を表示する

角丸の四角形を描く

まずは、セリフを囲む角丸の四角形を描きます。

border-radius で角丸の四角形を描く

CSSのborder-radiusを指定すると、枠線の角を丸くすることができます。

border-radiusの値は数値やパーセンテージなどで指定します。

.radius {
    /* 角丸の半径サイズを数値で指定 */
    border-radius: 100px;
}
.radius2 {
    /* 角丸の半径サイズをパーセンテージで指定 */
    border-radius: 20% 40%;
}

See the Pen Untitled by mik20621 (@mik20621) on CodePen.

border-radiusについては、以下の記事で、より詳しく描いています。

CSSで三角形を描く方法

CSSで三角形を描くには、以下の2つの方法があります。

borderプロパティを使って枠線で三角形を描く
clip-pathで三角形を描く

【Amazon.co.jp 限定】ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座 (DL特典: CSS クラス名チートシート)

¥2,728 （2024/01/14 07:44時点 | Amazon調べ）

Amazon

ポチップ

borderプロパティを使って枠線で三角形を描く

borderプロパティで描く枠線で三角形を表します。

枠線の太さが三角形の大きさになります。

See the Pen CSS-triangle by mik20621 (@mik20621) on CodePen.

borderプロパティの枠線の端は四角形ですが、縦横の枠線が交わると重なった箇所が三角形になります。

その三角形の部分だけを残すことで、三角形を表示します。

See the Pen CSS-triangle by mik20621 (@mik20621) on CodePen.

clip-pathで三角形を描く

clip-pathプロパティで三角形を描画して三角形を表示します。

3点の座標を指定して、三角形を描きます。

See the Pen Untitled 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の書き方は、以下の記事でより詳しく説明しています。