Tool management

文章カウントツール

総務部 · エイアイ花子
登録情報は保存後すぐに反映されます。HTML の変更は新しいバージョンとして保存します。

HTMLを更新

新しいindex.html（任意）

選ばない場合は現在の内容で新しいバージョンを作成します。

HTMLソース

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>文章カウントツール</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 0; background: #f4f5f1; color: #1d2922; font-family: system-ui, sans-serif; line-height: 1.6; }
    main { width: min(760px, 92vw); margin: 48px auto; padding: 28px; border: 1px solid #d4ddd6; border-radius: 18px; background: white; box-shadow: 0 12px 30px #183c2820; }
    h1 { margin: 0 0 4px; font-size: clamp(24px, 5vw, 32px); }
    .intro { margin: 0 0 24px; color: #526359; }
    label { display: block; margin: 18px 0 6px; font-weight: 700; }
    textarea, input { width: 100%; padding: 12px; border: 1px solid #a9b7ad; border-radius: 8px; font: inherit; }
    textarea { min-height: 240px; resize: vertical; }
    input { max-width: 180px; }
    textarea:focus, input:focus { outline: 3px solid #d5e9d7; border-color: #256348; }
    .metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
    .metric { padding: 16px; border-radius: 10px; background: #edf5e8; }
    .metric span { display: block; color: #526359; font-size: 13px; }
    .metric strong { display: block; margin-top: 3px; font-size: 28px; line-height: 1.25; font-variant-numeric: tabular-nums; }
    .limit { margin-top: 22px; }
    .limit p { margin: 8px 0 0; font-weight: 700; }
    .limit .over { color: #aa3833; }
    progress { width: 100%; height: 12px; accent-color: #256348; }
    button { margin-top: 20px; padding: 9px 15px; border: 1px solid #a9b7ad; border-radius: 8px; color: #1d2922; background: white; font: inherit; cursor: pointer; }
    button:hover { background: #f4f7f2; }
    @media (max-width: 560px) { main { margin: 18px auto; padding: 20px; } .metrics { grid-template-columns: 1fr 1fr; } }
  </style>
</head>
<body>
  <main>
    <h1>文章カウントツール</h1>
    <p class="intro">文章を貼り付けると、文字数や行数をその場で確認できます。</p>
    <label for="text">確認する文章</label>
    <textarea id="text" placeholder="ここに文章を入力または貼り付けてください"></textarea>
    <section class="metrics" aria-label="集計結果">
      <div class="metric"><span>文字数</span><strong id="characters">0</strong></div>
      <div class="metric"><span>空白を除く文字数</span><strong id="withoutSpaces">0</strong></div>
      <div class="metric"><span>行数</span><strong id="lines">0</strong></div>
      <div class="metric"><span>段落数</span><strong id="paragraphs">0</strong></div>
      <div class="metric"><span>原稿用紙（400字）</span><strong id="pages">0</strong></div>
    </section>
    <div class="limit">
      <label for="target">目標文字数（任意）</label>
      <input id="target" type="number" min="1" step="1" placeholder="例：500">
      <progress id="progress" max="100" value="0" hidden></progress>
      <p id="remaining" aria-live="polite"></p>
    </div>
    <button id="clear" type="button">文章を消す</button>
  </main>
  <script>
    const text = document.querySelector('#text');
    const target = document.querySelector('#target');
    const progress = document.querySelector('#progress');
    const remaining = document.querySelector('#remaining');
    const count = value => [...value].length;
    function update() {
      const value = text.value;
      const characters = count(value);
      const withoutSpaces = count(value.replace(/\s/gu, ''));
      const lines = value ? value.split(/\r\n|\r|\n/u).length : 0;
      const paragraphs = value.trim() ? value.trim().split(/(?:\r\n|\r|\n)\s*(?:\r\n|\r|\n)/u).filter(part => part.trim()).length : 0;
      document.querySelector('#characters').textContent = characters.toLocaleString('ja-JP');
      document.querySelector('#withoutSpaces').textContent = withoutSpaces.toLocaleString('ja-JP');
      document.querySelector('#lines').textContent = lines.toLocaleString('ja-JP');
      document.querySelector('#paragraphs').textContent = paragraphs.toLocaleString('ja-JP');
      document.querySelector('#pages').textContent = characters ? Math.ceil(characters / 400).toLocaleString('ja-JP') : '0';
      const goal = Number(target.value);
      progress.hidden = !Number.isInteger(goal) || goal < 1;
      remaining.textContent = '';
      remaining.className = '';
      if (!progress.hidden) {
        progress.value = Math.min(100, characters / goal * 100);
        const difference = goal - characters;
        remaining.textContent = difference >= 0 ? `目標まであと ${difference.toLocaleString('ja-JP')} 文字` : `目標を ${(-difference).toLocaleString('ja-JP')} 文字超えています`;
        if (difference < 0) remaining.className = 'over';
      }
    }
    text.addEventListener('input', update);
    target.addEventListener('input', update);
    document.querySelector('#clear').addEventListener('click', () => { text.value = ''; update(); text.focus(); });
    update();
  </script>
</body>
</html>

変更内容