あまめも

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

こんにちは! あますた(@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. [甘]Google+でコメントを返信する方法が分からなかったので…

  2. [甘]プラグイン『WP Social Bookmarking L…

  3. [甘]ブログにアップすると写真の向きがおかしい物がたまにあるので…

  4. Macで簡単に画像を連続でリサイズする方法が簡単でびっくり![A…

  5. 「Git」を使い始めたのは良いのですがコマンドを忘れそうなので一…

  6. 知らなかった!WordPressで写真(画像)にキャプションを付…

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

Twitter

ページ上部へ戻る