パスワード強度メーター Password Strength
パスワードの強度をリアルタイムに可視化するインジケーター。
ライブデモ
- 8文字以上
- 大文字を含む
- 数字を含む
- 特殊文字を含む
ソースコード
<div class="demo-pwstrength">
<label class="demo-pwstrength-label" for="demo-pw-input">パスワード</label>
<div class="demo-pwstrength-wrap">
<input class="demo-pwstrength-input" id="demo-pw-input" type="password" placeholder="パスワードを入力..." />
<button class="demo-pwstrength-toggle" type="button" aria-label="パスワードを表示">
<svg class="demo-pwstrength-eye" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
</button>
</div>
<div class="demo-pwstrength-bar">
<div class="demo-pwstrength-segment"></div>
<div class="demo-pwstrength-segment"></div>
<div class="demo-pwstrength-segment"></div>
<div class="demo-pwstrength-segment"></div>
</div>
<div class="demo-pwstrength-info">
<span class="demo-pwstrength-level"></span>
</div>
<ul class="demo-pwstrength-rules">
<li class="demo-pwstrength-rule" data-rule="length">8文字以上</li>
<li class="demo-pwstrength-rule" data-rule="upper">大文字を含む</li>
<li class="demo-pwstrength-rule" data-rule="number">数字を含む</li>
<li class="demo-pwstrength-rule" data-rule="special">特殊文字を含む</li>
</ul>
</div>.demo-pwstrength { max-width: 320px; }
.demo-pwstrength-label { display: block; font-size: 13px; font-weight: 600; color: #333; margin-bottom: 6px; }
.demo-pwstrength-wrap { position: relative; }
.demo-pwstrength-input {
width: 100%; padding: 10px 40px 10px 12px; border: 2px solid #d1d5db; border-radius: 8px;
font-size: 14px; outline: none; transition: border-color 0.2s, box-shadow 0.2s;
box-sizing: border-box;
}
.demo-pwstrength-input:focus {
border-color: var(--ui-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 20%, transparent);
}
.demo-pwstrength-toggle {
position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
background: none; border: none; cursor: pointer; color: #9ca3af; padding: 4px;
}
.demo-pwstrength-toggle:hover { color: #6b7280; }
.demo-pwstrength-bar { display: flex; gap: 4px; margin-top: 8px; }
.demo-pwstrength-segment {
flex: 1; height: 5px; border-radius: 3px; background: #e5e7eb;
transition: background 0.3s;
}
.demo-pwstrength-info { margin-top: 6px; min-height: 18px; }
.demo-pwstrength-level { font-size: 12px; font-weight: 600; }
.demo-pwstrength-rules { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 4px; }
.demo-pwstrength-rule {
font-size: 12px; color: #9ca3af; padding-left: 20px; position: relative;
transition: color 0.2s;
}
.demo-pwstrength-rule::before {
content: ''; position: absolute; left: 0; top: 3px;
width: 12px; height: 12px; border-radius: 50%; border: 2px solid #d1d5db;
transition: border-color 0.2s, background 0.2s;
}
.demo-pwstrength-rule.pass { color: #333; }
.demo-pwstrength-rule.pass::before {
border-color: var(--ui-primary); background: var(--ui-primary);
}(function(){
var input = document.querySelector('#demo-pw-input');
var toggle = document.querySelector('.demo-pwstrength-toggle');
var segments = document.querySelectorAll('.demo-pwstrength-segment');
var level = document.querySelector('.demo-pwstrength-level');
var rules = { length: /.{8,}/, upper: /[A-Z]/, number: /[0-9]/, special: /[^A-Za-z0-9]/ };
var labels = ['', '弱い', 'やや弱い', '強い', 'とても強い'];
var colors = ['', '#ef4444', '#f59e0b', 'var(--ui-primary)', '#10b981'];
toggle.addEventListener('click', function() {
var isPassword = input.type === 'password';
input.type = isPassword ? 'text' : 'password';
this.setAttribute('aria-label', isPassword ? 'パスワードを隠す' : 'パスワードを表示');
});
input.addEventListener('input', function() {
var val = this.value;
var score = 0;
Object.keys(rules).forEach(function(key) {
var el = document.querySelector('[data-rule="' + key + '"]');
var pass = rules[key].test(val);
if (pass) score++;
el.classList.toggle('pass', pass);
});
if (!val) score = 0;
segments.forEach(function(s, i) {
s.style.background = i < score ? colors[score] : '#e5e7eb';
});
level.textContent = val ? labels[score] : '';
level.style.color = colors[score] || '';
});
})();AIプロンプト
Basic
パスワード強度メーターをHTML/CSS/JSで作ってください。入力に応じて4段階のバーで強度を表示します。
Custom
以下の仕様でパスワード強度メーターを実装してください。 - 4段階の強度バー（弱い/やや弱い/強い/とても強い） - 条件チェックリスト（8文字以上、大文字、数字、特殊文字） - プライマリカラー: #2563eb - パスワード表示/非表示トグル - リアルタイムのアニメーション付き評価 - 各条件クリア時のチェックマーク表示
Advanced
アクセシビリティ対応のパスワード強度メーターを実装してください。 - aria-valuenow / aria-valuemax で強度をスクリーンリーダーに通知 - role="progressbar" による強度バーのセマンティクス - aria-live="polite" でリアルタイムフィードバック - zxcvbn ライクな辞書ベースの強度判定 - パスワード漏洩チェック（Have I Been Pwned API連携） - パスワード生成機能 - コピーボタン付き - モバイル対応のレスポンシブレイアウト