【WordPress】CSSでチャットアプリ風UIを作る（Part1）

WordPress(ワードプレス)

2023.11.142023.11.15

CSSでチャットアプリ風UIを作ってみます。CSSとHTMLとJavaScriptを使用してチャットアプリ風のUIを作成することは楽しいプロジェクトです。うまく使えば、お問い合わせフォームなどにも活用できそうです。

HTML部分を作成する
JavaScriptで送信時にチャット風メッセージを表示する
DOMContentLoaded イベントリスナー
messageInput のキーダウンイベントリスナー
appendMessage 関数
sendMessage 関数
まとめ

HTML部分を作成する

基本的なスタイリングの手順を示します。この例では、HTMLとCSSを使用して簡単なチャットウィンドウを作成します。

まずはベースになるHTMLのフォームを準備します。

<div class="chat-container">
    <div class="chat-messages" id="chat-messages">
        <!-- チャットメッセージがここに表示されます -->
    </div>
    <div class="chat-input">
        <input type="text" id="message-input" placeholder="メッセージを入力">
        <button id="send-button">送信</button>
    </div>
</div>

JavaScriptで送信時にチャット風メッセージを表示する

HTMLとJavaScriptを使用して、チャットメッセージを入力し、送信するための基本的なロジックを実装しています。

 document.addEventListener("DOMContentLoaded", function () {
    const messageInput = document.getElementById("message-input");
    const chatMessages = document.getElementById("chat-messages");

    messageInput.addEventListener("keydown", function (e) {
        if (e.key === "Enter" && messageInput.value.trim() !== "") {
            const message = messageInput.value;
            messageInput.value = "";
            appendMessage(message);
        }
    });

    function appendMessage(message) {
        const messageElement = document.createElement("div");
        messageElement.className = "message";
        messageElement.textContent = message;
        chatMessages.appendChild(messageElement);
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }
});

    document.getElementById("send-button").addEventListener("click", function () {
        sendMessage();
    });

    function sendMessage() {
        var messageInput = document.getElementById("message-input");
        var messageText = messageInput.value;

        if (messageText.trim() !== "") {
            // Add your code to handle the message, for example, appending it to the chat messages div
            var chatMessages = document.getElementById("chat-messages");
            var newMessage = document.createElement("div");
            newMessage.textContent = messageText;
            chatMessages.appendChild(newMessage);

            // Clear the input field
            messageInput.value = "";
        }
    }