カテゴリー: WEB

WEBサービスのアイディア

  • ここにいくつかのWEBサービスアイデアを提案します：
  • タスク自動化サービス：
  • 各種のタスク（例：ファイル管理、データバックアップ、レポート作成など）を自動化するクラウドサービス。ユーザーが日常的な作業を簡単にスクリプトやAIを使って自動化できる。
  • AI学習サポートプラットフォーム：
  • 受験生や学習者向けに、個別の学習プランを作成し、進捗を自動的に管理するサービス。AIがユーザーの理解度に応じた問題を提案したり、弱点克服のためのアドバイスを提供する。
  • ローカルコミュニティSNS：
  • 地域ごとのローカルなコミュニティSNS。近所でのイベントやニュース、フリーマーケット情報など、地域に特化した情報を交換できる。
  • オンラインスキルシェアプラットフォーム：
  • ユーザーが自身の専門知識やスキルを他のユーザーに教えたり、学んだりできるプラットフォーム。講師として登録でき、動画コンテンツやライブ講義を提供できる。
  • デジタルライフオーガナイザー：
  • ユーザーのオンラインアカウント、サブスクリプション、パスワードなどを一括で管理し、期限が近づいたら通知を送るサービス。セキュリティに配慮したデータ管理機能も持つ。
  • 趣味特化型Q&Aサイト：
  • 趣味（例：写真撮影、DIY、園芸、料理など）に特化したQ&Aサイト。ユーザーが同じ趣味を持つ仲間と意見交換や質問ができる。
  • AIパーソナルトレーナー：
  • フィットネスや食事管理をAIがサポートするサービス。日々の運動プランや食事の提案、進捗管理を行い、目標に合わせて調整。
  • ライティング支援ツール：
  • 小説、ブログ、エッセイなど、文章作成に特化したAI支援ツール。文法チェックやアイデア生成、構成アドバイスなどを提供。
  • クラウドベースのプロジェクト管理ツール：
  • チームでのプロジェクト管理を効率化するため、タスクの進捗管理、ファイル共有、コミュニケーションを一元化するツール。特にリモートワーク向けの機能が充実。
  • キャリアアドバイス＆マッチングプラットフォーム：
  • AIが個人のスキルや経験に基づいてキャリアアドバイスを提供し、適切な企業やプロジェクトとマッチングしてくれるプラットフォーム。

ELDER

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ELDER</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<style>
  body {
    padding-top: 20px;
    background-color: #f8f9fa;
  }
  .card {
    margin-bottom: 20px;
  }
  .profile-img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
  }
  .comment-section {
    margin-top: 20px;
  }
  .navbar {
    margin-bottom: 20px;
  }
  .form-error {
    color: red;
    font-size: 0.9em;
  }
</style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">SNS</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#" onclick="showLoginForm()">ログイン</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" onclick="showRegisterForm()">登録</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" onclick="showProfile()" style="display: none;" id="navProfile">プロフィール</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" onclick="logout()" style="display: none;" id="navLogout">ログアウト</a>
      </li>
    </ul>
  </div>
</nav>

