閉じる
閉じる

あまめも

サイトでラインっぽい対話型の表現ってどうやるんだ?ってなったので調べてみた

こんにちは! あますた(@amaguristar)です。

サイトを見ているとよく対話形式の文章(ラインっぽい表示)をみる事ってありますよね? 自分も気になったのでサクッと調べてみました。

 

cssでカスタム

実際にはページをみるとバルーンという名前で編集している方が多い様子。確かに言わんとしている事は何となく分かります。自分も例に習って「balloon」という名前で編集。

icon
こんな感じに作成できます!
icon
実際のコードはこんな感じ!

htmlには、

<div class=”balloon-wrap”>
 <div class=”balloonL”>
   <img src=”表示する画像のURL” alt=”画像の説明” class=”iconL” />
   <article>こんな感じに作成できます!</article>
 </div>
</div>

cssは、

/* バルーンをブロックで管理する為のラッピングクラス */
.balloon-wrap { overflow: hidden; } 
/* ←吹き出しのバルーン作成 */
.balloonL{
     position: relative;    /* 絶対配置の基準宣言 */
     display: inline-block/* コンテンツのサイズによってバルーンサイズ変更 */
     padding: 20px;              /* パディング領域 */
     border-radius: 10px;        /* 吹き出しの角を丸く */
     color: #010101;             /* コンテンツの色 */
     background-color: #ECECEB;  /* バルーンの背景の色 */
     margin-left: 110px;         /* 左に空けるスペース */
     margin-bottom: 35px;        /* 下に空けるスペース */
 }
 .balloonL .iconL{
     position: absolute;         /* 絶対配置宣言 */
     left: -110px;               /* 左に空けたスペースににアイコンを表示 */
     top: 0;                     /* 頂点を合わせる */
     width: 86px;                /* アイコンの幅 */
     height: 86px;               /* アイコンの高さ */
     border-radius: 50%;         /* 画像を丸くくり抜く */
 }
 .balloonL::before/* 吹き出しの三角形作成 */
     content: '';                /* 文字は空欄 */
     position: absolute;         /* 絶対配置宣言 */
     display: block;
     width: 0;
     height: 0;
     left: -30px;                /* 表示するx軸方向設定 */
     top: 50%;                   /* 表示するy軸方向設定 */
     margin-top: -15px;          /* 作成した▲を中央寄せ */
     /* ▲の向き設定 */
     border-top: 15px solid transparent;
     border-right: 15px solid #ECECEB;       /* ← */
     border-bottom: 15px solid transparent;
     border-left: 15px solid transparent;
 } 

です。::beforeの部分で三角形を作成しています。三角形の作成について詳しく説明しているページがありますので、下記にリンクを貼っておきます。とても分かりやすいです。

右配置のバルーンは単純に左右を入れ替えるだけですが、右寄せの為にfloatを使用しています。

icon
floatを使用して右寄せしてます!

htmlは単純に「balloonL」「iconL」の最後を「R」に変更。

<div class=”balloon-wrap”>
 <div class=”balloonR”>
   <img src=”表示する画像のURL” alt=”画像の説明” class=”iconR” />
   <article>こんな感じに作成できます!</article>
 </div>
</div>

コードは、

 /* →吹き出し */
 .balloonR {
     position: relative;    /* 絶対配置の基準宣言 */
     display: inline-block/* コンテンツのサイズによってバルーンサイズ変更 */
     padding: 20px;              /* パディング領域 */
     border-radius: 10px;        /* 吹き出しの角を丸く */
     color: #010101;             /* コンテンツの色 */
     background-color: #ECECEB;  /* バルーンの背景の色 */
     margin-right: 110px;        /* 右に空けるスペース */
     margin-bottom: 35px;        /* 下に空けるスペース */
     float: right;               /* 右寄せ表示 */
 }
 .balloonR .iconR{
     position: absolute;         /* 絶対配置宣言 */
     right: -110px;              /* 右に空けたスペースににアイコンを表示 */
     top: 0;                     /* 頂点を合わせる */
     width: 86px;                /* アイコンの幅 */
     height: 86px;               /* アイコンの高さ */
     border-radius: 50%;         /* 画像を丸くくり抜く */
 }
 .balloonR::before/* 吹き出しの三角形作成 */
     content: '';                /* 文字は空欄 */
     position: absolute;         /* 絶対配置宣言 */
     display: block;
     width: 0;
     height: 0;
     right: -30px;               /* 表示するx軸方向設定 */
     top: 50%;                   /* 表示するy軸方向設定 */
     margin-top: -15px;          /* 作成した▲を中央寄せ */
     /* ▲の向き設定 */
     border-top: 15px solid transparent;
     border-right: 15px solid transparent;
     border-bottom: 15px solid transparent;
     border-left: 15px solid #ECECEB;    /* → */
 } 

「balloonR」内で「float: right;」として右寄せ。このままだと後の要素でも意図しない回り込みが発生してしまうので、「balloon-wrapクラス」に「overflow: hidden;」を書き込んで、回り込みを解除しています(解除忘れ防止対策&今後の拡張用)

