border による吹き出しの作成

公開日：2020-10-24 更新日：2020-10-24

1. 概要

border を使って吹き出しを作成します。

2. 吹き出しの作成方法

border で枠線を描きます。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML・CSS・JavaScript</title>
    <style>
      .speech_bubble {
        color:#fff;
        border-style:solid; 
        border-width:20px;
        border-color:red blue green yellow;
        width :100px;
        height:100px;
      }
    </style>
  </head>
  <body style="margin:0px; padding:8px; background-color:#000;">
    <div class="speech_bubble"></div>
  </body>
</html>

実行結果：


枠線の幅を変更します。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML・CSS・JavaScript</title>
    <style>
      .speech_bubble {
        color:#fff;
        border-style:solid; 
        border-width:20px 10px 10px 10px;
        border-color:red blue green yellow;
        width :100px;
        height:100px;
      }
    </style>
  </head>
  <body style="margin:0px; padding:8px; background-color:#000;">
    <div class="speech_bubble"></div>
  </body>
</html>

実行結果：


枠の幅と高さを 0 にします。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML・CSS・JavaScript</title>
    <style>
      .speech_bubble {
        color:#fff;
        border-style:solid; 
        border-width:20px 10px 10px 10px;
        border-color:red blue green yellow;
        width :0px;
        height:0px;
      }
    </style>
  </head>
  <body style="margin:0px; padding:8px; background-color:#000;">
    <div class="speech_bubble" style=""></div>
  </body>
</html>

実行結果：


左、右、下の線を透明（transparent）にします。
すると、▼だけになります。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML・CSS・JavaScript</title>
    <style>
      .speech_bubble {
        color:#fff;
        border-style:solid; 
        border-width:20px 10px 10px 10px;
        border-color:red transparent transparent transparent;
        width :0px;
        height:0px;
      }
    </style>
  </head>
  <body style="margin:0px; padding:8px; background-color:#000;">
    <div class="speech_bubble" style=""></div>
  </body>
</html>

実行結果：


▼の上に枠を付けます。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML・CSS・JavaScript</title>
    <style>
      .speech_bubble {
        color:#fff;
        border-style:solid; 
        border-width:20px 10px 10px 10px;
        border-color:red transparent transparent transparent;
        width :0px;
        height:0px;
        
        margin-left:12px; /* ▼の位置を右にずらす */
      }
    </style>
  </head>
  <body style="margin:0px; padding:8px; background-color:#000;">
    <div style="width:200px; height:100px; color:#fff; background-color:red; border-radius: 8px;">
      こんにちは
    </div>
    <div class="speech_bubble"></div>
  </body>
</html>

実行結果：


:after を使って、classを追加するだけで、吹き出しになるようにします。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML・CSS・JavaScript</title>
    <style>
      .speech_bubble {
        position:relative;
        color:#fff;
        background-color:red;
        border-radius: 8px;
      }
      .speech_bubble:after {
        content: "";
        position:absolute;
        color:#fff;
        border-style:solid; 
        border-width:20px 10px 10px 10px;
        border-color:red transparent transparent transparent;
        width :0px;
        height:0px;
        left:20px;    /* ▼の横の位置 */
        bottom:-30px; /* ▼の縦の位置。線の幅によって変更する */
      }
    </style>
  </head>
  <body style="margin:0px; padding:8px; background-color:#000;">
    <div class="speech_bubble" style="width:200px; height:100px;">
      こんにちは
    </div>
  </body>
</html>

実行結果：


▼の位置を中央揃えにします。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML・CSS・JavaScript</title>
    <style>
      .speech_bubble {
        position:relative;
        color:#fff;
        background-color:red;
        border-radius: 8px;
      }
      .speech_bubble:after {
        content: "";
        position:absolute;
        color:#fff;
        border-style:solid; 
        border-width:20px 10px 10px 10px;
        border-color:red transparent transparent transparent;
        width :0px;
        height:0px;
        margin-left:-10px; left:50%; /* ▼の横の位置。中央揃え */
        bottom:-30px;                /* ▼の縦の位置。線の幅によって変更する */
      }
    </style>
  </head>
  <body style="margin:0px; padding:8px; background-color:#000;">
    <div class="speech_bubble" style="width:200px; height:100px;">
      こんにちは
    </div>
  </body>
</html>

実行結果：


Tag

New Article