フキダシのサンプル

2021・07・03

＊キャラクターなどにフキダシをつけて喋らせるレイアウトのサンプルです＊

ここ最近、ブログサイトでキャラクターやアイコンにフキダシをつけて会話形式にするという見せ方が流行っています。

長い文章が続きがちなブログでは、画像などのアクセントを所々に入れることが重要ですが、画像が多くなるとWebページのサイズが重くなってしまいます。
そこで、元々の画像サイズが極めて軽いアイコンなどにフキダシをつけて喋らせることで、ページを重くすることなく、ブログにメリハリをつけることが可能となります。

フキダシを作るには、
１）フキダシの形の画像を用意して、テキスト要素の背景画像に設定する
２）要素そのものをフキダシの形にする

といった方法がありますが、今回は２）要素そのものをフキダシの形にする…のサンプルを用意しました。

今回のメインは、CSSのclip-pathプロパティと、transform: rotateY()です。

フキダシの向きが右向きのものと左向きのものと、両方用意しています。（１つは反転させただけですが）
なお、iOSでは、rotateYで回転させる要素の親要素に

perspective: ** px;

というCSS設定を加えないと、表示がされないなどの問題が発生する点には注意が必要です。

主な使用機能：CSS

今日のテーマは何ですか？

今日のテーマは○○だよ！

上記のサンプルコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）

HTML・CSS

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
  </head>
  <style>
    p {
      margin-block-start: 0;
      margin-block-end: 0;
    }
    .fukidashi {
      width: 80%;
      display: flex;
      margin: 2rem auto;
      justify-content: center;
      align-items: center;
      gap: 15px;
    }
    .fukidashi p {
      width: fit-content;
      min-width: 150px;
      padding: 20px 30px;
      color: black;
      background-color: white;
      line-height: 1.5;
    }
    .fukidashi img {
      width: 100%;
      max-width: 100px;
      min-width: 50px;
    }
    .fukidashi_outer_1 {
      padding: 2px;
      background-color: black;
      clip-path: polygon(1% 50%, 5% 39%, 5% 0%, 95% 0%, 95% 100%, 5% 100%, 5% 61%, 1% 50% );
    }
    .fukidashi_1 {
      clip-path: polygon(1.5% 50%, 5% 40%, 5% 0%, 95% 0%, 95% 100%, 5% 100%, 5% 60%, 1.5% 50% );
    }
    .fukidashi_outer_2 {
      padding: 2px;
      background-color: black;
      clip-path: polygon(1% 50%, 5% 39%, 5% 0%, 95% 0%, 95% 100%, 5% 100%, 5% 61%, 1% 50% );
      transform: rotateY(180deg);
    }
    .fukidashi_2 {
      -webkit-perspective: 500px;
      perspective: 500px;
      clip-path: polygon(1.5% 50%, 5% 40%, 5% 0%, 95% 0%, 95% 100%, 5% 100%, 5% 60%, 1.5% 50% );
    }
    .fukidashi_2 span {
      display: block;
      transform: rotateY(180deg);
    }

  </style>
  <body>
    <div class="fukidashi_box">
      <div class="fukidashi">
        <img src="https://web-de-asobo.net/wp-content/uploads/2021/07/kao.jpg" alt="顔の画像">
        <div class="fukidashi_outer_1">
          <p class="fukidashi_1">今日のテーマは何ですか？</p>
        </div>
      </div>
      <div class="fukidashi">
        <div class="fukidashi_outer_2">
          <p class="fukidashi_2"><span>今日のテーマは○○だよ！</span></p>
        </div>
        <img src="https://web-de-asobo.net/wp-content/uploads/2021/07/kao.jpg" alt="顔の画像">
      </div>
    </div>
  </body>
</html>