文字数カウント

入力欄にテキストをペースト（貼り付け）して「文字数をカウント」ボタンを押したらテキストの文字数がわかる、というシンプルなツール（Webアプリ）です。
※このツールは「オンライン統合開発環境 Replit」上で動作しています。

ツールを使ってみる

アプリの詳細情報

このアプリを構成する各ファイルのソースコードとファイル＆フォルダ構成です。Replit上で同じ環境を構築したら動作すると思いますが一応ご参考まで。

Create Repl

HTML, CSS, JS

ファイル＆フォルダ構成

/project_root
│── index.html
│── script.js
│── styles.css

各ファイルのソースコード

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字数カウンター</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>文字数カウント</h1>
    <textarea id="text-input" placeholder="こちらにテキストを入力してください..."></textarea><br>
    <div class="button-container"> <!-- ボタンのコンテナを追加 -->
        <button onclick="countCharacters()">文字数をカウント</button>
        <button onclick="clearText()">クリア</button>
    </div>
    <p>文字数: <span id="char-count">0</span></p>

    <script src="script.js"></script>
</body>
</html>

styles.css

body {
    font-family: 'Meiryo', 'Hiragino Kaku Gothic Pro', 'Arial', sans-serif;
    background-color: #ffffff;
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0;
    padding: 20px;
    color: #555;
}

h1 {
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: normal;
}

.button-container {
    display: flex;
    gap: 10px;
    width: 300px; /* コンテナの幅をテキストエリアと同じにする */
}

textarea, button {
    font-size: 14px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px;
    margin: 10px 0;
    outline: none;
    transition: all 0.2s;
}

textarea {
    width: 300px;
    height: 150px;
    resize: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

button {
    flex: 1; /* ボタンを均等に配置するためのスタイル */
    background-color: #777;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

button:hover {
    background-color: #555;
}

p {
    font-size: 16px;
}

span {
    font-weight: bold;
}

script.js

function countCharacters() {
    let text = document.getElementById("text-input").value;
    let count = text.length;
    document.getElementById("char-count").textContent = count;
}

function clearText() {
    document.getElementById("text-input").value = ""; // テキストエリアの内容をクリア
    document.getElementById("char-count").textContent = "0"; // 文字数表示を0にリセット
}

社内にデジタルに詳しい人材がいない…
デジタルに関して相談できる人が身近にいない..
そんな経営者さんは是非お気軽にご相談ください。

お問い合わせはこちら