<div class="container">
  <h1 class="text-center mb-4">ソーシャルネットワーキングサービス</h1>

  <!-- ログインフォーム -->
  <div id="loginForm" class="card w-50 mx-auto">
    <div class="card-body">
      <h2 class="card-title text-center mb-4">ログイン</h2>
      <div class="form-group">
        <input type="text" id="loginUsername" class="form-control" placeholder="ユーザー名">
        <span id="loginUsernameError" class="form-error" style="display: none;">ユーザー名を入力してください</span>
      </div>
      <div class="form-group">
        <input type="password" id="loginPassword" class="form-control" placeholder="パスワード">
        <span id="loginPasswordError" class="form-error" style="display: none;">パスワードを入力してください</span>
      </div>
      <button onclick="login()" class="btn btn-primary btn-block">ログイン</button>
      <button onclick="showRegisterForm()" class="btn btn-secondary btn-block">登録</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">登録</h2>
      <div class="form-group">
        <input type="text" id="registerName" class="form-control" placeholder="氏名">
        <span id="registerNameError" class="form-error" style="display: none;">氏名を入力してください</span>
      </div>
      <div class="form-group">
        <input type="text" id="registerUsername" class="form-control" placeholder="ユーザー名">
        <span id="registerUsernameError" class="form-error" style="display: none;">ユーザー名を入力してください</span>
      </div>
      <div class="form-group">
        <input type="password" id="registerPassword" class="form-control" placeholder="パスワード">
        <span id="registerPasswordError" class="form-error" style="display: none;">パスワードを入力してください</span>
      </div>
      <div class="form-group">
        <input type="password" id="registerConfirmPassword" class="form-control" placeholder="パスワードを確認">
        <span id="registerConfirmPasswordError" class="form-error" style="display: none;">パスワードが一致しません</span>
      </div>
      <button onclick="register()" class="btn btn-primary btn-block">登録</button>
      <button onclick="showLoginForm()" class="btn btn-secondary btn-block">ログインに戻る</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">プロフィール</h2>
      <div class="text-center mb-3">
        <img id="profileImg" class="profile-img" src="default_profile_img.jpg" alt="プロフィール画像">
      </div>
      <p class="text-center mb-2"><strong>氏名:</strong> <span id="profileName"></span></p>
      <p class="text-center mb-4"><strong>ユーザー名:</strong> <span id="profileUsername"></span></p>
      <div class="form-group">
        <input type="file" id="profileImageInput" accept="image/*" class="form-control-file">
      </div>
      <button onclick="uploadProfileImage()" class="btn btn-primary btn-block"><i class="fas fa-upload"></i> プロフィール画像をアップロード</button>
      <button id="followButton" onclick="toggleFollow()" class="btn btn-primary btn-block"></button>
      <button id="messageButton" onclick="openDirectMessageModal()" class="btn btn-primary btn-block">ダイレクトメッセージを送信</button>
      <button onclick="logout()" class="btn btn-danger btn-block"><i class="fas fa-sign-out-alt"></i> ログアウト</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">投稿を作成</h2>
      <div class="form-group">
        <textarea id="postContent" class="form-control" rows="3" placeholder="今何を考えていますか？"></textarea>
      </div>
      <button onclick="createPost()" class="btn btn-primary btn-block">投稿</button>
    </div>
  </div>

  <!-- FEED登録フォーム -->
  <div id="feedForm" class="card w-75 mx-auto" style="display: none;">
    <div class="card-body">
      <h2 class="card-title text-center mb-4">FEEDを登録</h2>
      <div class="form-group">
        <input type="text" id="feedUrl" class="form-control" placeholder="RSSフィードのURL">
        <span id="feedUrlError" class="form-error" style="display: none;">RSSフィードのURLを入力してください</span>
      </div>
      <button onclick="registerFeed()" class="btn btn-primary btn-block">登録</button>
    </div>
  </div>

  <!-- タイムライン -->
  <div id="timeline" class="w-75 mx-auto mt-4"></div>
</div>

<!-- リプライモーダル -->
<div class="modal fade" id="replyModal" tabindex="-1" role="dialog" aria-labelledby="replyModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="replyModalLabel">投稿に返信</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <textarea id="replyContent" class="form-control" rows="3" placeholder="返信をここに書いてください..."></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
        <button type="button" onclick="postReply()" class="btn btn-primary">返信</button>
      </div>
    </div>
  </div>
</div>

