フリーランス|WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

【コピペOK】CSSでの吹き出しの作り方

css
HTML
コピペOK
吹き出し

WEBサイトで吹き出しを作りたいと思った際、実はCSSだけで吹き出しを作ることは出来るんです。
今回の記事ではCSSでの吹き出しの作り方をご紹介したいと思います。

なお、この記事でご紹介するHTMLの構造は以下のものを使用します。

<p>【コピペOK】CSSでの吹き出しの作り方</p>

ベタ塗りの吹き出しの作り方

まずはベタ塗の吹き出しの作り方を見てみましょう。「下向き」「左向き」「上向き」「右向き」をそれぞれご紹介します。

下向きの吹き出し

下向きの吹き出しを作る場合、CSSは以下のように指定します。

p {
    background: #ddd;
    padding: 15px;
    position: relative;

    /* 以下は不要です */
    width: 80%;
    margin: 25px auto;
}
p::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: #ddd transparent transparent transparent;
    border-width: 30px 15px 0px 15px;
    position: absolute;
    left: calc(50% - 15px);
    bottom: -15px;
}

実装イメージは以下の通りです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

左向きの吹き出し

左向きの吹き出しを作る場合、CSSは以下のように指定します。

p {
    background: #ddd;
    padding: 15px;
    position: relative;

    /* 以下は不要です */
    width: 80%;
    margin: 25px auto;
}
p::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent #ddd transparent transparent;
    border-width: 15px 30px 15px 0px;
    position: absolute;
    left: -15px;
    bottom: calc(50% - 15px);
}

実装イメージは以下の通りです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

上向きの吹き出し

上向きの吹き出しを作る場合、CSSは以下のように指定します。

p {
    background: #ddd;
    padding: 15px;
    position: relative;
  
    /* 以下は不要です */
    width: 80%;
    margin: 25px auto;
}
p::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent transparent #ddd transparent;
    border-width: 0px 15px 30px 15px;
    position: absolute;
    left: calc(50% - 15px);
    top: -15px;
}

実装イメージは以下の通りです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

右向きの吹き出し

右向きの吹き出しを作る場合、CSSは以下のように指定します。

p {
    background: #ddd;
    padding: 15px;
    position: relative;

    /* 以下は不要です */
    width: 80%;
    margin: 25px auto;
}
p::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent transparent transparent #ddd;
    border-width: 15px 0px 15px 30px;
    position: absolute;
    right: -15px;
    bottom: calc(50% - 15px);
}

実装イメージは以下の通りです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

縁取りの吹き出しの作り方

続いては縁取りの吹き出しの作り方を見てみましょう。こちらも「下向き」「左向き」「上向き」「右向き」をそれぞれご紹介します。

下向きの吹き出し

下向きの吹き出しを作る場合、CSSは以下のように指定します。

p {
    background: #fff;
    border: 2px solid #ddd;
    padding: 15px;
    position: relative;

    /* 以下は不要です */
    width: 80%;
    margin: 25px auto;
}
p::before,
p::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 16px 10px 0px 10px;
    position: absolute;
    left: calc(50% - 5px);
}
p::before {
    border-color: #ddd transparent transparent transparent;
    bottom: -16px;
}
p::after {
    border-color: #fff transparent transparent transparent;
    bottom: -12px;
}

実装イメージは以下の通りです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

左向きの吹き出し

左向きの吹き出しを作る場合、CSSは以下のように指定します。

p {
    background: #fff;
    border: 2px solid #ddd;
    padding: 15px;
    position: relative;

    /* 以下は不要です */
    width: 80%;
    margin: 25px auto;
}
p::before,
p::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 16px 10px 0px;
    position: absolute;
    top: calc(50% - 10px);
}
p::before {
    border-color: transparent #ddd transparent transparent;
    left: -16px;
}
p::after {
    border-color: transparent #fff transparent transparent;
    left: -12px;
}

実装イメージは以下の通りです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

上向きの吹き出し

上向きの吹き出しを作る場合、CSSは以下のように指定します。

p {
    background: #fff;
    border: 2px solid #ddd;
    padding: 15px;
    position: relative;

    /* 以下は不要です */
    width: 80%;
    margin: 25px auto;
}
p::before,
p::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0px 10px 16px 10px;
    position: absolute;
    left: calc(50% - 5px);
}
p::before {
    border-color: transparent transparent #ddd transparent;
    top: -16px;
}
p::after {
    border-color: transparent transparent #fff transparent;
    top: -12px;
}

実装イメージは以下の通りです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

右向きの吹き出し

右向きの吹き出しを作る場合、CSSは以下のように指定します。

p {
    background: #fff;
    border: 2px solid #ddd;
    padding: 15px;
    position: relative;

    /* 以下は不要です */
    width: 80%;
    margin: 25px auto;
}
p::before,
p::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0px 10px 16px;
    position: absolute;
    top: calc(50% - 10px);
}
p::before {
    border-color: transparent transparent transparent #ddd;
    right: -16px;
}
p::after {
    border-color: transparent transparent transparent #fff;
    right: -12px;
}

