「CSSだけで吹き出し」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

CSSだけで吹き出し

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>CSSだけで吹き出し</title>
  7. <style type="text/css">
  8.   /* 左に三角（吹き出し） */
  9.   .fkdL {
  10.     box-sizing: border-box;
  11.     position: relative;
  12.     top:0;
  13.     left:0;
  14.     background: #ffeeff;
  15.     border: 1px solid #ff00ff;
  16.     padding:5px;
  17.   }
  18.   .fkdL:after, .fkdL:before {
  19.     border-color: transparent;
  20.     border-image: none;
  21.     border-style: solid solid solid none;
  22.     border-width: 5px 5px 5px 0px;
  23.     content: '';
  24.     position: absolute;
  25.     top: 5px;
  26.   }
  27.   .fkdL:after {
  28.     border-right: 10px solid #ffeeff;
  29.     left: -8px;
  30.   }
  31.   .fkdL:before {
  32.     border-right: 10px solid #ff00ff;
  33.     left: -10px;
  34.   }
  35.   
  36.   /* 右に三角（吹き出し） */
  37.   .fkdR {
  38.     box-sizing: border-box;
  39.     position: relative;
  40.     top:0;
  41.     left:0;
  42.     background: #ffeeff;
  43.     border: 1px solid #ff00ff;
  44.     padding:5px;
  45.   }
  46.   .fkdR:after, .fkdR:before {
  47.     border-color: transparent;
  48.     border-image: none;
  49.     border-style: solid none solid solid;
  50.     border-width: 5px 0px 5px 5px ;
  51.     content: '';
  52.     position: absolute;
  53.     top: 5px;
  54.   }
  55.   .fkdR:after {
  56.     border-left: 10px solid #ffeeff;
  57.     right: -8px;
  58.   }
  59.   .fkdR:before {
  60.     border-left: 10px solid #ff00ff;
  61.     right: -10px;
  62.   }
  63.   
  64.   /* 上に三角（吹き出し） */
  65.   .fkdT {
  66.     box-sizing: border-box;
  67.     position: relative;
  68.     top:0;
  69.     left:0;
  70.     background: #ffeeff;
  71.     border: 1px solid #ff00ff;
  72.     padding:5px;
  73.   }
  74.   .fkdT:after, .fkdT:before {
  75.     border-color: transparent;
  76.     border-image: none;
  77.     border-style: none solid solid solid;
  78.     border-width: 0px 5px 5px 5px ;
  79.     content: '';
  80.     position: absolute;
  81.     left:5px;
  82.   }
  83.   .fkdT:after {
  84.     border-bottom: 10px solid #ffeeff;
  85.     top: -8px;
  86.   }
  87.   .fkdT:before {
  88.     border-bottom: 10px solid #ff00ff;
  89.     top: -10px;
  90.   }
  91.   
  92.   /* 下に三角（吹き出し） */
  93.   .fkdB {
  94.     box-sizing: border-box;
  95.     position: relative;
  96.     top:0;
  97.     left:0;
  98.     background: #ffeeff;
  99.     border: 1px solid #ff00ff;
  100.     padding:5px;
  101.   }
  102.   .fkdB:after, .fkdB:before {
  103.     border-color: transparent;
  104.     border-image: none;
  105.     border-style: solid solid none solid;
  106.     border-width: 5px 5px 0px 5px ;
  107.     content: '';
  108.     position: absolute;
  109.     left:5px;
  110.   }
  111.   .fkdB:after {
  112.     border-top: 10px solid #ffeeff;
  113.     bottom: -8px;
  114.   }
  115.   .fkdB:before {
  116.     border-top: 10px solid #ff00ff;
  117.     bottom: -10px;
  118.   }
  120. </style>
  122. </head>
  123. <body>
  124. <h1>CSSだけで吹き出し</h1>
  126. <p class="fkdL">左に三角（吹き出し）</p>
  127. <p class="fkdR">右に三角（吹き出し）</p>
  128. <p class="fkdT">上に三角（吹き出し）</p>
  129. <p class="fkdB">下に三角（吹き出し）</p>
  132. <div>
  133. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  134. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  135. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  136. </div>
  138. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  139. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  140. </div>
  142. </body>
  143. </html>