<!-- ダイレクトメッセージモーダル -->
<div class="modal fade" id="directMessageModal" tabindex="-1" role="dialog" aria-labelledby="directMessageModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="directMessageModalLabel">ダイレクトメッセージを送信</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <select id="recipient" class="form-control">
          <option value="">送信先を選択</option>
          <!-- ユーザーリストがここに追加される -->
        </select>
        <textarea id="directMessageContent" class="form-control mt-2" rows="3" placeholder="メッセージをここに書いてください..."></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
        <button type="button" onclick="sendDirectMessage()" class="btn btn-primary">送信</button>
      </div>
    </div>
  </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 = []; // 投稿の配列
  let feeds = []; // フィードの配列

  // ローカルストレージにユーザー情報を保存
  function saveUsersToLocalStorage() {
    localStorage.setItem('users', JSON.stringify(users));
  }

  // ローカルストレージに投稿情報を保存
  function savePostsToLocalStorage() {
    localStorage.setItem('posts', JSON.stringify(posts));
  }

  // ローカルストレージにフィード情報を保存
  function saveFeedsToLocalStorage() {
    localStorage.setItem('feeds', JSON.stringify(feeds));
  }

  // ローカルストレージからユーザー情報を読み込み
  function loadUsersFromLocalStorage() {
    const storedUsers = localStorage.getItem('users');
    if (storedUsers) {
      users = JSON.parse(storedUsers);
    }
  }

  // ローカルストレージから投稿情報を読み込み
  function loadPostsFromLocalStorage() {
    const storedPosts = localStorage.getItem('posts');
    if (storedPosts) {
      posts = JSON.parse(storedPosts);
    }
  }

  // ローカルストレージからフィード情報を読み込み
  function loadFeedsFromLocalStorage() {
    const storedFeeds = localStorage.getItem('feeds');
    if (storedFeeds) {
      feeds = JSON.parse(storedFeeds);
    }
  }

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

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

  function validateLoginForm() {
    let valid = true;
    const username = document.getElementById('loginUsername').value;
    const password = document.getElementById('loginPassword').value;
    
    if (!username) {
      document.getElementById('loginUsernameError').style.display = 'block';
      valid = false;
    } else {
      document.getElementById('loginUsernameError').style.display = 'none';
    }
    
    if (!password) {
      document.getElementById('loginPasswordError').style.display = 'block';
      valid = false;
    } else {
      document.getElementById('loginPasswordError').style.display = 'none';
    }
    
    return valid;
  }

  function login() {
    if (!validateLoginForm()) {
      return;
    }

    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('ユーザー名またはパスワードが間違っています。');
    }
  }

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

  function validateRegisterForm() {
    let valid = true;
    const name = document.getElementById('registerName').value;
    const username = document.getElementById('registerUsername').value;
    const password = document.getElementById('registerPassword').value;
    const confirmPassword = document.getElementById('registerConfirmPassword').value;
    
    if (!name) {
      document.getElementById('registerNameError').style.display = 'block';
      valid = false;
    } else {
      document.getElementById('registerNameError').style.display = 'none';
    }
    
    if (!username) {
      document.getElementById('registerUsernameError').style.display = 'block';
      valid = false;
    } else {
      document.getElementById('registerUsernameError').style.display = 'none';
    }
    
    if (!password) {
      document.getElementById('registerPasswordError').style.display = 'block';
      valid = false;
    } else {
      document.getElementById('registerPasswordError').style.display = 'none';
    }
    
    if (password !== confirmPassword) {
      document.getElementById('registerConfirmPasswordError').style.display = 'block';
      valid = false;
    } else {
      document.getElementById('registerConfirmPasswordError').style.display = 'none';
    }
    
    return valid;
  }

  function register() {
    if (!validateRegisterForm()) {
      return;
    }

    const name = document.getElementById('registerName').value;
    const username = document.getElementById('registerUsername').value;
    const password = document.getElementById('registerPassword').value;

    users.push({ name, username, password, following: false });
    saveUsersToLocalStorage(); // ユーザー情報を保存
    alert('登録が完了しました！ログインしてください。');
    showLoginForm();
  }

  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';
    document.getElementById('feedForm').style.display = 'block';
    loadProfileImage(); // プロフィール画像をロード
    displayTimeline(); // タイムラインを表示
    updateFollowButton(); // フォローボタンの表示を更新
    loadDirectMessageRecipients(); // ダイレクトメッセージの送信先をロード
    document.getElementById('navProfile').style.display = 'block';
    document.getElementById('navLogout').style.display = 'block';
  }

  // プロフィール画像をロード
  function loadProfileImage() {
    const profileImg = document.getElementById('profileImg');
    // プロフィール画像が設定されている場合はその画像を表示
    if (currentUser.profileImage) {
      profileImg.src = currentUser.profileImage;
    } else {
      // デフォルトのプロフィール画像を表示
      profileImg.src = 'default_profile_img.jpg';
    }
  }

  // プロフィール画像をアップロード
  function uploadProfileImage() {
    const input = document.getElementById('profileImageInput');
    const file = input.files[0];
    if (file) {
      // FileReaderを使用して画像を読み込む
      const reader = new FileReader();
      reader.onload = function(e) {
        // 読み込んだ画像をプロフィール画像として設定
        currentUser.profileImage = e.target.result;
        // プロフィール画像を更新して表示
        loadProfileImage();
        saveUsersToLocalStorage(); // プロフィール画像を保存
      }
      reader.readAsDataURL(file);
    }
  }

  // フォローボタンの更新
  function updateFollowButton() {
    const followButton = document.getElementById('followButton');
    if (currentUser.following) {
      followButton.textContent = 'フォロー解除';
    } else {
      followButton.textContent = 'フォロー';
    }
    saveUsersToLocalStorage(); // フォロー状態を保存
  }

  // フォローの切り替え
  function toggleFollow() {
    currentUser.following = !currentUser.following;
    updateFollowButton();
  }

  // ダイレクトメッセージの送信先をロード
  function loadDirectMessageRecipients() {
    const select = document.getElementById('recipient');
    select.innerHTML = '<option value="">送信先を選択</option>';
    users.forEach(user => {
      if (user !== currentUser) {
        const option = document.createElement('option');
        option.value = user.username;
        option.textContent = user.name;
        select.appendChild(option);
      }
    });
  }

  // ダイレクトメッセージのモーダルを開く
  function openDirectMessageModal() {
    $('#directMessageModal').modal('show');
  }

  // ダイレクトメッセージを送信
  function sendDirectMessage() {
    const recipientUsername = document.getElementById('recipient').value;
    const messageContent = document.getElementById('directMessageContent').value;
    if (recipientUsername && messageContent.trim() !== '') {
      const recipient = users.find(user => user.username === recipientUsername);
      if (recipient) {
        alert(`メッセージを${recipient.name}に送信しました: ${messageContent}`);
        $('#directMessageModal').modal('hide');
      } else {
        alert('送信先が見つかりません。');
      }
    } else {
      alert('送信先を選択し、メッセージを入力してください。');
    }
  }

  function createPost() {
    const postContent = document.getElementById('postContent').value;
    if (postContent.trim() !== '') {
      const post = {
        id: Date.now(),
        content: postContent,
        author: currentUser.name,
        authorUsername: currentUser.username,
        authorProfileImage: currentUser.profileImage, // プロフィール画像を追加
        likes: 0,
        comments: []
      };
      posts.unshift(post); // 最新の投稿を先頭に追加
      savePostsToLocalStorage(); // 投稿を保存
      displayTimeline();
      document.getElementById('postContent').value = ''; // 投稿後、入力欄を空にする
    }
  }

  function registerFeed() {
    const feedUrl = document.getElementById('feedUrl').value;
    if (feedUrl.trim() !== '') {
      feeds.push(feedUrl);
      saveFeedsToLocalStorage(); // フィード情報を保存
      alert('RSSフィードが登録されました！');
      document.getElementById('feedUrl').value = ''; // 登録後、入力欄を空にする
    } else {
      document.getElementById('feedUrlError').style.display = 'block';
    }
  }

  function displayTimeline() {
    const timeline = document.getElementById('timeline');
    timeline.innerHTML = '';
    posts.forEach(post => {
      const postElement = document.createElement('div');
      postElement.classList.add('card', 'mb-3');
      postElement.innerHTML = `
        <div class="card-body">
          <div class="d-flex align-items-center mb-3">
            <img src="${post.authorProfileImage || 'default_profile_img.jpg'}" class="profile-img mr-2" alt="プロフィール画像">
            <div>
              <strong>${post.author}</strong> (@${post.authorUsername})
            </div>
          </div>
          <p class="card-text">${post.content}</p>
          ${post.link ? `<a href="${post.link}" target="_blank" class="btn btn-link">続きを読む</a>` : ''}
          <div class="d-flex justify-content-between">
            <div>
              <button onclick="likePost(${post.id})" class="btn btn-primary btn-sm"><i class="fas fa-thumbs-up"></i> いいね (${post.likes})</button>
              <button onclick="toggleComments(${post.id})" class="btn btn-secondary btn-sm"><i class="fas fa-comments"></i> コメント (${post.comments.length})</button>
              <button onclick="replyToPost(${post.id})" class="btn btn-info btn-sm"><i class="fas fa-reply"></i> 返信</button>
            </div>
            <small class="text-muted">${new Date(post.id).toLocaleString()}</small>
          </div>
          <div id="comments-${post.id}" class="comment-section mt-3" style="display: none;">
            ${post.comments.map(comment => `
              <div class="card mb-2">
                <div class="card-body">
                  <p><strong>${comment.author}</strong>: ${comment.content}</p>
                </div>
              </div>
            `).join('')}
          </div>
        </div>
      `;
      timeline.appendChild(postElement);
    });
  }

  function likePost(postId) {
    const post = posts.find(p => p.id === postId);
    post.likes++;
    savePostsToLocalStorage(); // いいねを保存
    displayTimeline();
  }

  function toggleComments(postId) {
    const commentSection = document.getElementById(`comments-${postId}`);
    commentSection.style.display = commentSection.style.display === 'none' ? 'block' : 'none';
  }

  function replyToPost(postId) {
    const modal = document.getElementById('replyModal');
    modal.dataset.postId = postId;
    $('#replyModal').modal('show');
  }

  function postReply() {
    const postId = parseInt(document.getElementById('replyModal').dataset.postId);
    const post = posts.find(p => p.id === postId);
    const replyContent = document.getElementById('replyContent').value;
    if (replyContent.trim() !== '') {
      post.comments.push({ author: currentUser.name, content: replyContent });
      $('#replyModal').modal('hide');
      savePostsToLocalStorage(); // コメントを保存
      displayTimeline();
    } else {
      alert('返信を入力してください。');
    }
  }

  function fetchFeeds() {
    feeds.forEach(feedUrl => {
      fetch(`https://api.rss2json.com/v1/api.json?rss_url=${encodeURIComponent(feedUrl)}`)
        .then(response => response.json())
        .then(data => {
          data.items.forEach(item => {
            const post = {
              id: Date.now() + Math.random(), // 重複しないIDを生成
              content: item.title,
              link: item.link, // リンクを追加
              author: 'RSSフィード',
              authorUsername: 'rssfeed',
              authorProfileImage: 'default_profile_img.jpg', // プロフィール画像を設定
              likes: 0,
              comments: []
            };
            posts.unshift(post); // 最新の投稿を先頭に追加
            savePostsToLocalStorage(); // 投稿を保存
          });
          displayTimeline(); // タイムラインを表示
        })
        .catch(error => console.error('Error fetching RSS feed:', error));
    });
  }

  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';
    document.getElementById('feedForm').style.display = 'none';
  }

  // 初期データをローカルストレージから読み込む
  loadUsersFromLocalStorage();
  loadPostsFromLocalStorage();
  loadFeedsFromLocalStorage();

  // 初期ログイン画面表示
  hideAll();
  document.getElementById('loginForm').style.display = 'block';

  // 1時間ごとにRSSフィードをフェッチして自動投稿
  setInterval(fetchFeeds, 5); // 3600000ミリ秒 = 1時間

