タグ: 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>

タスク管理.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;
}

Social Networking Service

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Networking Service</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
  body {
    padding: 20px;
  }
  .card {
    margin-bottom: 20px;
  }
</style>
</head>
<body>

<div class="container">
  <h1 class="text-center mb-4">Social Networking Service</h1>

  <!-- ログインフォーム -->
  <div id="loginForm" class="card w-50 mx-auto">
    <div class="card-body">
      <h2 class="card-title text-center mb-4">Login</h2>
      <div class="form-group">
        <input type="text" id="loginUsername" class="form-control" placeholder="Username">
      </div>
      <div class="form-group">
        <input type="password" id="loginPassword" class="form-control" placeholder="Password">
      </div>
      <button onclick="login()" class="btn btn-primary btn-block">Login</button>
      <button onclick="registerForm()" class="btn btn-secondary btn-block">Register</button>
    </div>
  </div>

  <!-- 登録フォーム -->
  <div id="registerForm" class="card w-50 mx-auto" style="display: none;">
    <div class="card-body">
      <h2 class="card-title text-center mb-4">Register</h2>
      <div class="form-group">
        <input type="text" id="registerName" class="form-control" placeholder="Full Name">
      </div>
      <div class="form-group">
        <input type="text" id="registerUsername" class="form-control" placeholder="Username">
      </div>
      <div class="form-group">
        <input type="password" id="registerPassword" class="form-control" placeholder="Password">
      </div>
      <button onclick="register()" class="btn btn-primary btn-block">Register</button>
      <button onclick="loginForm()" class="btn btn-secondary btn-block">Back to Login</button>
    </div>
  </div>

  <!-- プロフィール -->
  <div id="profile" class="card w-50 mx-auto" style="display: none;">
    <div class="card-body">
      <h2 class="card-title text-center mb-4">Profile</h2>
      <p><strong>Name:</strong> <span id="profileName"></span></p>
      <p><strong>Username:</strong> <span id="profileUsername"></span></p>
      <button onclick="logout()" class="btn btn-danger btn-block">Logout</button>
    </div>
  </div>

  <!-- 投稿フォーム -->
  <div id="postForm" class="card w-75 mx-auto" style="display: none;">
    <div class="card-body">
      <h2 class="card-title text-center mb-4">Create Post</h2>
      <div class="form-group">
        <textarea id="postContent" class="form-control" rows="3" placeholder="What's on your mind?"></textarea>
      </div>
      <button onclick="createPost()" class="btn btn-primary btn-block">Post</button>
    </div>
  </div>

  <!-- 投稿一覧 -->
  <div id="postList" class="w-75 mx-auto mt-4"></div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
  let currentUser = null; // 現在のログインユーザー
  let users = []; // ユーザーの配列
  let posts = []; // 投稿の配列

  function login() {
    const username = document.getElementById('loginUsername').value;
    const password = document.getElementById('loginPassword').value;
    const user = users.find(u => u.username === username && u.password === password);
    if (user) {
      currentUser = user;
      showProfile();
    } else {
      alert('Invalid username or password.');
    }
  }

  function logout() {
    currentUser = null;
    hideAll();
    document.getElementById('loginForm').style.display = 'block';
  }

  function registerForm() {
    hideAll();
    document.getElementById('registerForm').style.display = 'block';
  }

  function register() {
    const name = document.getElementById('registerName').value;
    const username = document.getElementById('registerUsername').value;
    const password = document.getElementById('registerPassword').value;
    users.push({ name, username, password });
    alert('Registration successful! Please login.');
    loginForm();
  }

  function loginForm() {
    hideAll();
    document.getElementById('loginForm').style.display = 'block';
  }

  function showProfile() {
    hideAll();
    document.getElementById('profile').style.display = 'block';
    document.getElementById('profileName').textContent = currentUser.name;
    document.getElementById('profileUsername').textContent = currentUser.username;
    document.getElementById('postForm').style.display = 'block';
    displayPosts();
  }

  function createPost() {
    const postContent = document.getElementById('postContent').value;
    if (postContent.trim() !== '') {
      const post = {
        id: Date.now(),
        content: postContent,
        author: currentUser.name,
        authorUsername: currentUser.username,
        likes: 0,
        comments: []
      };
      posts.unshift(post); // 最新の投稿を先頭に追加
      displayPosts();
      document.getElementById('postContent').value = ''; // 投稿後、入力欄を空にする
    }
  }

  function displayPosts() {
    const postList = document.getElementById('postList');
    postList.innerHTML = '';
    posts.forEach(post => {
      const postElement = document.createElement('div');
      postElement.innerHTML = `
        <div class="card mb-3">
          <div class="card-body">
            <p class="card-text">${post.content}</p>
            <small class="text-muted">Posted by ${post.author} (@${post.authorUsername}) at ${new Date(post.id).toLocaleString()}</small><br>
            <button onclick="likePost(${post.id})" class="btn btn-primary btn-sm mt-2">Like (${post.likes})</button>
            <button onclick="showComments(${post.id})" class="btn btn-secondary btn-sm mt-2">Comments</button>
          </div>
        </div>
      `;
      postList.appendChild(postElement);
    });
  }

  function likePost(postId) {
    const post = posts.find(p => p.id === postId);
    post.likes++;
    displayPosts();
  }

  function showComments(postId) {
    const post = posts.find(p => p.id === postId);
    const comments = prompt('Enter your comment:');
    if (comments !== null && comments.trim() !== '') {
      post.comments.push({ author: currentUser.name, content: comments });
      displayPosts();
    }
  }

  function hideAll() {
    document.getElementById('loginForm').style.display = 'none';
    document.getElementById('registerForm').style.display = 'none';
    document.getElementById('profile').style.display = 'none';
    document.getElementById('postForm').style.display = 'none';
  }

  users.push({ name: 'User One', username: 'user1', password: 'password1' });
  users.push({ name: 'User Two', username: 'user2', password: 'password2' });

  hideAll();
  document.getElementById('loginForm').style.display = 'block';
</script>

</body>
</html>