<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字数カウント</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
font-family: Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
background: #f4f6f8;
color: #222;
display: flex;
justify-content: center;
align-items: center;
padding: 30px;
}
.container {
width: 100%;
max-width: 900px;
background: white;
padding: 30px;
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}
h1 {
margin-top: 0;
text-align: center;
}
textarea {
width: 100%;
height: 350px;
resize: vertical;
padding: 18px;
font-size: 16px;
line-height: 1.7;
border: 1px solid #ccc;
border-radius: 10px;
outline: none;
}
textarea:focus {
border-color: #555;
}
.counts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
margin-top: 20px;
}
.count-box {
background: #f7f7f7;
padding: 18px;
border-radius: 10px;
text-align: center;
}
.count-box strong {
display: block;
font-size: 28px;
margin-top: 5px;
}
.buttons {
margin-top: 20px;
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
button {
border: none;
padding: 12px 22px;
border-radius: 8px;
cursor: pointer;
font-size: 15px;
background: #222;
color: white;
}
button:hover {
opacity: 0.8;
}
</style>
</head>
<body>
<div class="container">
<h1>文字数カウント</h1>
<textarea
id="text"
placeholder="ここに文章を入力してください"
></textarea>
<div class="counts">
<div class="count-box">
文字数
<strong id="characterCount">0</strong>
</div>
<div class="count-box">
空白を除く
<strong id="noSpaceCount">0</strong>
</div>
<div class="count-box">
行数
<strong id="lineCount">0</strong>
</div>
</div>
<div class="buttons">
<button id="copyButton">
コピー
</button>
<button id="clearButton">
すべて削除
</button>
</div>
</div>
<script>
const textArea = document.getElementById("text");
const characterCount =
document.getElementById("characterCount");
const noSpaceCount =
document.getElementById("noSpaceCount");
const lineCount =
document.getElementById("lineCount");
const copyButton =
document.getElementById("copyButton");
const clearButton =
document.getElementById("clearButton");
function countText() {
const text = textArea.value;
// 全文字数
characterCount.textContent = text.length;
// 空白・改行を除いた文字数
noSpaceCount.textContent =
text.replace(/\s/g, "").length;
// 行数
if (text.length === 0) {
lineCount.textContent = 0;
} else {
lineCount.textContent =
text.split("\n").length;
}
}
textArea.addEventListener(
"input",
countText
);
copyButton.addEventListener(
"click",
async () => {
await navigator.clipboard.writeText(
textArea.value
);
copyButton.textContent =
"コピーしました";
setTimeout(() => {
copyButton.textContent =
"コピー";
}, 1500);
}
);
clearButton.addEventListener(
"click",
() => {
textArea.value = "";
countText();
textArea.focus();
}
);
</script>
</body>
</html>