</script>

</body>
</html>

RSSの機能を使えるようにしました

React 配列

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>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="container"></div>

  <script type="text/babel">
    'use strict';

    {
      const Menu = (props) => {
        return (
          <li>
            <button>-</button>
            <button>+</button>
            {props.name}({props.price}G X 0個)
            </li>
        );
      };

      const App = () => {
        const menus = [
          {name: '聖剣', price: 400},
          {name: '魔装銃', price: 500},
          {name: '魔剣', price: 300},
        ];

        const menuItems = menus.map((menu) =>{
          return(
            <Menu 
            name={menu.name}
            price={menu.price}
            />
          );
        });
        return (
          <>
            <h1>メニュー</h1>
            <ul className="menus">
              {menuItems}
            </ul>
            <p>合計: 0円</p>
          </>
        );
      };

      const container = document.querySelector('#container');
      const root = ReactDOM.createRoot(container);
      root.render(<App />);
    }
  </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;
}

.menus button{
    margin-right: 8px;
    width: 24px;
}
p{
    margin: 0;
    text-align: right;
}

React CSSでスタイリングしていこう

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>
            <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;
    background: pink;
}

h1{
    margin: 0;
    font-size: 20px;
    text-align: center;
}

ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
}

p{
    margin: 0;
    text-align: right;
}