まとめ

icon
cssにコピーするだけのコードを下記に貼っておきます!
icon
適当に改良して使用して下さい!!
 /* ================================
     会話風バルーンクラス
  exp:)
     <div class="baloon-wrap">
         <div class="baloonR or L">
             <img ~~~~~~ class="iconR or L">
             <article> ~~~~~メッセージ~~~~</article>
         </div>
     <div>
  
  show:)
    「iconL」{ ~~~~~~~~メッセージ~~~~~~~~
                 ~~~~~~~~メッセージ~~~~~~~~ } 「iconR」
  
  caution:)
     imgはデフォルトで、サイズが86x86 の正方形
     imgはデフォルトで、丸くくり抜くので正方形以外だと表示がおかしくなる
 ==================================== */ 
 .balloon-wrap { overflow: hidden; }   /* バルーンをブロックで管理する為のラッピングクラス */
 /* ←吹き出し */
 .balloonL{
     position: relative;     /* 絶対配置の基準宣言 */
     display: inline-block/* コンテンツのサイズによってバルーンサイズ変更 */
     padding: 20px;              /* パディング領域 */
     border-radius: 10px;        /* 吹き出しの角を丸く */
     color: #010101;             /* コンテンツの色 */
     background-color: #ECECEB;  /* バルーンの背景の色 */
     margin-left: 110px;         /* 左に空けるスペース */
     margin-bottom: 35px;        /* 下に空けるスペース */
 }
 .balloonL .iconL{
     position: absolute;         /* 絶対配置宣言 */
     left: -110px;               /* 左に空けたスペースににアイコンを表示 */
     top: 0;                     /* 頂点を合わせる */
     width: 86px;                /* アイコンの幅 */
     height: 86px;               /* アイコンの高さ */
     border-radius: 50%;         /* 画像を丸くくり抜く */
 }
 .balloonL::before/* 吹き出しの三角形作成 */
     content: '';                /* 文字は空欄 */
     position: absolute;         /* 絶対配置宣言 */
     display: block;
     width: 0;
     height: 0;
     left: -30px;                /* 表示するx軸方向設定 */
     top: 50%;                   /* 表示するy軸方向設定 */
     margin-top: -15px;          /* 作成した▲を中央寄せ */
     /* ▲の向き設定 */
     border-top: 15px solid transparent;
     border-right: 15px solid #ECECEB;       /* ← */
     border-bottom: 15px solid transparent;
     border-left: 15px solid transparent;
 }
 
 /* →吹き出し */
 .balloonR {
     position: relative;    /* 絶対配置の基準宣言 */
     display: inline-block/* コンテンツのサイズによってバルーンサイズ変更 */
     padding: 20px;              /* パディング領域 */
     border-radius: 10px;        /* 吹き出しの角を丸く */
     color: #010101;             /* コンテンツの色 */
     background-color: #ECECEB;  /* バルーンの背景の色 */
     margin-right: 110px;        /* 右に空けるスペース */
     margin-bottom: 35px;        /* 下に空けるスペース */
     float: right;               /* 右寄せ表示 */
 }
 .balloonR .iconR{
     position: absolute;         /* 絶対配置宣言 */
     right: -110px;              /* 右に空けたスペースににアイコンを表示 */
     top: 0;                     /* 頂点を合わせる */
     width: 86px;                /* アイコンの幅 */
     height: 86px;               /* アイコンの高さ */
     border-radius: 50%;         /* 画像を丸くくり抜く */
 }
 .balloonR::before/* 吹き出しの三角形作成 */
     content: '';                /* 文字は空欄 */
     position: absolute;         /* 絶対配置宣言 */
     display: block;
     width: 0;
     height: 0;
     right: -30px;               /* 表示するx軸方向設定 */
     top: 50%;                   /* 表示するy軸方向設定 */
     margin-top: -15px;          /* 作成した▲を中央寄せ */
     /* ▲の向き設定 */
     border-top: 15px solid transparent;
     border-right: 15px solid transparent;
     border-bottom: 15px solid transparent;
     border-left: 15px solid #ECECEB;    /* → */
 } 
icon
もっと簡単な方法があるような気がしますが時間の関係で調べることを断念
icon
今度時間がある時にゆっくり調べます!
icon
・・・・
icon
多分

関連記事

  1. キーボード

    【HTML】入力する文字をキーボード風に表示したい【CSS】

  2. HTML

    HTMLで「引用符を自分好みに設定したい」って時は

  3. [甘]とりあえず、グローバルメニューの作成完了?

  4. 電話

    【HTML】「クリックして電話をかけたい!」それ簡単に実現できま…

  5. take092-thumbnail

    【WaznFilm更新】MarkdownをWordPressのG…

  6. take095-thumbnail

    【WaznFilm更新】FontAwesomeを通常のアプリ(W…

こんなメモもありますよ♪

  1. tatke050-wardbaskets-thumbnail
  2. take044-shougi-thumbnail

Twitter

ページ上部へ戻る