CSSとJavaScriptでポップアップチャットウィンドウを作成する方法

CSSとJavaScriptを組み合わせることで、Webサイトの右下から表示されるポップアップ型のチャットウィンドウを簡単に実装できます。本記事では、チャットボタンをクリックするとウィンドウが開き、「閉じる」ボタンで閉じられる仕組みを、実際のコード例とともにわかりやすく解説します。

実装例（完全なコード）

以下のコードでは、画面右下に固定配置された「Chat」ボタンを用意し、クリックするとチャットフォームがポップアップで表示される構造になっています。

<!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;
    }
    * {
        box-sizing: border-box;
    }
    .openChatBtn {
        background-color: rgb(123, 28, 179);
        color: white;
        padding: 16px 20px;
        border: none;
        font-weight: 500;
        font-size: 18px;
        cursor: pointer;
        opacity: 0.8;
        position: fixed;
        bottom: 23px;
        right: 28px;
        width: 280px;
    }
    .openChat {
        display: none;
        position: fixed;
        bottom: 0;
        right: 15px;
        border: 3px solid #ff08086b;
        z-index: 9;
    }
    form {
        max-width: 300px;
        padding: 10px;
        background-color: white;
    }
    form textarea {
        width: 100%;
        font-size: 18px;
        padding: 15px;
        margin: 5px 0 22px 0;
        border: none;
        font-weight: 500;
        background: #d5e7ff;
        color: rgb(0, 0, 0);
        resize: none;
        min-height: 200px;
    }
    form textarea:focus {
        background-color: rgb(219, 255, 252);
        outline: none;
    }
    form .btn {
        background-color: rgb(34, 197, 107);
        color: white;
        padding: 16px 20px;
        font-weight: bold;
        border: none;
        cursor: pointer;
        width: 100%;
        margin-bottom: 10px;
        opacity: 0.8;
    }
    form .close {
        background-color: red;
    }
    form .btn:hover, .openChatBtn:hover {
        opacity: 1;
    }
</style>
</head>
<body>
<h1>Popup Chat Window Example</h1>
<h2>Click the below button to start chatting</h2>
<button class="openChatBtn" onclick="openForm()">Chat</button>
<div class="openChat">
<form>
<h1>Chat</h1>
<label for="msg"><b>Message</b></label>
<textarea placeholder="Type message.." name="msg" required></textarea>
<button type="submit" class="btn">Send</button>
<button type="button" class="btn close" onclick="closeForm()">
Close
</button>
</form>
</div>
<script>
    document.querySelector(".openChatBtn").addEventListener("click", openForm);
    document.querySelector(".close").addEventListener("click", closeForm);
    function openForm() {
        document.querySelector(".openChat").style.display = "block";
    }
    function closeForm() {
        document.querySelector(".openChat").style.display = "none";
    }
</script>
</body>
</html>

コードのポイント

.openChatBtn：position: fixed を使って画面右下に常に表示されるチャット起動ボタンです。
.openChat：初期状態は display: none で非表示になっており、z-index を指定することで他の要素より手前に表示されます。
openForm() / closeForm()：JavaScriptの関数が、display プロパティを block / none に切り替えることで、チャットウィンドウの開閉を制御しています。
:hover 擬似クラス：ボタンにカーソルを合わせた際に透明度が変化し、視覚的なフィードバックを与えます。

実行結果

上記のコードを実行すると、まず次のようにページ右下に「Chat」ボタンが表示されます。

CSSとJavaScriptでポップアップチャットウィンドウを作成する方法

この「Chat」ボタンをクリックすると、以下のようにチャットウィンドウがポップアップ表示されます。メッセージを入力して「Send」で送信、「Close」でウィンドウを閉じることができます。

CSSとJavaScriptでポップアップチャットウィンドウを作成する方法

この仕組みを応用すれば、問い合わせフォームやカスタマーサポート用のチャット機能など、さまざまな場面で活用できるUIを簡単に作成できます。

CSSで画面を50/50に分割する方法を徹底解説

CSSでチャットメッセージを作成する方法をわかりやすく解説

CSSとJavaScriptでリスト表示とグリッド表示を切り替える方法【サンプルコード付き】
Webアプリケーションや管理画面などでは、コンテンツの表示形式を「リスト表示」と「グリッド表示」で切り替えられるUIがよく使われています。本記事では、CSSとJavaScript（バニラJS）だけを使って、ボタンクリックでリスト表示とグリッド表示を切り替える機能を実装する方法を解説します。実装のポイントこの機能は、以下の3つの要素で構成されています。カラムレイアウト：float を使って各カラムを横並びに配置します切り替えボタン：アクティブ状態のスタイルを持つボタンを配置しますJavaScript関数：カラムの幅（width）を変更し、ボタンの active クラスを付け替えますサンプルコード
CSSとJavaScriptで拡張グリッド（クリックで展開するグリッド）を作成する方法
CSSとJavaScriptを組み合わせることで、カードをクリックすると詳細パネルが展開される「拡張グリッド（Expanding Grid）」を簡単に実装できます。本記事では、3カラム構成のグリッドを例に、具体的な実装手順をわかりやすく解説します。実装のポイントクリックイベント：各カラムにonclick属性を設定し、クリックされたカラムに対応するタブを開きます。表示の切り替え：新しいタブを開く前に既存のタブをすべて非表示にすることで、常に1つのタブだけが展開された状態を保ちます。閉じるボタン：タブ右上の「×」ボタンをクリックするとパネルが閉じ、元のグリッド表示に戻ります。サンプル