<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>ドメイン検索＆購入</title>
<style>
body {
font-family: sans-serif;
background: #f9f9f9;
padding: 2rem;
margin: 0;
display: flex;
justify-content: center;
}
.container {
max-width: 600px;
width: 100%;
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
h1 {
color: #e60033;
text-align: center;
margin-bottom: 1.5rem;
}
.form {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
}
input {
flex: 1;
padding: 0.8rem;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 1rem;
}
button {
padding: 0.8rem 1rem;
background-color: #e60033;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
}
.result {
margin-top: 1rem;
}
.item {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #eee;
padding: 0.5rem 0;
}
.available {
color: green;
font-weight: bold;
}
.unavailable {
color: red;
font-weight: bold;
}
.buy-btn {
background-color: #0070f3;
color: white;
padding: 0.3rem 0.7rem;
border-radius: 6px;
text-decoration: none;
font-size: 0.9rem;
}
</style>
</head>
<body>
<div class="container">
<h1>ドメイン検索</h1>
<div class="form">
<input type="text" id="domainInput" placeholder="例: mydomain" />
<button onclick="search()">検索</button>
</div>
<div class="result" id="resultArea"></div>
</div>
<script>
const takenDomains = ["example.com", "mydomain.net", "taken.jp"];
const tlds = [".com", ".net", ".jp"];
function search() {
const name = document.getElementById("domainInput").value.trim().toLowerCase();
const area = document.getElementById("resultArea");
area.innerHTML = "";
if (!name) {
area.innerHTML = "<p>⚠ ドメイン名を入力してください。</p>";
return;
}
tlds.forEach(tld => {
const domain = name + tld;
const available = !takenDomains.includes(domain);
const item = document.createElement("div");
item.className = "item";
item.innerHTML = `
<span>${domain}</span>
${available
? `<span class="available">取得可能</span>
<a href="https://buy.stripe.com/test_checkout_link" class="buy-btn" target="_blank">購入する</a>`
: `<span class="unavailable">登録済み</span>`}
`;
area.appendChild(item);
});
}
</script>
</body>
</html>
タグ: HTML
創作アイディア生成サイト
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>創作アイディア生成サイト</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--background-color, #f4f6f9);
}
.container {
max-width: 800px;
width: 90%;
padding: 20px;
text-align: center;
background-color: var(--chat-bg-color, #ffffff);
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
margin-top: 20px;
}
.title {
font-size: 24px;
margin-bottom: 15px;
}
.theme-toggle-btn {
position: absolute;
right: 15px;
top: 15px;
padding: 5px 10px;
cursor: pointer;
border: none;
background-color: #0078d7;
color: #ffffff;
border-radius: 5px;
}
.dropdown, .input, .button {
width: 80%;
margin: 5px;
padding: 10px;
font-size: 16px;
}
.idea-display {
margin-top: 20px;
font-size: 18px;
padding: 15px;
color: #333;
background-color: #f4f4f4;
border-radius: 10px;
text-align: left;
}
.related-ideas {
font-size: 14px;
color: #555;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">創作アイディア生成サイト</h1>
<button class="theme-toggle-btn" onclick="toggleTheme()">🌙 ダークモード</button>
<label for="categorySelect">カテゴリを選択</label>
<select id="categorySelect" class="dropdown">
<option value="fantasy">ファンタジー</option>
<option value="sci-fi">SF</option>
<option value="mystery">ミステリー</option>
<option value="horror">ホラー</option>
</select>
<BR>
<label for="elementSelect">詳細要素を選択</label>
<select id="elementSelect" class="dropdown">
<option value="character">キャラクター</option>
<option value="plot">プロット</option>
<option value="setting">舞台設定</option>
<option value="theme">テーマ</option>
</select>
<button class="button" onclick="generateIdea()">アイディア生成</button>
<div class="idea-display" id="ideaDisplay">ここに生成されたアイディアが表示されます。</div>
<div class="related-ideas" id="relatedIdeas"></div>
</div>
<script>
const ideas = {
"fantasy": {
"character": ["勇敢な騎士", "神秘的な魔法使い", "不思議な生物"],
"plot": ["王国を救うための冒険", "魔法の秘宝を巡る争い", "禁断の魔法を探求する旅"],
"setting": ["ドラゴンが住む山", "不思議な森", "海底の王国"],
"theme": ["友情と勇気", "運命と戦い", "魔法と現実の対立"]
},
"sci-fi": {
"character": ["宇宙飛行士", "AIロボット", "サイボーグ"],
"plot": ["異星人との接触", "未来都市の陰謀", "宇宙戦争"],
"setting": ["宇宙ステーション", "荒廃した地球", "人工惑星"],
"theme": ["人間と機械の共存", "進化の危機", "文明の崩壊と再生"]
}
};
const relatedIdeas = {
"友情と勇気": ["戦場での友情", "共に戦う友人の絆"],
"運命と戦い": ["運命に抗うヒーロー", "過去を背負う主人公の決意"]
};
let isDarkMode = false;
function toggleTheme() {
isDarkMode = !isDarkMode;
document.body.style.setProperty("--background-color", isDarkMode ? "#333" : "#f4f6f9");
document.body.style.setProperty("--chat-bg-color", isDarkMode ? "#444" : "#ffffff");
document.querySelector(".theme-toggle-btn").textContent = isDarkMode ? "🌞 ライトモード" : "🌙 ダークモード";
}
function generateIdea() {
const category = document.getElementById("categorySelect").value;
const element = document.getElementById("elementSelect").value;
const ideaArray = ideas[category][element];
const randomIdea = ideaArray[Math.floor(Math.random() * ideaArray.length)];
document.getElementById("ideaDisplay").textContent = randomIdea;
displayRelatedIdeas(randomIdea);
}
function displayRelatedIdeas(idea) {
const relatedDiv = document.getElementById("relatedIdeas");
relatedDiv.innerHTML = "<h4>関連するアイディア:</h4>";
const relatedItems = relatedIdeas[idea] || ["関連アイディアが見つかりません"];
relatedItems.forEach(item => {
const relatedItemDiv = document.createElement("div");
relatedItemDiv.textContent = `- ${item}`;
relatedDiv.appendChild(relatedItemDiv);
});
}
</script>
</body>
</html>
神と対話するAI
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>神と対話するAI</title>
<style>
/* 神秘的な背景とエフェクト */
body {
font-family: 'Georgia', serif;
background-color: #1a1a2e;
color: #d1d1e9;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
overflow: hidden;
}
.chat-container {
width: 100%;
max-width: 600px;
background-color: rgba(43, 43, 63, 0.9);
border-radius: 10px;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.6);
padding: 20px;
position: relative;
overflow: hidden;
}
.messages {
height: 300px;
overflow-y: auto;
margin-bottom: 10px;
padding-right: 10px;
}
.message {
margin: 10px 0;
line-height: 1.5;
}
.user-message {
text-align: right;
color: #00aaff;
}
.ai-message {
text-align: left;
color: #e6e6fa;
font-style: italic;
}
.typing-indicator {
font-size: 1.5em;
color: #e6e6fa;
}
.input-container {
display: flex;
}
input[type="text"] {
flex: 1;
padding: 10px;
border-radius: 5px;
border: 1px solid #555;
background-color: #444;
color: #e6e6fa;
margin-right: 10px;
}
button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #5a5adb;
color: white;
cursor: pointer;
}
/* 背景アニメーション */
.background-animation {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle, rgba(255,255,255,0.1), rgba(0,0,0,0) 70%);
animation: glow 5s infinite alternate;
pointer-events: none;
}
@keyframes glow {
from {
opacity: 0.4;
}
to {
opacity: 0.7;
}
}
</style>
</head>
<body>
<div class="chat-container">
<h2>神と対話するAI</h2>
<div class="messages" id="messages"></div>
<div class="input-container">
<input type="text" id="userInput" placeholder="質問を入力してください...">
<button onclick="sendMessage()">送信</button>
</div>
<div class="background-animation"></div>
</div>
<script>
const messagesContainer = document.getElementById("messages");
function addMessage(content, className) {
const message = document.createElement("div");
message.className = "message " + className;
message.innerHTML = content;
messagesContainer.appendChild(message);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
}
function getAIResponse(userMessage) {
const responses = {
"目的": [
"あなたの目的はあなたの選択の中にあります。心を澄まし、その小さな声に耳を傾けなさい。",
"目的は定まっているものではなく、あなたが形作るものです。勇気を持って探し続けなさい。"
],
"未来": [
"未来は揺れ動く霧のようなもの…手の中にありながら捉えられぬもの。だが、あなたの意思がその霧を晴らすだろう。",
"未来は、あなたの内にある希望が灯し出すもの。信じる道を歩みなさい。"
],
"愛": [
"愛とは、無限に与えること。光のようにあなたを包み、他者を受け入れるものです。",
"愛とは、心の中の静けさと繋がり、他者の存在をただあるがままに受け入れること。"
],
"default": [
"その問いの答えは、あなた自身が見つけ出すもの。内なる声を信じなさい。",
"すべての答えは既にあなたの心の中にあります。耳を澄まし、その声に従いなさい。"
]
};
const keywords = Object.keys(responses);
for (let keyword of keywords) {
if (userMessage.includes(keyword)) {
const possibleResponses = responses[keyword];
return possibleResponses[Math.floor(Math.random() * possibleResponses.length)];
}
}
const defaultResponses = responses["default"];
return defaultResponses[Math.floor(Math.random() * defaultResponses.length)];
}
function sendMessage() {
const userInput = document.getElementById("userInput").value.trim();
if (userInput === "") return;
addMessage(userInput, "user-message");
document.getElementById("userInput").value = "";
const aiResponse = getAIResponse(userInput);
// タイピングエフェクトを表示
setTimeout(() => {
addMessage(`<span class="typing-indicator">...</span>`, "ai-message");
setTimeout(() => {
messagesContainer.lastChild.remove();
addMessage(aiResponse, "ai-message");
}, 2000); // タイピングエフェクト表示後の応答
}, 800); // 遅延で自然な応答
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>神と対話するAI</title>
<style>
/* 神秘的な背景とエフェクト */
body {
font-family: 'Georgia', serif;
background-color: #1a1a2e;
color: #d1d1e9;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
overflow: hidden;
}
.chat-container {
width: 100%;
max-width: 600px;
background-color: rgba(43, 43, 63, 0.9);
border-radius: 10px;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.6);
padding: 20px;
position: relative;
overflow: hidden;
}
.messages {
height: 300px;
overflow-y: auto;
margin-bottom: 10px;
padding-right: 10px;
}
.message {
margin: 10px 0;
line-height: 1.5;
}
.user-message {
text-align: right;
color: #00aaff;
}
.ai-message {
text-align: left;
color: #e6e6fa;
font-style: italic;
}
.typing-indicator {
font-size: 1.5em;
color: #e6e6fa;
}
.input-container {
display: flex;
}
input[type="text"] {
flex: 1;
padding: 10px;
border-radius: 5px;
border: 1px solid #555;
background-color: #444;
color: #e6e6fa;
margin-right: 10px;
}
button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #5a5adb;
color: white;
cursor: pointer;
}
/* 背景アニメーション */
.background-animation {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle, rgba(255,255,255,0.1), rgba(0,0,0,0) 70%);
animation: glow 5s infinite alternate;
pointer-events: none;
}
@keyframes glow {
from {
opacity: 0.4;
}
to {
opacity: 0.7;
}
}
</style>
</head>
<body>
<div class="chat-container">
<h2>神と対話するAI</h2>
<div class="messages" id="messages"></div>
<div class="input-container">
<input type="text" id="userInput" placeholder="質問を入力してください...">
<button onclick="sendMessage()">送信</button>
</div>
<div class="background-animation"></div>
</div>
<script>
const messagesContainer = document.getElementById("messages");
function addMessage(content, className) {
const message = document.createElement("div");
message.className = "message " + className;
message.innerHTML = content;
messagesContainer.appendChild(message);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
}
function getAIResponse(userMessage) {
const responses = {
"目的": [
"あなたの目的はあなたの選択の中にあります。心を澄まし、その小さな声に耳を傾けなさい。",
"目的は定まっているものではなく、あなたが形作るものです。勇気を持って探し続けなさい。"
],
"未来": [
"未来は揺れ動く霧のようなもの…手の中にありながら捉えられぬもの。だが、あなたの意思がその霧を晴らすだろう。",
"未来は、あなたの内にある希望が灯し出すもの。信じる道を歩みなさい。"
],
"愛": [
"愛とは、無限に与えること。光のようにあなたを包み、他者を受け入れるものです。",
"愛とは、心の中の静けさと繋がり、他者の存在をただあるがままに受け入れること。"
],
"default": [
"その問いの答えは、あなた自身が見つけ出すもの。内なる声を信じなさい。",
"すべての答えは既にあなたの心の中にあります。耳を澄まし、その声に従いなさい。"
]
};
const keywords = Object.keys(responses);
for (let keyword of keywords) {
if (userMessage.includes(keyword)) {
const possibleResponses = responses[keyword];
return possibleResponses[Math.floor(Math.random() * possibleResponses.length)];
}
}
const defaultResponses = responses["default"];
return defaultResponses[Math.floor(Math.random() * defaultResponses.length)];
}
function sendMessage() {
const userInput = document.getElementById("userInput").value.trim();
if (userInput === "") return;
addMessage(userInput, "user-message");
document.getElementById("userInput").value = "";
const aiResponse = getAIResponse(userInput);
// タイピングエフェクトを表示
setTimeout(() => {
addMessage(`<span class="typing-indicator">...</span>`, "ai-message");
setTimeout(() => {
messagesContainer.lastChild.remove();
addMessage(aiResponse, "ai-message");
}, 2000); // タイピングエフェクト表示後の応答
}, 800); // 遅延で自然な応答
}
</script>
</body>
</html>
タスク管理.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AIベースのタスク管理アプリ</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
color: #333;
}
.task-container {
width: 90%;
max-width: 1200px;
padding: 20px;
}
.task-form {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
.task-form input, .task-form textarea {
margin-bottom: 10px;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
.task-form button {
padding: 10px;
background-color: #28a745;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.task-form button:hover {
background-color: #218838;
}
.kanban-board {
display: flex;
justify-content: space-around;
}
.kanban-column {
background-color: #f8f9fa;
padding: 20px;
width: 30%;
border-radius: 10px;
min-height: 300px;
}
.kanban-column h2 {
text-align: center;
}
.task-list {
margin-top: 10px;
}
.task-item {
display: flex;
justify-content: space-between;
background-color: #e9ecef;
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
}
.task-item.high {
background-color: #ffcccc;
}
.task-item.medium {
background-color: #fff3cd;
}
.task-item.low {
background-color: #d4edda;
}
.task-item button {
background-color: #dc3545;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.task-item button:hover {
background-color: #c82333;
}
</style>
</head>
<body>
<h1>タスク管理</h1>
<div class="task-container">
<form class="task-form" id="taskForm">
<input type="text" id="taskTitle" placeholder="タスクタイトル" required>
<textarea id="taskDescription" placeholder="タスク詳細" rows="4"></textarea>
<input type="date" id="taskDueDate" required>
<button type="submit">タスクを追加</button>
</form>
<div class="kanban-board">
<div class="kanban-column" id="notStarted">
<h2>未着手</h2>
<div class="task-list" id="notStartedList"></div>
</div>
<div class="kanban-column" id="inProgress">
<h2>進行中</h2>
<div class="task-list" id="inProgressList"></div>
</div>
<div class="kanban-column" id="completed">
<h2>完了</h2>
<div class="task-list" id="completedList"></div>
</div>
</div>
</div>
<script>
let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
// 優先度予測（ルールベース）
function predictPriority(taskDueDate) {
const daysLeft = (new Date(taskDueDate) - new Date()) / (1000 * 60 * 60 * 24);
if (daysLeft < 2) {
return 'High'; // 緊急度が高い
} else if (daysLeft < 7) {
return 'Medium'; // 1週間以内
} else {
return 'Low'; // 余裕がある
}
}
// タスクをローカルストレージに保存
function saveTasks() {
localStorage.setItem('tasks', JSON.stringify(tasks));
}
// タスク表示
function loadTasks() {
const notStartedList = document.getElementById('notStartedList');
const inProgressList = document.getElementById('inProgressList');
const completedList = document.getElementById('completedList');
notStartedList.innerHTML = '';
inProgressList.innerHTML = '';
completedList.innerHTML = '';
tasks.forEach(task => {
const taskItem = document.createElement('div');
taskItem.classList.add('task-item', task.priority.toLowerCase());
taskItem.setAttribute('draggable', true);
taskItem.innerHTML = `
<div>
<strong>${task.title}</strong>
<p>${task.description}</p>
<small>期限: ${new Date(task.dueDate).toLocaleDateString()}</small>
<p>優先度: ${task.priority}</p>
</div>
<button onclick="deleteTask('${task.id}')">削除</button>
`;
taskItem.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', task.id);
});
if (task.status === 'notStarted') {
notStartedList.appendChild(taskItem);
} else if (task.status === 'inProgress') {
inProgressList.appendChild(taskItem);
} else if (task.status === 'completed') {
completedList.appendChild(taskItem);
}
});
}
// タスク追加
document.getElementById('taskForm').addEventListener('submit', (e) => {
e.preventDefault();
const title = document.getElementById('taskTitle').value;
const description = document.getElementById('taskDescription').value;
const dueDate = document.getElementById('taskDueDate').value;
const priority = predictPriority(dueDate);
const newTask = {
id: Date.now().toString(),
title,
description,
dueDate,
priority,
status: 'notStarted' // 初期状態は未着手
};
tasks.push(newTask);
saveTasks();
document.getElementById('taskForm').reset();
loadTasks();
});
// タスク削除
function deleteTask(taskId) {
tasks = tasks.filter(task => task.id !== taskId);
saveTasks();
loadTasks();
}
// ドラッグ&ドロップの設定
document.querySelectorAll('.kanban-column').forEach(column => {
column.addEventListener('dragover', (e) => {
e.preventDefault();
});
column.addEventListener('drop', (e) => {
const taskId = e.dataTransfer.getData('text/plain');
const newStatus = column.id;
const task = tasks.find(task => task.id === taskId);
task.status = newStatus;
saveTasks();
loadTasks();
});
});
// ページ読み込み時にタスクを表示
loadTasks();
</script>
</body>
</html>
ドメイン取得サイト.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Domain Acquisition</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
text-align: center;
width: 100%;
max-width: 600px;
}
h1 {
margin-bottom: 20px;
}
input[type="text"] {
width: 80%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
button {
padding: 10px 20px;
border: none;
background-color: #007BFF;
color: white;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.result {
margin-top: 20px;
}
.loading {
display: none;
margin-top: 20px;
}
.domain-list {
margin-top: 20px;
}
.domain-list ul {
list-style-type: none;
padding: 0;
}
.domain-list li {
background-color: #f9f9f9;
margin: 10px 0;
padding: 10px;
border-radius: 5px;
border: 1px solid #ddd;
text-align: left;
display: flex;
justify-content: space-between;
}
.price {
color: green;
}
.purchase-link {
text-decoration: none;
background-color: #28a745;
color: white;
padding: 5px 10px;
border-radius: 5px;
}
.error {
color: red;
margin-top: 20px;
}
@media (max-width: 600px) {
input[type="text"] {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Check Domain Availability</h1>
<form id="domain-form">
<input type="text" id="domain-name" placeholder="Enter domain name" required>
<button type="submit">Search</button>
</form>
<div class="loading" id="loading">
<p>Searching...</p>
<img src="https://i.gifer.com/ZZ5H.gif" alt="Loading" width="50">
</div>
<div class="result" id="result"></div>
<div class="error" id="error"></div>
<div class="domain-list" id="domain-list"></div>
</div>
<script>
const form = document.getElementById('domain-form');
const resultDiv = document.getElementById('result');
const loadingDiv = document.getElementById('loading');
const errorDiv = document.getElementById('error');
const domainListDiv = document.getElementById('domain-list');
form.addEventListener('submit', function (event) {
event.preventDefault();
const domainName = document.getElementById('domain-name').value.trim();
// フィールドをリセット
resultDiv.innerHTML = '';
errorDiv.innerHTML = '';
domainListDiv.innerHTML = '';
loadingDiv.style.display = 'block'; // ローディング表示
if (validateDomainName(domainName)) {
// ダミーデータの使用例（実際にはAPIを呼び出します）
setTimeout(() => {
loadingDiv.style.display = 'none'; // ローディング終了
// 検索結果の仮表示
const available = Math.random() > 0.5; // ランダムに結果を生成
if (available) {
resultDiv.innerHTML = `<strong>${domainName}</strong> is available!`;
// 他のTLDを提案し、価格と購入リンクを表示
const suggestions = [
{ tld: '.com', price: '$10.99', link: 'https://buydomain.com/com' },
{ tld: '.net', price: '$9.99', link: 'https://buydomain.com/net' },
{ tld: '.org', price: '$11.99', link: 'https://buydomain.com/org' },
{ tld: '.info', price: '$8.99', link: 'https://buydomain.com/info' },
{ tld: '.co', price: '$12.99', link: 'https://buydomain.com/co' }
];
let domainList = '<ul>';
suggestions.forEach(({ tld, price, link }) => {
domainList += `<li>${domainName}${tld} <span class="price">${price}</span> <a href="${link}" target="_blank" class="purchase-link">Buy</a></li>`;
});
domainList += '</ul>';
domainListDiv.innerHTML = domainList;
} else {
resultDiv.innerHTML = `<strong>${domainName}</strong> is already taken.`;
}
}, 2000); // 実際のAPIではこのタイミングで結果を取得
} else {
errorDiv.innerHTML = 'Please enter a valid domain name. It should follow the format: example.com';
loadingDiv.style.display = 'none'; // エラー時はローディングを停止
}
});
// ドメイン名のバリデーション関数
function validateDomainName(domain) {
const domainPattern = /^[a-zA-Z0-9-]{1,63}\.[a-zA-Z]{2,}$/;
return domainPattern.test(domain);
}
</script>
</body>
</html>
Bootstrapフッターを配置
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>My Site</title>
</head>
<body>
<header class="bg-primary text-center text-light p-5">
<h1 class="fs-3">My Admin</h1>
</header>
<div class="container mt-5">
<section class="row">
<section class="col-md-4 mb-5">
こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
</section>
<section class="col-md-8">
こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
</section>
</section>
</div>
<footer class="bg-secondary text-center text-light p-5 mt-5">
(c) chodomeyuhei
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>
</body>
</html>ブックマークサイト.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ブックマークサイト</title>
<style>
:root {
--bg-color: #f4f4f9;
--text-color: #000;
--link-color: #007bff;
--btn-bg-color: #007bff;
--btn-hover-color: #0056b3;
--delete-btn-bg-color: #dc3545;
--delete-btn-hover-color: #c82333;
}
[data-theme="dark"] {
--bg-color: #2e2e2e;
--text-color: #fff;
--link-color: #66b2ff;
--btn-bg-color: #0056b3;
--btn-hover-color: #007bff;
--delete-btn-bg-color: #c82333;
--delete-btn-hover-color: #dc3545;
}
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 0;
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
.container {
max-width: 800px;
margin: auto;
padding: 20px;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
.bookmark-form {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
}
.bookmark-form input, .bookmark-form select {
padding: 10px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: var(--bg-color);
color: var(--text-color);
}
.bookmark-form button {
padding: 10px;
font-size: 16px;
background-color: var(--btn-bg-color);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.bookmark-form button:hover {
background-color: var(--btn-hover-color);
}
.bookmark-list {
list-style-type: none;
padding: 0;
}
.bookmark-item {
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #fafafa;
background-color: var(--bg-color);
color: var(--text-color);
}
.bookmark-item a {
text-decoration: none;
color: var(--link-color);
}
.bookmark-item button {
padding: 5px 10px;
font-size: 14px;
background-color: var(--delete-btn-bg-color);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.bookmark-item button:hover {
background-color: var(--delete-btn-hover-color);
}
.controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
</style>
</head>
<body data-theme="light">
<div class="container">
<h1>ブックマークサイト</h1>
<div class="controls">
<input type="text" id="search-bar" placeholder="ブックマークを検索" oninput="filterBookmarks()">
<select id="category-filter" onchange="filterByCategory()">
<option value="all">すべてのカテゴリー</option>
</select>
<button onclick="toggleTheme()">ダークモード切り替え</button>
</div>
<div class="bookmark-form">
<input type="text" id="bookmark-title" placeholder="タイトルを入力してください" required>
<input type="url" id="bookmark-url" placeholder="URLを入力してください" required>
<input type="text" id="bookmark-category" placeholder="カテゴリーを入力してください">
<button onclick="addBookmark()">ブックマークを追加</button>
</div>
<ul id="bookmark-list" class="bookmark-list"></ul>
</div>
<script>
document.addEventListener('DOMContentLoaded', loadBookmarks);
function loadBookmarks() {
const bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || [];
const categories = new Set();
bookmarks.forEach(bookmark => {
renderBookmark(bookmark);
categories.add(bookmark.category);
});
updateCategoryFilter(Array.from(categories));
}
function addBookmark() {
const titleInput = document.getElementById('bookmark-title');
const urlInput = document.getElementById('bookmark-url');
const categoryInput = document.getElementById('bookmark-category');
const title = titleInput.value.trim();
const url = urlInput.value.trim();
const category = categoryInput.value.trim();
if (title === '' || url === '') {
alert('タイトルとURLを入力してください。');
return;
}
const bookmark = { title, url, category };
saveBookmark(bookmark);
renderBookmark(bookmark);
titleInput.value = '';
urlInput.value = '';
categoryInput.value = '';
updateCategoryFilter([category]);
}
function saveBookmark(bookmark) {
const bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || [];
bookmarks.push(bookmark);
localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
}
function renderBookmark(bookmark) {
const bookmarkList = document.getElementById('bookmark-list');
const listItem = document.createElement('li');
listItem.className = 'bookmark-item';
listItem.innerHTML = `
<span>${bookmark.title} (${bookmark.category})</span>
<div>
<a href="${bookmark.url}" target="_blank">訪問</a>
<button onclick="editBookmark('${bookmark.url}')">編集</button>
<button onclick="deleteBookmark('${bookmark.url}')">削除</button>
</div>
`;
bookmarkList.appendChild(listItem);
}
function deleteBookmark(url) {
let bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || [];
bookmarks = bookmarks.filter(bookmark => bookmark.url !== url);
localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
refreshBookmarkList();
}
function editBookmark(url) {
let bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || [];
const bookmark = bookmarks.find(bookmark => bookmark.url === url);
if (bookmark) {
document.getElementById('bookmark-title').value = bookmark.title;
document.getElementById('bookmark-url').value = bookmark.url;
document.getElementById('bookmark-category').value = bookmark.category;
deleteBookmark(url); // 編集のために一旦削除
}
}
function refreshBookmarkList() {
const bookmarkList = document.getElementById('bookmark-list');
bookmarkList.innerHTML = '';
loadBookmarks();
}
function filterBookmarks() {
const query = document.getElementById('search-bar').value.toLowerCase();
const bookmarkItems = document.querySelectorAll('.bookmark-item');
bookmarkItems.forEach(item => {
const title = item.querySelector('span').innerText.toLowerCase();
item.style.display = title.includes(query) ? 'flex' : 'none';
});
}
function filterByCategory() {
const category = document.getElementById('category-filter').value;
const bookmarkItems = document.querySelectorAll('.bookmark-item');
bookmarkItems.forEach(item => {
const itemCategory = item.querySelector('span').innerText.split(' (')[1].slice(0, -1);
item.style.display = (category === 'all' || itemCategory === category) ? 'flex' : 'none';
});
}
function updateCategoryFilter(categories) {
const filter = document.getElementById('category-filter');
categories.forEach(category => {
if (![...filter.options].some(option => option.value === category)) {
const option = document.createElement('option');
option.value = category;
option.textContent = category;
filter.appendChild(option);
}
});
}
function toggleTheme() {
const body = document.body;
const currentTheme = body.getAttribute('data-theme');
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
body.setAttribute('data-theme', newTheme);
}
</script>
</body>
</html>
React className属性
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My React App</title>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<link rel="stylesheet" href="style.css">
<body>
<div id="container"></div>
<script type="text/babel">
'use strict';
{
const container = document.querySelector('#container');
const root = ReactDOM.createRoot(container);
root.render(
<>
<h1>アイテム</h1>
<ul className="menus">
<li>ポーション</li>
<li>エリクサー</li>
<li>ラストエリクサー</li>
</ul>
<p>合計: 0G</p>
</>
);
}
</script>
</body>
</html>style.css
@charset "utf-8";
body{
margin: 0;
}
#container{
width: 400px;
margin: auto;
}
h1{
margin: 16px 0 0 0;
font-size: 20px;
text-align: center;
}
.menus{
margin: 0;
padding: 0;
list-style-type: none;
}
.menus > li{
border: 1px solid #ccc;
padding: 8px;
border-radius: 8px;
margin-top: 16px;
}
p{
margin: 0;
text-align: right;
}CSS 画像を左右に振り分ける
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<article>
<img src="forest.png" width="240" height="160">
<div class="text">
<h1>タイトル</h1>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</div>
</article>
<article>
<img src="forest.png" width="240" height="160">
<div class="text">
<h1>タイトル</h1>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</div>
</article>
<article>
<img src="forest.png" width="240" height="160">
<div class="text">
<h1>タイトル</h1>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</div>
</article>
<article>
<img src="forest.png" width="240" height="160">
<div class="text">
<h1>タイトル</h1>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</div>
</article>
</body>
</html>style.css
@charset "utf-8";
article {
display: flex;
gap: 16px;
align-items: center;
}
article+article {
margin-top: 32px;
}
article:nth-child(even) {
flex-direction: row-reverse;
}
.text {
flex: 1;
}
h1 {
margin: 0;
font-size: 22px;
}HTMLCSS 画像付きの記事一覧を作る
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<article>
<img src="forest.png" width="240" height="160">
<div class="text">
<h1>タイトル</h1>
<p>こんにちは。こんにちは。</p>
</div>
</article>
</body>
</html>style.css
@charset "utf-8";
article {
display: flex;
gap: 16px;
}
.text {
background: pink;
flex: 1;
}