CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのclip-pathでテキスト入りのコメントボックス（吹き出し）を作成する方法

CSSのclip-pathプロパティを活用することで、吹き出しのようなコメントボックスを作成できます。画像ファイルに頼らずCSSだけで完結するため、軽量でメンテナンス性が高く、デザインの調整も容易です。

clip-pathプロパティの基本構文

clip-pathは、要素の表示範囲を切り抜く（クリップする）ためのプロパティです。基本的な構文は以下のとおりです。

Selector {
   clip-path: /*値*/;
}

polygon()関数を使うと、複数の座標点を指定して三角形などの多角形を描画できます。この仕組みを利用して、コメントボックスの下に付ける「しっぽ（三角の突起）」を表現します。

例1：チャット風のコメントボックス

次の例では、疑似要素::afterで生成した正方形をclip-pathで三角形に切り抜き、ボックスの外側に配置することで吹き出しを作っています。緑色と青色の2種類のコメントを、チャットアプリのように左右に振り分けて表示します。

<!DOCTYPE html>
<html>
   <head>
      <style>
         .cb {
            position: relative;
            padding: 2%;
            border-radius: 8%;
            width:25%;
         }
         .cb::after {
            content: "";
            position: absolute;
            height: 30px;
            width: 30px;
            bottom: -30px;
            left: 80%;
         }
         #one {
            box-shadow: inset 0 0 12px green;
            left: 65%;
         }
         #two {
            box-shadow: inset 0 0 12px blue;
            left: 4%;
         }
         #one::after {
            left: 80%;
            box-shadow: inset 0 0 12px green;
            clip-path: polygon(0 0, 100% 0, 100% 80%);
         }
         #two::after{
            left: 8%;
            box-shadow: inset 0 0 12px blue;
            clip-path: polygon(0 0, 100% 0, 0 80%);
         }
      </style>
   </head>
   <body>
      <div class="cb" id="one">
         Demo Comment 1
      </div>
      <div class="cb" id="two">
         Demo Comment 2
      </div>
   </body>
</html>

上記のコードをブラウザで実行すると、次のような出力が得られます。

CSSのclip-pathでテキスト入りのコメントボックス（吹き出し）を作成する方法

例2：本文への注釈として表示するコメントボックス

次の例では、段落内の特定の語句（<span>タグでハイライトされた部分）に対して、補足説明のコメントボックスを吹き出し形式で表示しています。用語解説や脚注的な情報を見栄えよく添えたい場合に便利な手法です。

<!DOCTYPE html>
<html>
   <head>
      <style>
         .cb {
            position: relative;
            padding: 2%;
            border-radius: 8%;
            width:15%;
            box-shadow: inset 0 0 12px orange;
         }
         .cb::after {
            content: "";
            position: absolute;
            height: 30px;
            width: 30px;
            bottom: -30px;
            left: 80%;
            box-shadow: inset 0 0 12px orange;
         }
         #one {
            left: 65%;
         }
         #one::after {
            left: 10%;
            clip-path: polygon(0 0, 100% 0, 0 80%);
         }
         span{
            background-color: lightblue;
         }
      </style>
   </head>
   <body>
      <div class="cb" id="one">
         accumsan
      </div>
      <p>
            Aenean tempor lobortis porttitor. Nulla erat purus, commodo <span>accumsan</span> viverra id, sollicitudin eget dui. Curabitur mollis scelerisque quam, vitae dictum diam dictum in. Aenean fermentum efficitur suscipit. Donec non ligula purus.
      </p>
   </body>
</html>

上記のコードをブラウザで実行すると、次のような出力が得られます。

CSSのclip-pathでテキスト入りのコメントボックス（吹き出し）を作成する方法

実装のポイントまとめ

  • .cbクラス：コメントボックス本体です。border-radiusで角丸にし、box-shadowのinset（内側指定）によって、ふんわりと光るような立体感を演出しています。
  • ::after疑似要素：content: ""で空の要素を生成し、ボックスの下端より30px下に絶対配置。しっぽのもととなる正方形（30px×30px）を作ります。
  • clip-path: polygon()：正方形の不要な部分を切り捨てて三角形に整形することで、吹き出しのしっぽを表現します。座標の指定方向を変えるだけで、しっぽの向きを左右どちらにも変更可能です。

このように、clip-pathと疑似要素を組み合わせれば、追加の画像やライブラリなしに、柔軟で見た目の美しいコメントボックスを実装できます。配色やサイズ、しっぽの位置を変えるだけで、さまざまなデザインに応用できるので、ぜひ自分のサイトに合わせてカスタマイズしてみてください。

  1. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>

  2. CSSのclip-pathでテキスト入りのコメントボックス（吹き出し）を作成する方法

    CSSのclip-pathプロパティを活用することで、吹き出しのようなコメントボックスを作成できます。画像ファイルに頼らずCSSだけで完結するため、軽量でメンテナンス性が高く、デザインの調整も容易です。 clip-pathプロパティの基本構文 clip-pathは、要素の表示範囲を切り抜く（クリップする）ためのプロパティです。基本的な構文は以下のとおりです。 Selector {    clip-path: /*値*/; } polygon()関数を使うと、複数の座標点を指定して三角形などの多角形を描画できます。この仕組みを利用して、コメントボックスの下に付ける「しっ