Created
January 25, 2026 11:26
-
-
Save suzusirod/8715d1f045590a5bdf1d8771c201607a to your computer and use it in GitHub Desktop.
コピペツール
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Excel to HTML Converter</title> | |
| <style> | |
| body { font-family: sans-serif; padding: 20px; line-height: 1.6; background: #f4f4f4; } | |
| .container { max-width: 900px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } | |
| textarea { width: 100%; height: 150px; margin: 10px 0; font-family: monospace; border: 1px solid #ccc; padding: 10px; box-sizing: border-box; } | |
| .btn { background: #4a90e2; color: white; border: none; padding: 10px 20px; cursor: pointer; border-radius: 4px; font-weight: bold; } | |
| .btn:hover { background: #357abd; } | |
| h3 { margin-top: 30px; border-bottom: 2px solid #4a90e2; padding-bottom: 5px; } | |
| .desc { font-size: 0.9em; color: #666; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h2>Excel → コピペツール変換</h2> | |
| <p class="desc">1. Excelの範囲をコピーして下の枠に貼り付けてください。</p> | |
| <textarea id="excelInput" placeholder="ここにExcelを貼り付け"></textarea> | |
| <button class="btn" onclick="generateHTML()">HTMLコードを生成</button> | |
| <h3>生成されたコード</h3> | |
| <p class="desc">2. 下のコードをコピーして、自分のツールに貼り付けてください。</p> | |
| <textarea id="htmlOutput" readonly placeholder="生成されたHTMLがここに表示されます"></textarea> | |
| <button class="btn" style="background:#28a745;" onclick="copyResult()">結果をコピー</button> | |
| </div> | |
| <script> | |
| function generateHTML() { | |
| const input = document.getElementById('excelInput').value.trim(); | |
| if (!input) return; | |
| const rows = input.split('\n'); | |
| let tableHtml = '<table>\n <tbody>\n'; | |
| rows.forEach(row => { | |
| const cols = row.split('\t'); | |
| tableHtml += ' <tr>\n'; | |
| cols.forEach((col, index) => { | |
| // 1列目以外は copyable クラスを付与 | |
| const className = index === 0 ? '' : ' class="copyable"'; | |
| tableHtml += ` <td${className}>${col}</td>\n`; | |
| }); | |
| tableHtml += ' </tr>\n'; | |
| }); | |
| tableHtml += ' </tbody>\n</table>'; | |
| document.getElementById('htmlOutput').value = tableHtml; | |
| } | |
| function copyResult() { | |
| const output = document.getElementById('htmlOutput'); | |
| output.select(); | |
| document.execCommand('copy'); | |
| alert('生成されたHTMLをコピーしました'); | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>サーバー</title> | |
| <style> | |
| body { | |
| font-family: sans-serif; | |
| padding: 20px; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| th, td { | |
| padding: 1px; | |
| border: 1px solid #ccc; | |
| text-align: left; | |
| } | |
| /* 1列目だけ幅指定 */ | |
| td:first-child, | |
| th:first-child { | |
| width: 20%; /* 固定したい幅 */ | |
| white-space: nowrap; /* 折り返し防止(必要なら) */ | |
| } | |
| .copyable { | |
| cursor: pointer; | |
| background-color: #f0f0f0; | |
| } | |
| .copyable:hover { | |
| background-color: #e0e0ff; | |
| } | |
| #toast { | |
| visibility: hidden; | |
| min-width: 250px; | |
| background-color: #333; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 4px; | |
| padding: 12px; | |
| position: fixed; | |
| bottom: 30px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| z-index: 1; | |
| opacity: 0; | |
| transition: opacity 0.5s, visibility 0.5s; | |
| } | |
| #toast.show { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h2>host1</h2> | |
| <table> | |
| <tbody> | |
| <tr> | |
| <td>IPアドレス</td> | |
| <td class="copyable">192.168.0.0</td> | |
| <td></td> | |
| </tr> | |
| <tr> | |
| <td>User/Password</td> | |
| <td class="copyable">user1</td> | |
| <td class="copyable">aaaa</td> | |
| </tr> | |
| <tr> | |
| <td>User/Password</td> | |
| <td class="copyable">user2</td> | |
| <td class="copyable">bbbb</td> | |
| </tr> | |
| <tr> | |
| <td>User/Password</td> | |
| <td class="copyable">user3</td> | |
| <td class="copyable">cccc</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <div id="toast">コピーしました</div> | |
| <script> | |
| function showToast(message) { | |
| const toast = document.getElementById("toast"); | |
| toast.textContent = message; | |
| toast.className = "show"; | |
| setTimeout(() => { | |
| toast.classList.remove("show"); | |
| }, 2000); | |
| } | |
| document.querySelectorAll('.copyable').forEach(cell => { | |
| cell.addEventListener('click', () => { | |
| const text = cell.textContent; | |
| navigator.clipboard.writeText(text) | |
| .then(() => { | |
| showToast("コピーしました: " + text); | |
| }) | |
| .catch(err => { | |
| showToast("コピーに失敗しました"); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment