はじめに

今回はhtmlとcssとjsを使ってtwitterのクローン（？）を書きます（外装だけです）

ファイル構成

今回は同じフォルダに、style.css, main.htmlを置きます

コピペ

以下のコードをコピペしましょう

main.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Twitter Clone</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="sidebar" style="height: 100vh;">
      <h2>メニュー</h2>
      <ul style="text-decoration: none;">
        <li><a href="#" id="home-link">ホーム</a></li>
        <li><a href="#" id="profile-link">プロフィール</a></li>
        <li><a href="#">通知</a></li>
        <li><a href="#" id="Settings">設定</a></li>
      </ul>
    </div>
  
    <div id="main-content">
      <h1>Twitter Clone</h1>
      <div id="tweetsSection">
        <form id="tweetForm">
          <input type="text" id="tweetInput" placeholder="What's happening?" required>
          <button type="submit">Tweet</button>
        </form>
        <div id="tweetsList"></div>
      </div>

      <div id="profileSection" hidden>
        <div class="profile-header">
          <h2>プロフィール</h2>
          <button id="editProfileButton">プロフィールを編集</button>
        </div>
        <div class="profile-info">
          <img src="profile-pic.jpeg" alt="プロフィール画像" class="profile-pic">
          <h3 id="profile-name">test</h3>
          <p id="profile-bio">テストです</p>
          <p><strong>フォロワー:</strong> 100 <strong>フォロー中:</strong> 50</p>
          <strong id="Profile-Tweets">Profile name's Tweet</strong>
          <div class="tweet">
            <img src="profile-pic.jpeg" style="border-radius: 100px; width: 25px; height: 25px;" alt=""><strong>test</strong>
            <p>test</p>
          </div>
        </div>
      </div>

      <div id="ProfileSetting" hidden>
        <div class="profile-info">
          <h1 style="color: black;">プロフィール編集</h1>
          <p>ユーザー名:</p>
          <input type="text" id="newname" style="width: 300px;margin-top: 10px">
          <p style="margin-top: 20px;" id="description">説明</p>
          <textarea id="newdescription" style="border-radius: 5px; resize: none; width: 300px; height: 70px; margin-top: 10px;"></textarea>
          <br>
          <button onclick="NewProfileData();" style="width: 120px !important; height: 30px !important; padding: 0 !important;margin-top: none !important; margin-top: 20px;">変更を適応</button>
          <a href="" style="width: 200px; text-align: center !important; margin-top: 20px;">アカウント情報などの変更はこちらから（工事中）</a>
        </div>
      </div>
    </div>

    <script>
      let DisplayName = "test_account";
      let description;
  const sampleTweets = [
      { id: 1, name: "testAccount", content: "こんにちは、みなさん！(Hello everyone)", likes: 10 },
      { id: 2, name: "test_desu", content: "Twitterクローンを作っています!", likes: 15 },
      { id: 3, name: "test", content: "基本機能終わりました！", likes: 8 },
      { id: 4, name: "tesutodayo!", content: "テストです!", likes: 20 }
    ];

    function updateProfile(newName, newdescription) {
      if(newName == "") {
        console.log('名前の変更をキャンセルしました')
        description.textContent = newdescription;
      } else {
        document.getElementById('profile-name').textContent = newName;
        document.getElementById('profile-bio').textContent = newdescription;
        document.getElementById('Profile-Tweets').textContent = newName+" 's Tweet";
      }
          document.getElementById('tweetsSection').hidden = true; // ツイートセクションを隠す
          document.getElementById('profileSection').hidden = false; // プロフィールセクションを表示
          document.getElementById('ProfileSetting').hidden = true; // プロフィール設定を隠す
          return newName;
    }
    // サンプルツイートを表示する関数
    function displayTweet(tweet) {
      const tweetElement = document.createElement('div');
      tweetElement.className = 'tweet'; // CSSのクラスを追加
      tweetElement.innerHTML = `
        <strong>${tweet.name}</strong>
        <p>${tweet.content}</p>
        <button class="like-btn" data-id="${tweet.id}">いいね (${tweet.likes})</button>
        <button style="background-color: white; padding: 0; color: black;">返信</button>
      
      `

      // 「いいね」ボタンのクリックイベントを設定
      const likeButton = tweetElement.querySelector('.like-btn');
      likeButton.addEventListener('click', () => {
        likeTweet(tweet.id, likeButton); // いいね機能を実行
      });

      document.getElementById('tweetsList').appendChild(tweetElement);
    }

    // いいね機能
    function likeTweet(tweetId, likeButton) {
      const tweet = sampleTweets.find(t => t.id === tweetId);
      if (tweet) {
        tweet.likes++; // いいね数を増やす
        likeButton.textContent = `いいね (${tweet.likes})`; // ボタン表示を更新
      }
    }

    // サンプルツイートをロード
    window.onload = function() {
     updateProfile('test_account', "テスト垢です")
      sampleTweets.forEach(tweet => {
        displayTweet(tweet);
      });
    };
    function NewProfileData() {
     let Name = updateProfile(document.getElementById('newname').value, document.getElementById('newdescription').value);
      DisplayName = Name;
      
    }

    // 新しいツイートを投稿する機能
    document.getElementById('tweetForm').addEventListener('submit', function(event) {
      event.preventDefault(); // ページ再読み込みを防止

      const newTweetContent = tweetInput.value.trim();

      if (newTweetContent) {
        let newTweet = {}
          newTweet = {
            name: DisplayName,
            id: sampleTweets.length + 1, // IDをユニークにする
            content: newTweetContent,
            likes: 0
          };
        
        sampleTweets.unshift(newTweet); // 新しいツイートをリストの先頭に追加
        displayTweet(newTweet); // 画面に表示
        
        tweetInput.value = ''; // 入力欄をクリア
      }
    });

      // ページ切り替えの処理
      document.getElementById('home-link').addEventListener('click', function(event) {
          event.preventDefault(); // リンクのデフォルト動作を防止
          document.getElementById('tweetsSection').hidden = false; // ツイートセクションを表示
          document.getElementById('profileSection').hidden = true; // プロフィールセクションを隠す
          document.getElementById('ProfileSetting').hidden = true; // プロフィール設定を隠す
      });

      document.getElementById('profile-link').addEventListener('click', function(event) {
          event.preventDefault(); // リンクのデフォルト動作を防止
          document.getElementById('tweetsSection').hidden = true; // ツイートセクションを隠す
          document.getElementById('profileSection').hidden = false; // プロフィールセクションを表示
          document.getElementById('ProfileSetting').hidden = true; // プロフィール設定を隠す
      });

      // プロフィール編集ボタンの処理
      document.getElementById('editProfileButton').addEventListener('click', function() {
          document.getElementById('profileSection').hidden = true; // プロフィールセクションを隠す
          document.getElementById('ProfileSetting').hidden = false; // プロフィール設定を表示
      });
    </script>
