はじめに
今回は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にやってもらいました
それではまたお会いしましょう！