tailwindcss To-Do List

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>To-Do List</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
  <div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-md">
    <h1 class="text-2xl font-bold mb-4">To-Do List</h1>
    <form id="todo-form" class="flex mb-4">
      <input id="todo-input" type="text" placeholder="Add a new task" class="flex-grow p-2 border rounded-l-lg focus:outline-none">
      <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-r-lg hover:bg-blue-700">Add</button>
    </form>
    <div class="mb-4">
      <button id="filter-all" class="filter-btn bg-gray-200 text-black px-4 py-2 rounded-l-lg">All</button>
      <button id="filter-active" class="filter-btn bg-gray-200 text-black px-4 py-2">Active</button>
      <button id="filter-completed" class="filter-btn bg-gray-200 text-black px-4 py-2 rounded-r-lg">Completed</button>
    </div>
    <ul id="todo-list" class="list-disc pl-5">
      <!-- To-Do items will be added here -->
    </ul>
  </div>

  <script>
    const todoForm = document.getElementById('todo-form');
    const todoInput = document.getElementById('todo-input');
    const todoList = document.getElementById('todo-list');
    const filterButtons = document.querySelectorAll('.filter-btn');

    document.addEventListener('DOMContentLoaded', loadTodos);
    todoForm.addEventListener('submit', function(event) {
      event.preventDefault();
      addTodoItem(todoInput.value);
      todoInput.value = '';
    });

    filterButtons.forEach(button => {
      button.addEventListener('click', () => {
        document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('bg-blue-500', 'text-white'));
        button.classList.add('bg-blue-500', 'text-white');
        filterTodos(button.id);
      });
    });

    function addTodoItem(task) {
      if (task === '') return;

      const listItem = document.createElement('li');
      listItem.classList.add('flex', 'items-center', 'justify-between', 'py-2', 'border-b', 'border-gray-200');

      const taskText = document.createElement('span');
      taskText.textContent = task;
      taskText.classList.add('flex-grow', 'cursor-pointer');
      taskText.addEventListener('click', toggleComplete);

      const editButton = document.createElement('button');
      editButton.textContent = 'Edit';
      editButton.classList.add('bg-yellow-500', 'text-white', 'px-2', 'py-1', 'rounded', 'ml-2', 'hover:bg-yellow-700');
      editButton.addEventListener('click', () => editTodoItem(listItem, taskText));

      const priorityButton = document.createElement('button');
      priorityButton.textContent = 'Important';
      priorityButton.classList.add('bg-green-500', 'text-white', 'px-2', 'py-1', 'rounded', 'ml-2', 'hover:bg-green-700');
      priorityButton.addEventListener('click', () => togglePriority(taskText));

      const deleteButton = document.createElement('button');
      deleteButton.textContent = 'Delete';
      deleteButton.classList.add('bg-red-500', 'text-white', 'px-2', 'py-1', 'rounded', 'ml-2', 'hover:bg-red-700');
      deleteButton.addEventListener('click', () => deleteTodoItem(listItem));

      listItem.appendChild(taskText);
      listItem.appendChild(editButton);
      listItem.appendChild(priorityButton);
      listItem.appendChild(deleteButton);
      todoList.appendChild(listItem);

      saveTodos();
    }

    function toggleComplete(event) {
      event.target.classList.toggle('line-through');
      event.target.classList.toggle('text-gray-500');
      saveTodos();
    }

    function togglePriority(taskText) {
      taskText.classList.toggle('font-bold');
      saveTodos();
    }

    function editTodoItem(listItem, taskText) {
      const newTask = prompt('Edit your task:', taskText.textContent);
      if (newTask !== null && newTask !== '') {
        taskText.textContent = newTask;
        saveTodos();
      }
    }

    function deleteTodoItem(listItem) {
      listItem.remove();
      saveTodos();
    }

    function saveTodos() {
      const todos = [];
      document.querySelectorAll('#todo-list li').forEach((item) => {
        todos.push({
          text: item.querySelector('span').textContent,
          completed: item.querySelector('span').classList.contains('line-through'),
          important: item.querySelector('span').classList.contains('font-bold')
        });
      });
      localStorage.setItem('todos', JSON.stringify(todos));
    }

    function loadTodos() {
      const savedTodos = JSON.parse(localStorage.getItem('todos')) || [];
      savedTodos.forEach((todo) => {
        const listItem = document.createElement('li');
        listItem.classList.add('flex', 'items-center', 'justify-between', 'py-2', 'border-b', 'border-gray-200');

        const taskText = document.createElement('span');
        taskText.textContent = todo.text;
        taskText.classList.add('flex-grow', 'cursor-pointer');
        if (todo.completed) {
          taskText.classList.add('line-through', 'text-gray-500');
        }
        if (todo.important) {
          taskText.classList.add('font-bold');
        }
        taskText.addEventListener('click', toggleComplete);

        const editButton = document.createElement('button');
        editButton.textContent = 'Edit';
        editButton.classList.add('bg-yellow-500', 'text-white', 'px-2', 'py-1', 'rounded', 'ml-2', 'hover:bg-yellow-700');
        editButton.addEventListener('click', () => editTodoItem(listItem, taskText));

        const priorityButton = document.createElement('button');
        priorityButton.textContent = 'Important';
        priorityButton.classList.add('bg-green-500', 'text-white', 'px-2', 'py-1', 'rounded', 'ml-2', 'hover:bg-green-700');
        priorityButton.addEventListener('click', () => togglePriority(taskText));

        const deleteButton = document.createElement('button');
        deleteButton.textContent = 'Delete';
        deleteButton.classList.add('bg-red-500', 'text-white', 'px-2', 'py-1', 'rounded', 'ml-2', 'hover:bg-red-700');
        deleteButton.addEventListener('click', () => deleteTodoItem(listItem));

        listItem.appendChild(taskText);
        listItem.appendChild(editButton);
        listItem.appendChild(priorityButton);
        listItem.appendChild(deleteButton);
        todoList.appendChild(listItem);
      });
    }

    function filterTodos(filter) {
      const allTodos = document.querySelectorAll('#todo-list li');
      allTodos.forEach((todo) => {
        switch (filter) {
          case 'filter-all':
            todo.style.display = 'flex';
            break;
          case 'filter-active':
            todo.querySelector('span').classList.contains('line-through') ? todo.style.display = 'none' : todo.style.display = 'flex';
            break;
          case 'filter-completed':
            todo.querySelector('span').classList.contains('line-through') ? todo.style.display = 'flex' : todo.style.display = 'none';
            break;
        }
      });
    }
  </script>
</body>
</html>

Tailwind CSS入門　インタラクティブにスタイルを変えてみよう

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 Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <button
        class="bg-orange-400 text-white m-4 py-2 px-4 rounded-full shadow-black/30 shadow-md hover:opacity-80 transition duration-500 active:translate-y-1">
        Buy now!
    </button>
</body>

</html>

Tailwind CSS入門 ボタンのスタイリングをしてみよう

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
<button class="bg-orange-400 text-white m-4 py-2 px-4 rounded-full shadow-black/30 shadow-md">
        Buy now!
    </button>
</body>

</html>

Tailwind CSS入門 境界線を設定してみよう

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <div class="bg-red-400 w-20 h-20 border-solid border-gray-200 border-8">Box 1</div>
    <div class="bg-sky-400 w-20 h-20 border-dashed border-gray-200 border-b-8">Box 2</div>
</body>

</html>