実装イメージは以下の通りです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

角丸(ベタ塗り)の吹き出しの作り方

次にベタ塗りの吹き出しで角丸のものの作り方を見てみましょう。「下向き」「左向き」「上向き」「右向き」をそれぞれご紹介します。

下向きの吹き出し

下向きの吹き出しを作る場合、CSSは以下のように指定します。

p {
    background: #ddd;
    padding: 15px;
    position: relative;
    border-radius: 1000px;

    /* 以下は不要です */
    width: 80%;
    margin: 25px auto;
}
p::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: #ddd transparent transparent transparent;
    border-width: 30px 15px 0px 15px;
    position: absolute;
    left: calc(50% - 15px);
    bottom: -15px;
}

実装イメージは以下の通りです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

左向きの吹き出し

左向きの吹き出しを作る場合、CSSは以下のように指定します。

p {
    background: #ddd;
    padding: 15px;
    position: relative;
    border-radius: 1000px;

    /* 以下は不要です */
    width: 80%;
    margin: 25px auto;
}
p::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent #ddd transparent transparent;
    border-width: 15px 30px 15px 0px;
    position: absolute;
    left: -15px;
    bottom: calc(50% - 15px);
}

実装イメージは以下の通りです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

上向きの吹き出し

上向きの吹き出しを作る場合、CSSは以下のように指定します。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

右向きの吹き出し

右向きの吹き出しを作る場合、CSSは以下のように指定します。

p {
    background: #ddd;
    padding: 15px;
    position: relative;
    border-radius: 1000px;

    /* 以下は不要です */
    width: 80%;
    margin: 25px auto;
}
p::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent transparent transparent #ddd;
    border-width: 15px 0px 15px 30px;
    position: absolute;
    right: -15px;
    bottom: calc(50% - 15px);
}

実装イメージは以下の通りです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

角丸(縁取り)の吹き出しの作り方

次に縁取った吹き出しを角丸にしたものの作り方を見てみましょう。「下向き」「左向き」「上向き」「右向き」をそれぞれご紹介します。

下向きの吹き出し

下向きの吹き出しを作る場合、CSSは以下のように指定します。

p {
    background: #fff;
    border: 2px solid #ddd;
    padding: 15px;
    position: relative;
    border-radius: 1000px;

    /* 以下は不要です */
    width: 80%;
    margin: 25px auto;
}
p::before,
p::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 16px 10px 0px 10px;
    position: absolute;
    left: calc(50% - 5px);
}
p::before {
    border-color: #ddd transparent transparent transparent;
    bottom: -16px;
}
p::after {
    border-color: #fff transparent transparent transparent;
    bottom: -12px;
}

実装イメージは以下の通りです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

左向きの吹き出し

左向きの吹き出しを作る場合、CSSは以下のように指定します。

p {
    background: #fff;
    border: 2px solid #ddd;
    padding: 15px;
    position: relative;
    border-radius: 1000px;

    /* 以下は不要です */
    width: 80%;
    margin: 25px auto;
}
p::before,
p::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 16px 10px 0px;
    position: absolute;
    top: calc(50% - 10px);
}
p::before {
    border-color: transparent #ddd transparent transparent;
    left: -16px;
}
p::after {
    border-color: transparent #fff transparent transparent;
    left: -12px;
}

実装イメージは以下の通りです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

上向きの吹き出し

上向きの吹き出しを作る場合、CSSは以下のように指定します。

p {
    background: #fff;
    border: 2px solid #ddd;
    padding: 15px;
    position: relative;
    border-radius: 1000px;

    /* 以下は不要です */
    width: 80%;
    margin: 25px auto;
}
p::before,
p::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0px 10px 16px 10px;
    position: absolute;
    left: calc(50% - 5px);
}
p::before {
    border-color: transparent transparent #ddd transparent;
    top: -16px;
}
p::after {
    border-color: transparent transparent #fff transparent;
    top: -12px;
}

実装イメージは以下の通りです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

右向きの吹き出し

右向きの吹き出しを作る場合、CSSは以下のように指定します。

p {
    background: #fff;
    border: 2px solid #ddd;
    padding: 15px;
    position: relative;
    border-radius: 1000px;

    /* 以下は不要です */
    width: 80%;
    margin: 25px auto;
}
p::before,
p::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0px 10px 16px;
    position: absolute;
    top: calc(50% - 10px);
}
p::before {
    border-color: transparent transparent transparent #ddd;
    right: -16px;
}
p::after {
    border-color: transparent transparent transparent #fff;
    right: -12px;
}

実装イメージは以下の通りです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

まとめ

いかがでしたか?

今回の記事ではCSSで作る吹き出しを見てきました。CSSをアレンジするだけでさらにバリエーション豊富な吹き出しを作ることが出来ます。
CSSを調整してどんな吹き出しになるのか試してみるのも面白いかもしれないですね。