CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでコールアウトメッセージを作成する方法をわかりやすく解説

CSSを使えば、画面の隅に表示されるコールアウトメッセージ（通知ボックス）を簡単に作成できます。コールアウトとは、ユーザーの注意を引きつけるためにページ上に表示される小型のポップアップ型メッセージで、お知らせやプロモーション情報などを伝えたい場面でよく活用されています。

以下のコードでは、position: fixed を使用して画面右下に固定表示されるコールアウトを実装しています。右上の閉じるボタン（×）をクリックすると、onclickイベントによってコールアウトが非表示になる仕組みです。

実装例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
   body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif}
   .callout {
      position: fixed;
      bottom: 35px;
      right: 20px;
      margin-left: 20px;
      max-width: 300px;
   }
   .calloutHeading {
      padding: 25px 15px;
      background: rgb(68, 93, 235);
      font-size: 30px;
      color: white;
   }
   .calloutMessage {
      padding: 15px;
      background-color: #ccc;
      color: black
   }
   .close {
      position: absolute;
      top: 5px;
      right: 15px;
      color: white;
      font-size: 30px;
      cursor: pointer;
   }
   .close:hover {
      color: lightgrey;
   }
</style>
</head>
<body>
<h1>Callout Message Example</h1>
<h3>Product 2</h3>
<h3>Product 3</h3>
<h3>Product 4</h3>
<div class="callout">
<div class="calloutHeading">Check our offers</div>
<span class="close" onclick="this.parentElement.style.display='none';">×</span>
<div class="calloutMessage">
<p>Before you leave this page don't forget to check our other offers <a href="#">Check
Them</a></p>
</div>
</div>
</body>
</html>

出力結果

上記のコードを実行すると、次のように画面右下にコールアウトメッセージが表示されます。

CSSでコールアウトメッセージを作成する方法をわかりやすく解説

コードのポイント解説

  • .callout： position: fixed により画面右下（bottom: 35px、right: 20px）に固定配置し、max-width: 300px で横幅を制限しています。
  • .calloutHeading： コールアウトの見出し部分です。青系の背景色に白い文字を組み合わせ、paddingで適度な余白を確保することで視認性を高めています。
  • .calloutMessage： メッセージ本文を表示するエリアです。薄いグレーの背景色を指定し、見出しとのコントラストを作っています。
  • .close： 閉じるボタンです。position: absolute で見出しの右上に重ねて配置し、cursor: pointer でクリックできることを示しています。ホバー時には :hover 疑似クラスで色が変化し、視覚的なフィードバックを提供します。

このように、CSSと数行のJavaScriptを組み合わせるだけで、実用性の高いコールアウトメッセージを作成できます。viewportメタタグによるレスポンシブ対応も含まれているため、スマートフォンなどのモバイルデバイスでも問題なく表示されます。サイトのお知らせやキャンペーン告知など、さまざまな用途に応じて背景色や文言をカスタマイズしてみてください。

  1. CSSでコールアウトメッセージを作成する方法をわかりやすく解説

    CSSを使えば、画面の隅に表示されるコールアウトメッセージ（通知ボックス）を簡単に作成できます。コールアウトとは、ユーザーの注意を引きつけるためにページ上に表示される小型のポップアップ型メッセージで、お知らせやプロモーション情報などを伝えたい場面でよく活用されています。 以下のコードでは、position: fixed を使用して画面右下に固定表示されるコールアウトを実装しています。右上の閉じるボタン（×）をクリックすると、onclickイベントによってコールアウトが非表示になる仕組みです。 実装例 <!DOCTYPE html> <html> <head>

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>