```html
<!DOCTYPE html>
<html>
<head>
<title>文字置き換えアプリ 🎉</title>
<style>
/* アニメーションは不要とのことなので空です */
</style>
</head>
<body>
<div style="width:400px; height:400px; margin:20px auto; padding:10px; border:2px solid #FFD700; border-radius:15px; background-color:#FFFAF0; box-sizing:border-box; position:relative;">
<!-- 入力セクション -->
<div style="margin-bottom:15px;">
<label for="textInput" style="font-size:16px;">📄 文章を入力してください：</label><br>
<div id="textInput" contenteditable="true" style="width:100%; height:80px; border:1px solid #ccc; border-radius:5px; padding:5px; overflow:auto; background-color:#FFFFFF;">
</div>
</div>
<div style="margin-bottom:15px;">
<label for="removeInput" style="font-size:16px;">✂️ 消す文字を入力してください：</label><br>
<div id="removeInput" contenteditable="true" style="width:100%; height:50px; border:1px solid #ccc; border-radius:5px; padding:5px; overflow:auto; background-color:#FFFFFF;">
</div>
</div>
<!-- ボタンセクション -->
<div style="text-align:center; margin-bottom:15px;">
<button onclick="processText()" style="padding:10px 20px; font-size:16px; border:none; border-radius:5px; background-color:#28a745; color:white; cursor:pointer;">
🔄 置き換え
</button>
</div>
<!-- 結果セクション -->
<div style="margin-bottom:15px;">
<label for="result" style="font-size:16px;">📝 結果：</label><br>
<div id="result" contenteditable="false" style="width:100%; height:80px; border:1px solid #ccc; border-radius:5px; padding:5px; overflow:auto; background-color:#F0F8FF;">
</div>
</div>
<!-- コピーセクション -->
<div style="text-align:center;">
<button onclick="copyResult()" style="padding:10px 20px; font-size:16px; border:none; border-radius:5px; background-color:#007bff; color:white; cursor:pointer;">
📋 コピー
</button>
</div>
</div>
<script>
function processText() {
const textInput = document.getElementById('textInput').innerText;
const removeInput = document.getElementById('removeInput').innerText;
const resultDiv = document.getElementById('result');
if (removeInput.trim() === "") {
alert("消す文字を入力してください。");
return;
}
const index = textInput.indexOf(removeInput);
if (index !== -1) {
const newText = textInput.slice(0, index) + textInput.slice(index + removeInput.length);
resultDiv.innerText = newText;
// 背景の伸ばし
const charCount = newText.length;
// 1文字あたり8pxとして計算（適宜調整可能）
let newWidth = charCount * 8;
// 最小幅と最大幅を設定
newWidth = Math.max(100, Math.min(newWidth, 380));
resultDiv.style.backgroundSize = `${newWidth}px 100%`;
} else {
alert("指定された文字列が見つかりませんでした。");
}
}
function copyResult() {
const resultDiv = document.getElementById('result');
const text = resultDiv.innerText;
if (text.trim() === "") {
alert("コピーするテキストがありません。");
return;
}
// テキストをコピーするための一時的なtextareaを作成
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
alert("テキストをコピーしました！ 📋");
}
</script>
</body>
</html>
```
