こんにちは！
今回は、ウェブサイトに簡単に追加できるLINE風デザインの吹き出しを紹介します。
このデザインは、会話形式のコンテンツやメッセージを表示する際に特に効果的です。
コピペでOK！ ですので、ぜひお試しください。

目次

  1. チャット風の吹き出し
  2. HTML
  3. CSS

デザインの特徴

チャット風の吹き出し

チャット風デザインの吹き出し
アイコン

これはチャット風の吹き出しです。

会話形式の用途などに適しています。


このデザインは、LINEのような吹き出しが特徴です。
アイコンとメッセージを組み合わせることで、とても見慣れたデザインになっていますね。

コードの紹介

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LINE風デザインの吹き出し</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="chat-bubble">
    <div class="chat-bubble__section">
        <!-- お好きなアイコン画像を指定してください -->
        <img class="chat-bubble__img" src="/img/chat-icon.jpg" alt="アイコン" width="45" height="45" />
        <p class="chat-bubble__text left">これはLINE風の吹き出しです。</p>
    </div>
    <div class="chat-bubble__section">
        <p class="chat-bubble__text right">遊び心のあるデザインで、会話形式の用途などに適しています。</p>
    </div>
</div>

</body>
</html>

CSS

/* styles.css */
.chat-bubble {
    display: grid;
    gap: 1em 0;
    padding: 25px 15px;
    background-color: #769ece;
}

.chat-bubble__section {
    display: flex;
    align-items: center;
    gap: 0 15px;
}

.chat-bubble__img {
    width: 2.7em;
    height: 2.7em;
    border-radius: 50%;
}

.chat-bubble__text {
    display: inline-block;
    position: relative;
    max-width: 80%;
    margin: 0;
    padding: .4em .8em;
    border-radius: 20px;
    color: #333;
    font-size: .9em;
}

.chat-bubble__text.left {
    background-color: #fff;
}

.chat-bubble__text.right {
    background-color: #30e852;
    margin: 0 10px 0 auto;
}

.chat-bubble__text::before {
    position: absolute;
    top: -15px;
    width: 20px;
    height: 30px;
    content: '';
}

.chat-bubble__text.left::before {
    left: -10px;
    border-radius: 0 0 0 15px;
    box-shadow: -3px -15px 0 -7px white inset;
}

.chat-bubble__text.right::before {
    right: -10px;
    border-radius: 0 0 15px 0;
    box-shadow: 3px -15px 0 -7px #30e852 inset;
}


以上で、LINE風デザインの吹き出しが簡単に実装できます！
ぜひ試してみてください。