閉じる
閉じる

あまめも

HPでライン風の対話型吹き出しの表示に枠を付けたい!!ってなったので調べてみた。

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

前回、対話型の吹き出し表示をなんとか作成。使ってみて「やっぱり枠があった方が良いよな?」ってなったので今回は枠をつけることにしました。

 

枠をつける方法

icon
前回はこんな感じのものを作成!
icon
今回はこの吹き出しに枠をつけようと思います♪

まず、単純に枠を作成しようと思ったら「borderプロパティ」を追加。

.balloonL{
     position: relative;     
     display: inline-block;  
     padding: 20px;              
     border: solid 1px #000;     /* 枠の設定{ 種類,幅,色 } */
     border-radius: 10px;        
     color: #010101;             
     background-color: #ECECEB;  
     margin-left: 110px;         
     margin-bottom: 35px;        
 } 

前回のコード(詳細はここをクリック)に「border」プロパティを追加設定。この状態だと

icon
こんな感じに表示されます!

と表示されます。このままだと三角形に枠が表示されないので、三角形にも枠を表示する為に色を変更。

.balloonL::before/* 吹き出しの三角形作成 */
     content: '';                
     position: absolute;         
     display: block;
     width: 0;
     height: 0;
     left: -30px;                
     top: 50%;                   
     margin-top: -15px;          
     /* ▲の向き設定 */
     border-top: 15px solid transparent;
     border-right: 15px solid #000;       /* ← 枠と同じ色に変更*/
     border-bottom: 15px solid transparent;
     border-left: 15px solid transparent;
 } 

この状態で表示すると、

icon
三角形の色が変わる!

三角形が塗りつぶされて表示。あとは背景と同じ色の三角形を少しずらして表示すると良いので、

.balloonL::after/* 背景と同じ色の三角形作成 */
     content: '';                
     position: absolute;         
     display: block;
     width: 0;
     height: 0;
     left: -29px;                /* 表示するx軸方向を少しずらす設定 */
     top: 50%;                   
     margin-top: -15px;          
     /* ▲の向き設定 */
     border-top: 15px solid transparent;
     border-right: 15px solid #ECECEB;       /* ← 背景色と同じ色にする*/
     border-bottom: 15px solid transparent;
     border-left: 15px solid transparent;
 } 

icon
枠っぽく表示される!!

まとめ

枠付きのコードをまとめると、

/* ================================
  会話風バルーンクラス 枠付き
  exp:)
  <div class="baloon-wrap">
  <div class="baloonRB or LB">
  <img ~~~~~~ class="iconR or L">
  <article> ~~~~~メッセージ~~~~</article>
  </div>
  <div>
  
  show:)
  「iconL」{ ~~~~~~~~メッセージ~~~~~~~~
  ~~~~~~~~メッセージ~~~~~~~~ } 「iconR」
  
  caution:)
  imgはデフォルトで、サイズが86x86 の正方形
  imgはデフォルトで、丸くくり抜くので正方形以外だと表示がおかしくなる
  ==================================== */ 
 .balloon-wrap { overflow: hidden; }   /* バルーンをブロックで管理する為のラッピングクラス */ 
 /* ←吹き出し */
 .balloonLB{
     position: relative;     /* 絶対配置の基準宣言 */
     display: inline-block/* コンテンツのサイズによってバルーンサイズ変更 */
     padding: 20px;              /* パディング領域 */
     border-radius: 10px;        /* 吹き出しの角を丸く */
     color: #010101;             /* コンテンツの色 */
     border: solid 1px #000;     /* 枠設定{ 線の種類,太さ,色 } */
     background-color: #ECECEB;  /* バルーンの背景の色 */
     margin-left: 110px;         /* 左に空けるスペース */
     margin-bottom: 35px;        /* 下に空けるスペース */
 }
 .balloonLB .iconL{
     position: absolute;         /* 絶対配置宣言 */
     left: -110px;               /* 左に空けたスペースににアイコンを表示 */
     top: 0;                     /* 頂点を合わせる */
     width: 86px;                /* アイコンの幅 */
     height: 86px;               /* アイコンの高さ */
     border-radius: 50%;         /* 画像を丸くくり抜く */
 }
 .balloonLB::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 #000;       /* ← */
     border-bottom: 15px solid transparent;
     border-left: 15px solid transparent;
 }
 .balloonLB::after/* 枠風にする為に背景色と同じ三角形を少しずらして作成 */
     content: '';                /* 文字は空欄 */
     position: absolute;         /* 絶対配置宣言 */
     display: block;
     width: 0;
     height: 0;
     left: -29px;                /* 表示する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;
 }
 /* →吹き出し */
 .balloonRB {
     position: relative;    /* 絶対配置の基準宣言 */
     display: inline-block; /* コンテンツのサイズによってバルーンサイズ変更 */
     padding: 20px;              /* パディング領域 */
     border-radius: 10px;        /* 吹き出しの角を丸く */
     border: solid 1px #000;     /* 枠設定{ 線の種類,太さ,色 } */
     color: #010101;             /* コンテンツの色 */
     background-color: #ECECEB;  /* バルーンの背景の色 */
     margin-right: 110px;        /* 右に空けるスペース */
     margin-bottom: 35px;        /* 下に空けるスペース */
     float: right;               /* 右寄せ表示 */
 }
 .balloonRB .iconR{
     position: absolute;         /* 絶対配置宣言 */
     right: -110px;              /* 右に空けたスペースににアイコンを表示 */
     top: 0;                     /* 頂点を合わせる */
     width: 86px;                /* アイコンの幅 */
     height: 86px;               /* アイコンの高さ */
     border-radius: 50%;         /* 画像を丸くくり抜く */
 }
 .balloonRB::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 #000;    /* → */
 }
 .balloonRB::after/* 枠風にする為に背景色と同じ三角形を少しずらして作成 */
     content: '';                /* 文字は空欄 */
     position: absolute;         /* 絶対配置宣言 */
     display: block;
     width: 0;
     height: 0;
     right: -29px;               /* 表示する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
枠を作る為に「before」で黒三角を作成して、「after」で背景と同じ色の三角を作成して少しずらして表示するのがポイント。
icon
結構コードが長くなったな・・・。
icon
もっとスマートなやり方無いものか?

関連記事

  1. 良いか悪いかは別として複数サイトで同じ「css」を参照させてみま…

  2. お店の「お知らせ」を開いたら記事ページに飛ぶようにした方が良いん…

  3. Markdownを使用して簡単にgutenbergの再利用ブロッ…

  4. ず〜と気になってたHPの文字をマーカー(蛍光ペン)でなぞった感じ…

  5. [WordPress]「外部サイトのリンクをアイキャッチ込で分か…

  6. まとめ

    「Git」の履歴が見づらいのでまとめたい、そんな時の修正方法

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

  1. HTML
  2. 飲む酢

Twitter

ページ上部へ戻る