</body>
</html>

css:

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
  }
  
  body {
    background-color: #e6ecf0;
    color: #14171a;
    font-size: 14px;
    line-height: 1.5;
    display: flex; /* フレックスボックスを使ってレイアウトを調整 */
  }
  
  #sidebar {
    width: 200px; /* サイドバーの幅 */
    margin: 0 auto;
    height: 100vh; /* サイドバーの高さを画面に合わせる */
    background-color: #f0f0f0; /* 背景色 */
    padding: 20px; /* 内側の余白 */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* 影をつける */
    position: fixed; /* スクロールしても固定する */
  }
  
  #main-content {
    flex: 1; /* 残りのスペースを埋める */
    margin-left: 220px; /* サイドバーの幅を考慮して左に余白を作る */
    padding: 20px; /* 内側の余白 */
    display: flex;
    flex-direction: column; /* 縦に並べる */
    align-items: center; /* 中央に寄せる */
  }
  
  h1 {
    text-align: center;
    color: #1da1f2;
    margin: 20px 0;
  }
  
  #tweetForm {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }
  
  #tweetInput {
    width: 60%;
    padding: 10px;
    border: 2px solid #1da1f2;
    border-radius: 30px;
    font-size: 16px;
  }
  
  button {
    padding: 10px 20px;
    background-color: #1da1f2;
    color: white;
    border: none;
    border-radius: 30px;
    margin-left: 10px;
    cursor: pointer;
    font-size: 16px;
  }
  
  button:hover {
    background-color: #0d8bcd;
  }
  
  #tweetsList {
    max-width: 600px;
    margin: 0 auto; /* 中央寄せ */
  }
  
  .tweet {
    text-align: left;
    background-color: white;
    border: 1px solid #e1e8ed;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 8px; /* 角を丸くする */
    width: 100%; /* 幅を100%に */
    max-width: 600px; /* 最大幅を設定 */
  }
  
  .like-btn {
    background-color: transparent;
    border: none;
    color: #1da1f2;
    cursor: pointer;
    font-size: 14px;
    margin-top: 10px;
  }
  
  .like-btn:hover {
    text-decoration: underline;
  }
  
  /* プロフィールセクションのスタイル */
  #profile {
    margin-top: 20px; /* サイドバーとメインコンテンツの間にスペース */
  }
  
  .profile-header {
    display: flex;
    justify-content: space-between; /* ヘッダーの内容を両端に配置 */
    width: 100%; /* 幅を100%に */
  }
  
  .profile-info {
    background-color: #ffffff; /* 背景色 */
    padding: 20px; /* 内側の余白 */
    border-radius: 10px; /* 角を丸くする */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* 影をつける */
    margin-top: 10px; /* 上の余白 */
    text-align: center; /* 中央揃え */
    min-height: 100vh;
    min-width: 100vh;
    max-width: 100vh; /* 最大幅 */
    width: 100%; /* 幅を100%に */
  }
  
  .profile-pic {
    width: 100px; /* 画像の幅 */
    height: 100px; /* 画像の高さ */
    border-radius: 50%; /* 円形にする */
    margin-bottom: 15px; /* 下の余白 */
  }
  
  #profile-name {
    font-size: 1.5em; /* 名前のフォントサイズ */
    margin: 10px 0; /* 上下の余白 */
  }
  
  #profile-bio {
    font-size: 1em; /* バイオのフォントサイズ */
    color: #666; /* テキストの色 */
    margin-bottom: 15px; /* 下の余白 */
  }
  
  #follow-button {
    background-color: #007bff; /* ボタンの背景色 */
    color: white; /* テキストの色 */
    border: none; /* ボーダーを消す */
    border-radius: 5px; /* 角を丸くする */
    padding: 10px 15px; /* 内側の余白 */
    cursor: pointer; /* カーソルをポインタに */
    transition: background-color 0.3s; /* ホバー時のトランジション */
  }
  
  #follow-button:hover {
    background-color: #0056b3; /* ホバー時の背景色 */
  }
  
  /* メニューのリスト */
  ul {
    list-style-type: none; /* リストのスタイルを消す */
    padding: 0; /* パディングを消す */
  }
  
  ul li {
    margin: 10px 0; /* リスト項目の間隔 */
  }
  
  a {
    text-decoration: none; /* 下線を消す */
    color: #333; /* テキストの色 */
    display: block; /* リスト項目をブロックに */
    padding: 10px; /* 内側の余白 */
  }
  
  a:hover {
    background-color: #d1e8ff; /* ホバー時の背景色 */
  }

画像は好きな画像をjpegでダウンロードしてフォルダーに移動してください。（jpegじゃない場合は、img属性のsrc属性のファイルパスの拡張子をダウンロードしたファイルの拡張子に置き換えてください。）

最後に

今回はhtmlとcssを使ってtwitterのクローンを書きました。ちなみに今回もjavascriptとcssの修正などはGPTにやってもらいました
それではまたお会いしましょう！