<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>疑似配信サイト - PC画面＆システム音声</title>
<style>
/* ベースリセット */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
background: #f5f5f5;
color: #333;
}
header, footer {
background: #333;
color: #fff;
padding: 15px;
text-align: center;
}
header h1 {
margin: 0;
font-size: 1.5rem;
letter-spacing: 0.05em;
}
footer p {
margin: 0;
font-size: 0.9rem;
}
main {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
background: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.page-title {
text-align: center;
margin-bottom: 20px;
font-size: 1.4rem;
}
/* 2カラムレイアウト */
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.video-section {
flex: 1 1 600px;
min-width: 300px;
}
.aside-section {
flex: 1 1 350px;
min-width: 300px;
background: #fafafa;
border-left: 1px solid #ccc;
padding: 10px;
}
/* 動画表示領域 */
.video-wrapper {
background: #000;
overflow: hidden;
}
.video-wrapper video {
display: block;
width: 100%;
height: auto;
background: #000;
}
.video-title {
margin: 10px 0;
font-weight: bold;
}
.video-controls {
text-align: center;
margin-top: 10px;
}
.video-controls button {
margin: 0 5px;
padding: 8px 16px;
font-size: 1rem;
cursor: pointer;
}
/* チャットUI */
.chat-section {
display: flex;
flex-direction: column;
height: 400px;
}
.chat-log {
flex: 1;
border: 1px solid #ccc;
padding: 10px;
overflow-y: auto;
margin-bottom: 10px;
background: #fff;
}
.chat-log p {
margin: 0 0 5px 0;
}
.chat-log p span.username {
font-weight: bold;
color: #3366cc;
margin-right: 5px;
}
.chat-input-area {
display: flex;
gap: 5px;
}
.chat-input-area input[type="text"] {
flex: 1;
padding: 8px;
font-size: 1rem;
}
.chat-input-area button {
padding: 8px 16px;
font-size: 1rem;
cursor: pointer;
}
/* スケジュール */
.schedule {
margin-top: 20px;
}
.schedule h2 {
font-size: 1.2rem;
margin-bottom: 10px;
}
.schedule table {
width: 100%;
border-collapse: collapse;
}
.schedule th, .schedule td {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
.schedule th {
background: #f0f0f0;
}
.schedule tr:nth-child(even) {
background: #fafafa;
}
</style>
</head>
<body>
<!-- ヘッダー -->
<header>
<h1>My Advanced Live Streaming (Local Demo)</h1>
</header>
<!-- メインコンテンツ -->
<main>
<div class="page-title">PC画面＆システム音声をローカル再生するデモ</div>
<div class="container">
<!-- ▼ 動画エリア ▼ -->
<section class="video-section">
<div class="video-title">疑似ライブ映像</div>
<div class="video-wrapper">
<video id="liveVideo" controls autoplay></video>
</div>
<!-- ボタン類 -->
<div style="text-align: center; margin-top: 10px;">
<button id="screenShareBtn">画面共有(システム音声)</button>
<button id="cameraShareBtn">カメラ＆マイク</button>
<button id="stopBtn">停止</button>
</div>
<!-- 再生/一時停止/ミュート/全画面 -->
<div class="video-controls">
<button id="playBtn">再生</button>
<button id="pauseBtn">一時停止</button>
<button id="muteBtn">ミュート/解除</button>
<button id="fullscreenBtn">全画面</button>
</div>
<div class="schedule">
<h2>配信スケジュール（仮）</h2>
<table>
<thead>
<tr>
<th>日付</th>
<th>配信タイトル</th>
<th>開始時間</th>
<th>予定</th>
</tr>
</thead>
<tbody>
<tr>
<td>2/15</td>
<td>PC画面共有テスト</td>
<td>18:00</td>
<td>30分</td>
</tr>
<tr>
<td>2/18</td>
<td>音声ミキシング練習</td>
<td>20:00</td>
<td>1時間</td>
</tr>
<tr>
<td>2/20</td>
<td>週末雑談</td>
<td>21:30</td>
<td>2時間</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- ▼ チャットエリア ▼ -->
<aside class="aside-section">
<h2>チャット</h2>
<div class="chat-section">
<!-- チャットログ -->
<div id="chatLog" class="chat-log"></div>
<!-- 入力フォーム -->
<div class="chat-input-area">
<input type="text" id="usernameInput" placeholder="ユーザー名" />
<input type="text" id="messageInput" placeholder="メッセージを入力…" />
<button id="sendBtn">送信</button>
</div>
</div>
</aside>
</div><!-- /container -->
</main>
<!-- フッター -->
<footer>
<p>© 2025 My Advanced Live Streaming (Local Demo)</p>
</footer>
<script>
/*****************************************************************
* 1. PC画面＆システム音声 or カメラ＆マイクを取得
*****************************************************************/
const video = document.getElementById('liveVideo');
const screenShareBtn = document.getElementById('screenShareBtn');
const cameraShareBtn = document.getElementById('cameraShareBtn');
const stopBtn = document.getElementById('stopBtn');
let localStream = null;
// 画面共有 (PC画面 + システム音声)
async function startScreenShare() {
stopMedia(); // 既存ストリームを止めてから開始
try {
// getDisplayMediaで画面を共有
// audio:true -> Chromeの場合「システム音声を共有」オプションが表示される
localStream = await navigator.mediaDevices.getDisplayMedia({
video: true,
audio: true // ただしブラウザやOSによっては無視される可能性あり
});
video.srcObject = localStream;
// システム音声をモニタリングする場合、ミュートOFFにする
video.muted = false;
console.log('画面共有開始 (システム音声含む可能性)');
} catch (err) {
alert('画面共有を開始できませんでした: ' + err.message);
}
}
// カメラ＆マイク
async function startCameraShare() {
stopMedia();
try {
localStream = await navigator.mediaDevices.getUserMedia({video: true, audio: true});
video.srcObject = localStream;
// 自分のマイク音声がループしないようにしたい場合は video.muted = true;
video.muted = true;
console.log('カメラ＆マイク開始');
} catch (err) {
alert('カメラ/マイクを取得できませんでした: ' + err.message);
}
}
// 停止
function stopMedia() {
if (!localStream) return;
localStream.getTracks().forEach(track => track.stop());
localStream = null;
video.srcObject = null;
console.log('メディア停止');
}
screenShareBtn.addEventListener('click', startScreenShare);
cameraShareBtn.addEventListener('click', startCameraShare);
stopBtn.addEventListener('click', stopMedia);
/*****************************************************************
* 2. 再生/一時停止/ミュート/全画面など動画コントロール
*****************************************************************/
const playBtn = document.getElementById('playBtn');
const pauseBtn = document.getElementById('pauseBtn');
const muteBtn = document.getElementById('muteBtn');
const fullscreenBtn = document.getElementById('fullscreenBtn');
playBtn.addEventListener('click', () => {
video.play();
});
pauseBtn.addEventListener('click', () => {
video.pause();
});
muteBtn.addEventListener('click', () => {
video.muted = !video.muted;
});
fullscreenBtn.addEventListener('click', () => {
if (!document.fullscreenElement) {
video.requestFullscreen().catch(err => {
console.warn('フルスクリーンモードにできません:', err);
});
} else {
document.exitFullscreen();
}
});
/*****************************************************************
* 3. 簡易チャット機能（ローカルのみ）
*****************************************************************/
const chatLog = document.getElementById('chatLog');
const usernameInput = document.getElementById('usernameInput');
const messageInput = document.getElementById('messageInput');
const sendBtn = document.getElementById('sendBtn');
let messages = [];
function renderChatLog() {
chatLog.innerHTML = '';
messages.forEach(msg => {
const p = document.createElement('p');
const userSpan = document.createElement('span');
userSpan.className = 'username';
userSpan.textContent = msg.username + ': ';
const textNode = document.createTextNode(msg.text);
p.appendChild(userSpan);
p.appendChild(textNode);
chatLog.appendChild(p);
});
chatLog.scrollTop = chatLog.scrollHeight;
}
function sendMessage() {
const username = usernameInput.value.trim();
const text = messageInput.value.trim();
if (!username || !text) return;
messages.push({ username, text });
renderChatLog();
messageInput.value = '';
}
sendBtn.addEventListener('click', sendMessage);
messageInput.addEventListener('keydown', e => {
if (e.key === 'Enter') sendMessage();
});
// デモ用メッセージ
(function initDemoChat() {
messages.push(
{ username: 'Alice', text: 'こんにちは！' },
{ username: 'Bob', text: 'システム音声聞こえる？' },
{ username: 'Carol', text: 'タブの音は共有できてます〜' }
);
renderChatLog();
})();
</script>
</body>
</html>
カテゴリー: HTML
ARTBOOK
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ARTBOOK - アートSNS</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #f9fafb;
color: #333;
}
header {
background-color: #4a5568;
color: white;
padding: 1.5rem;
text-align: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
header h1 {
margin: 0;
font-size: 2.5rem;
}
header p {
margin: 0.5rem 0;
font-size: 1.2rem;
}
header nav {
margin-top: 1rem;
}
header nav a {
color: white;
text-decoration: none;
margin: 0 1rem;
font-weight: bold;
font-size: 1.1rem;
padding: 0.5rem 1rem;
border-radius: 5px;
transition: background-color 0.3s;
}
header nav a:hover {
background-color: #2d3748;
}
.container {
max-width: 1200px;
margin: 2rem auto;
padding: 1rem;
}
.form-group {
margin-bottom: 1rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: bold;
}
.form-group input, .form-group textarea {
width: 100%;
padding: 0.8rem;
border: 1px solid #d2d6dc;
border-radius: 6px;
background-color: #f7fafc;
font-size: 1rem;
}
.form-group button {
background-color: #3182ce;
color: white;
border: none;
padding: 0.8rem 1.5rem;
font-size: 1rem;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s;
}
.form-group button:hover {
background-color: #2b6cb0;
}
.profile {
text-align: center;
}
.profile img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 1rem;
}
footer {
text-align: center;
padding: 1.5rem;
background-color: #4a5568;
color: white;
margin-top: 2rem;
}
footer p {
margin: 0;
font-size: 1rem;
}
</style>
</head>
<body>
<header>
<h1>ARTBOOK</h1>
<p>あなたのアートをシェアしよう！</p>
<nav>
<a href="#home" onclick="navigateTo('home')">ホーム</a>
<a href="#gallery" onclick="navigateTo('gallery')">作品一覧</a>
<a href="#post" onclick="navigateTo('post')">投稿する</a>
<a href="#profile" onclick="navigateTo('profile')">プロフィール</a>
</nav>
</header>
<div id="content" class="container">
<!-- コンテンツがここに動的に挿入されます -->
</div>
<footer>
<p>© 2025 ARTBOOK. All Rights Reserved.</p>
</footer>
<script>
let posts = JSON.parse(localStorage.getItem('posts')) || [];
let profile = JSON.parse(localStorage.getItem('profile')) || {
name: "未設定",
bio: "ここに自己紹介が表示されます",
image: "https://via.placeholder.com/150"
};
function navigateTo(section) {
const content = document.getElementById('content');
content.innerHTML = '';
if (section === 'home') {
content.innerHTML = `<h2>ホーム</h2><p>ようこそ、ARTBOOKへ！最新のアート作品をご覧ください。</p>`;
} else if (section === 'gallery') {
content.innerHTML = `<h2>作品一覧</h2><div id='gallery'>${renderPosts()}</div>`;
} else if (section === 'post') {
content.innerHTML = `
<h2>投稿する</h2>
<form id="postForm">
<div class="form-group">
<label for="title">タイトル</label>
<input type="text" id="title" name="title" required>
</div>
<div class="form-group">
<label for="description">説明</label>
<textarea id="description" name="description" rows="4" required></textarea>
</div>
<div class="form-group">
<label for="upload">画像アップロード</label>
<input type="file" id="upload" name="upload" accept="image/*" required>
</div>
<div class="form-group">
<button type="button" onclick="submitPost()">投稿する</button>
</div>
</form>`;
} else if (section === 'profile') {
content.innerHTML = `
<h2>プロフィール</h2>
<div class="profile">
<img src="${profile.image}" alt="プロフィール画像">
<h3>${profile.name}</h3>
<p>${profile.bio}</p>
<form id="profileForm">
<div class="form-group">
<label for="name">名前</label>
<input type="text" id="name" value="${profile.name}" required>
</div>
<div class="form-group">
<label for="bio">自己紹介</label>
<textarea id="bio" rows="4" required>${profile.bio}</textarea>
</div>
<div class="form-group">
<label for="profileImage">プロフィール画像</label>
<input type="file" id="profileImage" accept="image/*">
</div>
<div class="form-group">
<button type="button" onclick="updateProfile()">更新する</button>
</div>
</form>
</div>`;
}
}
function submitPost() {
const title = document.getElementById('title').value;
const description = document.getElementById('description').value;
const upload = document.getElementById('upload').files[0];
if (title && description && upload) {
const reader = new FileReader();
reader.onload = function(event) {
posts.push({ title, description, image: event.target.result });
localStorage.setItem('posts', JSON.stringify(posts));
alert('投稿が完了しました！');
navigateTo('gallery');
};
reader.readAsDataURL(upload);
} else {
alert('すべてのフィールドを入力してください。');
}
}
function updateProfile() {
const name = document.getElementById('name').value;
const bio = document.getElementById('bio').value;
const profileImage = document.getElementById('profileImage').files[0];
if (name && bio) {
if (profileImage) {
const reader = new FileReader();
reader.onload = function(event) {
profile.image = event.target.result;
saveProfile(name, bio);
};
reader.readAsDataURL(profileImage);
} else {
saveProfile(name, bio);
}
} else {
alert('すべてのフィールドを入力してください。');
}
}
function saveProfile(name, bio) {
profile.name = name;
profile.bio = bio;
localStorage.setItem('profile', JSON.stringify(profile));
alert('プロフィールが更新されました！');
navigateTo('profile');
}
function renderPosts() {
if (posts.length === 0) {
return '<p>まだ投稿がありません。</p>';
}
return posts.map(post => `
<div class="art-card">
<img src="${post.image}" alt="${post.title}">
<h2>${post.title}</h2>
<p>${post.description}</p>
</div>`).join('');
}
// 初期表示
navigateTo('home');
</script>
</body>
</html>百科事典サイト
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Encyclopedia</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #2c3e50;
color: white;
padding: 20px;
text-align: center;
}
nav {
display: flex;
justify-content: center;
background-color: #34495e;
padding: 10px;
}
nav a {
color: white;
text-decoration: none;
margin: 0 15px;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
.search-bar {
display: flex;
justify-content: center;
margin: 20px 0;
}
.search-bar input {
width: 60%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
.search-bar button {
padding: 10px 20px;
background-color: #2c3e50;
color: white;
border: none;
border-radius: 5px;
margin-left: 5px;
cursor: pointer;
font-size: 16px;
}
.search-bar button:hover {
background-color: #34495e;
}
.categories, .articles, .about {
margin: 20px;
padding: 20px;
background-color: white;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.categories h2, .articles h2, .about h2 {
margin-bottom: 15px;
font-size: 24px;
}
.categories ul, .articles ul {
list-style: none;
padding: 0;
}
.categories li, .articles li {
margin-bottom: 10px;
}
.categories a, .articles a {
color: #2c3e50;
text-decoration: none;
font-size: 18px;
}
.categories a:hover, .articles a:hover {
text-decoration: underline;
}
.about p {
line-height: 1.6;
font-size: 18px;
color: #333;
}
.featured {
margin: 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.featured-item {
background-color: white;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.featured-item img {
width: 100%;
height: auto;
}
.featured-item h3 {
margin: 15px;
font-size: 20px;
color: #2c3e50;
}
.featured-item p {
margin: 15px;
line-height: 1.5;
color: #666;
}
.featured-item a {
display: block;
text-align: center;
padding: 10px;
margin: 15px;
background-color: #2c3e50;
color: white;
text-decoration: none;
border-radius: 5px;
}
.featured-item a:hover {
background-color: #34495e;
}
footer {
background-color: #2c3e50;
color: white;
text-align: center;
padding: 10px 0;
margin-top: 20px;
}
</style>
</head>
<body>
<header>
<h1>Welcome to the Encyclopedia</h1>
<p>Your go-to source for comprehensive knowledge</p>
</header>
<nav>
<a href="#">Home</a>
<a href="#categories">Categories</a>
<a href="#articles">Popular Articles</a>
<a href="#about">About</a>
</nav>
<div class="search-bar">
<input type="text" placeholder="Search articles...">
<button>Search</button>
</div>
<section id="categories" class="categories">
<h2>Categories</h2>
<ul>
<li><a href="#">Science</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Geography</a></li>
<li><a href="#">Culture</a></li>
</ul>
</section>
<section id="articles" class="articles">
<h2>Featured Articles</h2>
<ul>
<li><a href="#">The Wonders of Space Exploration</a></li>
<li><a href="#">The Rise and Fall of Ancient Civilizations</a></li>
<li><a href="#">Understanding Quantum Mechanics</a></li>
<li><a href="#">The Impact of AI on Modern Society</a></li>
<li><a href="#">World's Most Breathtaking Landscapes</a></li>
</ul>
</section>
<section class="featured">
<div class="featured-item">
<img src="https://via.placeholder.com/300" alt="Space Exploration">
<h3>The Wonders of Space Exploration</h3>
<p>Discover the mysteries of the universe and the advances in space technology that bring us closer to the stars.</p>
<a href="#">Read More</a>
</div>
<div class="featured-item">
<img src="https://via.placeholder.com/300" alt="Ancient Civilizations">
<h3>The Rise and Fall of Ancient Civilizations</h3>
<p>Explore the history of ancient empires and their lasting impact on the modern world.</p>
<a href="#">Read More</a>
</div>
<div class="featured-item">
<img src="https://via.placeholder.com/300" alt="Quantum Mechanics">
<h3>Understanding Quantum Mechanics</h3>
<p>Dive into the complex and fascinating world of quantum physics and its real-world applications.</p>
<a href="#">Read More</a>
</div>
</section>
<section id="about" class="about">
<h2>About This Encyclopedia</h2>
<p>This online encyclopedia is dedicated to providing reliable and well-researched information on a wide range of topics. From science and technology to history and culture, we aim to empower curious minds with knowledge.</p>
<p>Our content is curated by experts and enthusiasts from around the world, ensuring a comprehensive and engaging learning experience for all users.</p>
</section>
<footer>
<p>© 2025 Encyclopedia. All rights reserved.</p>
</footer>
</body>
</html>
MyCarousel
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 Carousel</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="carousel">
<div class="container">
<ul>
<li><img src="img/pic1.png"></li>
<li><img src="img/pic2.png"></li>
<li><img src="img/pic3.png"></li>
<li><img src="img/pic4.png"></li>
</ul>
<button id="prev">«</button>
<button id="next">»</button>
</div>
<nav>
</nav>
</section>
<script src="js/main.js"></script>
</body>
</html>js/main.js
'use strict';
{
const next = document.getElementById('next');
const prev = document.getElementById('prev');
const ul = document.querySelector('ul');
const slides = ul.children;
const dots = [];
let currentIndex = 0;
function updateButtons() {
prev.classList.remove('hidden');
next.classList.remove('hidden');
if (currentIndex === 0) {
prev.classList.add('hidden');
}
if (currentIndex === slides.length - 1) {
next.classList.add('hidden');
}
}
function moveSlides() {
const slideWidth = slides[0].getBoundingClientRect().width;
ul.style.transform = `translateX(${-1 * slideWidth * currentIndex}px)`;
}
function setupDots() {
for (let i = 0; i < slides.length; i++) {
const button = document.createElement('button');
button.addEventListener('click', () => {
currentIndex = i;
updateDots();
updateButtons();
moveSlides();
});
dots.push(button);
document.querySelector('nav').appendChild(button);
}
dots[0].classList.add('current');
}
function updateDots() {
dots.forEach(dot => {
dot.classList.remove('current');
});
dots[currentIndex].classList.add('current');
}
updateButtons();
setupDots();
next.addEventListener('click', () => {
currentIndex++;
updateButtons();
updateDots();
moveSlides();
});
prev.addEventListener('click', () => {
currentIndex--;
updateButtons();
updateDots();
moveSlides();
});
window.addEventListener('resize', () => {
moveSlides();
});
}css/style.css
.carousel {
width: 80%;
margin: 16px auto;
}
.container {
width: 100%;
height: 220px;
overflow: hidden;
position: relative;
}
ul {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
display: flex;
transition: transform .3s;
}
li {
height: 100%;
min-width: 100%;
}
li img {
width: 100%;
height: 100%;
object-fit: cover;
}
#prev,
#next {
position: absolute;
top: 50%;
transform: translateY(-50%);
border: none;
background: rgba(0, 0, 0, .8);
color: #fff;
font-size: 24px;
padding: 0 8px 4px;
cursor: pointer;
}
#prev:hover,
#next:hover {
opacity: .8;
}
#prev {
left: 0;
}
#next {
right: 0;
}
.hidden {
display: none;
}
nav {
margin-top: 16px;
text-align: center;
}
nav button+button {
margin-left: 8px;
}
nav button {
border: none;
width: 16px;
height: 16px;
background: #ddd;
border-radius: 50%;
cursor: pointer;
}
nav .current {
background: #999;
}アプリストア.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: 'Roboto', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #f9f9f9;
color: #333;
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
/* ヘッダー */
header {
background-color: #0066cc;
color: white;
padding: 1rem 0;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
header .container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
header h1 a {
color: white;
font-size: 1.5rem;
font-weight: bold;
}
header nav ul {
display: flex;
gap: 1rem;
}
header nav a {
color: white;
font-size: 1rem;
font-weight: 500;
transition: color 0.3s;
}
header nav a:hover {
color: #ffcc00;
}
/* ヒーローセクション */
.hero {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('hero-image.jpg') no-repeat center center/cover;
color: white;
text-align: center;
padding: 6rem 1rem;
}
.hero h2 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.hero p {
font-size: 1.5rem;
margin-bottom: 2rem;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
.hero .btn-primary {
background-color: #ffcc00;
color: #333;
padding: 1rem 2rem;
border-radius: 5px;
font-weight: bold;
font-size: 1.25rem;
transition: background-color 0.3s, transform 0.3s;
}
.hero .btn-primary:hover {
background-color: #e6b800;
transform: scale(1.05);
}
/* カテゴリセクション */
.categories {
background-color: #f1f1f1;
padding: 3rem 1rem;
text-align: center;
}
.categories h2 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
}
.categories .category-list {
display: flex;
justify-content: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.categories .category-list a {
background-color: #0066cc;
color: white;
padding: 0.75rem 1.5rem;
border-radius: 5px;
font-size: 1.25rem;
font-weight: bold;
transition: background-color 0.3s, transform 0.3s;
}
.categories .category-list a:hover {
background-color: #004d99;
transform: scale(1.1);
}
/* アプリ一覧 */
.app-list {
padding: 3rem 1rem;
background-color: white;
}
.app-list h2 {
text-align: center;
font-size: 2.5rem;
margin-bottom: 2rem;
}
.apps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.app-card {
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
transition: box-shadow 0.3s, transform 0.3s;
}
.app-card:hover {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transform: translateY(-5px);
}
.app-card img {
width: 100%;
height: 200px;
object-fit: cover;
}
.app-card h3 {
font-size: 1.5rem;
margin: 1rem;
}
.app-card p {
margin: 0 1rem 1.5rem;
font-size: 1.125rem;
}
.app-card .btn-secondary {
display: block;
text-align: center;
margin: 0 1rem 1.5rem;
padding: 0.75rem;
background-color: #0066cc;
color: white;
font-size: 1rem;
border-radius: 5px;
transition: background-color 0.3s;
}
.app-card .btn-secondary:hover {
background-color: #004d99;
}
/* フッター */
footer {
background-color: #333;
color: white;
padding: 2rem 0;
text-align: center;
font-size: 1rem;
}
footer nav a {
color: #ffcc00;
margin: 0 0.5rem;
transition: color 0.3s;
}
footer nav a:hover {
color: white;
}
</style>
</head>
<body>
<header>
<div class="container">
<h1><a href="#home">アプリストア</a></h1>
<nav>
<ul>
<li><a href="#home">ホーム</a></li>
<li><a href="#categories">カテゴリ</a></li>
<li><a href="#apps">アプリ一覧</a></li>
<li><a href="#about">このサイトについて</a></li>
<li><a href="#contact">お問い合わせ</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section id="home" class="hero">
<div class="hero-content">
<h2>お気に入りのアプリを見つけましょう！</h2>
<p>最新のアプリや便利なツールがここに揃っています。</p>
<a href="#apps" class="btn-primary">アプリを探す</a>
</div>
</section>
<section id="categories" class="categories">
<h2>カテゴリ</h2>
<ul class="category-list">
<li><a href="#games">🎮 ゲーム</a></li>
<li><a href="#productivity">📊 生産性向上</a></li>
<li><a href="#education">📚 教育</a></li>
<li><a href="#entertainment">🎥 エンターテイメント</a></li>
<li><a href="#health">💪 健康・フィットネス</a></li>
<li><a href="#finance">💰 ファイナンス</a></li>
</ul>
</section>
<section id="apps" class="app-list">
<h2>おすすめアプリ</h2>
<div class="apps-grid">
<div class="app-card">
<img src="app1.jpg" alt="アプリ名1">
<h3>アプリ名1</h3>
<p>説明文がここに入ります。最新機能と素晴らしいデザインを備えています。</p>
<a href="#" class="btn-secondary">詳細を見る</a>
</div>
<div class="app-card">
<img src="app2.jpg" alt="アプリ名2">
<h3>アプリ名2</h3>
<p>説明文がここに入ります。日常生活を豊かにするツールです。</p>
<a href="#" class="btn-secondary">詳細を見る</a>
</div>
</div>
</section>
</main>
<footer>
<div class="container">
<p>© 2025 アプリストア. 全著作権所有。</p>
<nav>
<a href="#privacy">プライバシーポリシー</a> |
<a href="#terms">利用規約</a> |
<a href="#sitemap">サイトマップ</a>
</nav>
</div>
</footer>
</body>
</html>
MyTabMenu
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Tab Menu</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<ul class="menu">
<li><a href="#" class="active" data-id="about">サイトの概要</a></li>
<li><a href="#" data-id="service">サービス内容</a></li>
<li><a href="#" data-id="contact">お問い合わせ</a></li>
</ul>
<section class="content active" id="about">
サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。
</section>
<section class="content" id="service">
サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。
</section>
<section class="content" id="contact">
お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。
</section>
</div>
<script src="js/main.js"></script>
</body>
</html>css/styles.css
body {
font-size: 14px;
}
.container {
margin: 30px auto;
width: 500px;
}
.menu {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
.menu li a {
display: inline-block;
width: 100px;
text-align: center;
padding: 8px 0;
color: #333;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
.menu li a.active {
background: #333;
color: #fff;
}
.menu li a:not(.active):hover {
opacity: 0.5;
transition: opacity 0.4s;
}
.content.active {
background: #333;
color: #fff;
min-height: 150px;
padding: 12px;
display: block;
}
.content {
display: none;
}js/main.js
'use strict';
{
const menuItems = document.querySelectorAll('.menu li a');
const contents = document.querySelectorAll('.content');
menuItems.forEach(clickedItem => {
clickedItem.addEventListener('click', e => {
e.preventDefault();
menuItems.forEach(item => {
item.classList.remove('active');
});
clickedItem.classList.add('active');
contents.forEach(content => {
content.classList.remove('active');
});
document.getElementById(clickedItem.dataset.id).classList.add('active');
});
});
}MyHamburgerMenu
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>FAQ</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>FAQ</h1>
<dl>
<div>
<dt>質問です</dt>
<dd>回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。</dd>
</div>
<div>
<dt>質問です</dt>
<dd>回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。</dd>
</div>
<div>
<dt>質問です</dt>
<dd>回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。</dd>
</div>
</dl>
<script src="js/main.js"></script>
</body>
</html>style.css
h1 {
font-size: 18px;
border-bottom: 1px solid;
padding: 8px 16px;
margin-bottom: 16px;
}
dl {
margin: 0;
}
dl>div {
margin-bottom: 8px;
}
dt {
padding: 8px;
cursor: pointer;
user-select: none;
position: relative;
}
dt::before {
content: 'Q. ';
}
dt::after {
content: '+';
position: absolute;
top: 8px;
right: 16px;
transition: transform .3s;
}
dl>div.appear dt::after {
transform: rotate(45deg);
}
dd {
padding: 8px;
margin: 0;
display: none;
}
dd::before {
content: 'A .';
}
dl>div.appear dd {
display: block;
animation: .3s fadeIn;
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(-10px);
}
100% {
opacity: 1;
transform: none;
}
}main.js
'use strict';
{
const dts = document.querySelectorAll('dt');
dts.forEach(dt => {
dt.addEventListener('click', () => {
dt.parentNode.classList.toggle('appear');
});
});
}文章生成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 {
margin: 0;
font-family: 'Helvetica Neue', Arial, sans-serif;
background: #f5f5f5;
color: #333;
}
header, footer {
background: #222;
color: #fff;
padding: 1.5em;
text-align: center;
}
header h1 {
margin: 0;
font-weight: normal;
}
main {
max-width: 1000px;
margin: 2em auto;
background: #fff;
border-radius: 8px;
padding: 2em;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h2 {
margin-top: 0;
}
.intro-text {
font-size: 0.95em;
line-height: 1.6;
margin-bottom: 2em;
color: #555;
}
.form-group {
margin-bottom: 1.5em;
}
label {
display: block;
margin-bottom: 0.5em;
font-weight: bold;
}
textarea {
width: 100%;
height: 150px;
box-sizing: border-box;
padding: 1em;
font-size: 1em;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
select, input[type=range] {
width: 100%;
box-sizing: border-box;
padding: 0.5em;
font-size: 1em;
margin-top: 0.5em;
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
}
.range-value {
text-align: right;
font-size: 0.9em;
color: #666;
}
button {
background: #007bff;
color: #fff;
border: none;
padding: 0.75em 1.5em;
font-size: 1em;
border-radius: 4px;
cursor: pointer;
display: inline-block;
}
button:hover {
background: #0056b3;
}
.output-section {
margin-top: 2em;
}
#output-area {
border: 1px solid #ccc;
min-height: 150px;
padding: 1em;
border-radius: 4px;
background: #fafafa;
white-space: pre-wrap;
}
/* ローディングアニメーション */
.loading-overlay {
display: none;
position: fixed;
top:0; left:0; right:0; bottom:0;
background: rgba(0,0,0,0.3);
z-index: 9999;
justify-content: center;
align-items: center;
}
.loading-container {
background: #fff;
padding: 2em;
border-radius: 8px;
text-align: center;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
.loading-spinner {
margin: 0 auto 1em;
width: 50px;
height: 50px;
border: 6px solid #eee;
border-top-color: #007bff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
.error-message {
color: #d00;
font-weight: bold;
margin-top: 1em;
}
footer p {
margin: 0;
font-size: 0.9em;
}
/* レスポンシブ対応 */
@media (max-width: 600px) {
main {
margin: 1em;
padding: 1em;
}
}
</style>
</head>
<body>
<header>
<h1>文章生成AIデモ（擬似）</h1>
</header>
<main>
<div class="intro-text">
<p>このデモは擬似的な文章生成を行います。入力されたプロンプト、モデル選択、Temperatureに基づいてあたかもAIが文章を生成したかのような結果を返します。</p>
<p>実際のAIモデルはこのページ単体では動作しておらず、<b>キーワードに応じた例示的なテキスト</b>を返すだけです。後にサーバーサイドでバックエンドを用意すれば、本物のAI生成が可能になります。</p>
<p>試しに、以下のようなキーワードを含めてみてください：<br>
・「猫」：猫に関する創作文章<br>
・「エネルギー問題」：環境やエネルギーについての説明文<br>
・「小説の冒頭」：文学的な書き出し<br>
・「ビジネス戦略」：ビジネス、マーケティングに関連するテキスト
</p>
</div>
<section class="input-section">
<h2>プロンプト入力</h2>
<div class="form-group">
<label for="prompt-input">プロンプト (アイデアやキーワード等)</label>
<textarea id="prompt-input" placeholder="ここに文章生成のためのヒントとなるプロンプトを入力してください"></textarea>
</div>
<div class="form-group">
<label for="model-select">モデル選択</label>
<select id="model-select">
<option value="model-1">model-1 (標準モデル)</option>
<option value="model-2">model-2 (創造性強化モデル)</option>
<option value="model-3">model-3 (高精度モデル)</option>
</select>
</div>
<div class="form-group">
<label>創造性（Temperature）</label>
<div class="range-value">値: <span id="temperature-value">0.7</span></div>
<input type="range" id="temperature-range" min="0" max="1" step="0.1" value="0.7">
</div>
<div class="form-group" style="text-align: right;">
<button id="generate-btn">生成</button>
</div>
</section>
<section class="output-section">
<h2>生成結果</h2>
<div id="output-area"></div>
</section>
<div class="error-message" id="error-message" style="display:none;"></div>
</main>
<div class="loading-overlay" id="loading-overlay">
<div class="loading-container">
<div class="loading-spinner"></div>
<p>文章生成中です。しばらくお待ちください...</p>
</div>
</div>
<footer>
<p>© 2024 AI Text Generation Demo (Mocked)</p>
</footer>
<script>
const promptInput = document.getElementById('prompt-input');
const modelSelect = document.getElementById('model-select');
const temperatureRange = document.getElementById('temperature-range');
const temperatureValue = document.getElementById('temperature-value');
const generateBtn = document.getElementById('generate-btn');
const outputArea = document.getElementById('output-area');
const errorMessage = document.getElementById('error-message');
const loadingOverlay = document.getElementById('loading-overlay');
temperatureRange.addEventListener('input', () => {
temperatureValue.textContent = temperatureRange.value;
});
// キーワードに応じて返す擬似的な生成テキストを用意
function getMockResponse(prompt, model, temperature) {
// 全角・半角を区別しないために小文字で判定
const lowerPrompt = prompt.toLowerCase();
let baseText = "【擬似的なAI生成結果】\n";
baseText += "プロンプト: \"" + prompt + "\"\n";
baseText += "モデル: " + model + "\n";
baseText += "Temperature: " + temperature + "\n\n";
if (lowerPrompt.includes("猫")) {
baseText += "ふわふわした毛皮に包まれた小さな猫は、朝日が差し込む窓辺で静かに丸くなっている。その瞳は琥珀色に輝き、しなやかな尾は優雅な曲線を描く。\n" +
"この猫は人間に対して警戒心を持ちながらも、一度心を開いた相手には無限の甘えを見せる。";
} else if (lowerPrompt.includes("エネルギー問題") || lowerPrompt.includes("環境")) {
baseText += "世界的なエネルギー問題は、化石燃料の枯渇と気候変動への懸念を背景に深刻化している。再生可能エネルギーの導入は、ただ単に環境負荷を低減するだけでなく、地域経済の活性化や新たな技術開発の契機となる。\n" +
"太陽光や風力エネルギーなどのクリーンな資源を活用することで、持続可能な未来を築くことが可能だ。";
} else if (lowerPrompt.includes("小説の冒頭") || lowerPrompt.includes("物語の始まり")) {
baseText += "薄暗い路地裏に、一人の少年が立っていた。その少年の瞳には、不思議な光が宿っている。遠くで犬が吠える音、古い街灯が淡い橙色の光を投げかける。\n" +
"少年は一枚の古めかしい地図を握りしめ、見知らぬ世界への第一歩を踏み出そうとしていた。";
} else if (lowerPrompt.includes("ビジネス戦略") || lowerPrompt.includes("マーケティング")) {
baseText += "成功するビジネス戦略は、顧客ニーズの正確な把握から始まる。市場調査をもとに、ターゲット層に響く価値提案を明確化し、差別化された製品・サービスを提供することが重要だ。\n" +
"さらに、マーケティング戦略を通じてブランド認知度を高め、持続的な成長のために柔軟な計画修正とPDCAサイクルを回し続ける必要がある。";
} else {
// 特定のキーワードがない場合は、汎用的な擬似生成テキストを返す
baseText += "あなたのプロンプトに基づくテキストを生成します。\n" +
"このテキストはあくまでサンプルであり、実際のAIモデルによる生成結果を模したものです。\n\n" +
"ここに様々なアイディア、説明、物語、または議論が展開されることでしょう。\n" +
"モデルやTemperatureを変更することで、文体やアイデアの広がり、独創性のレベルが変化すると考えられます。";
}
return baseText;
}
generateBtn.addEventListener('click', async () => {
const prompt = promptInput.value.trim();
const model = modelSelect.value;
const temperature = parseFloat(temperatureRange.value);
if (!prompt) {
alert("プロンプトを入力してください。");
return;
}
// 前回の結果やエラーメッセージをクリア
outputArea.textContent = '';
errorMessage.style.display = 'none';
errorMessage.textContent = '';
// ローディング表示
loadingOverlay.style.display = 'flex';
try {
// 実際のfetchを行わず、擬似生成結果を生成
const generatedText = getMockResponse(prompt, model, temperature);
// 模擬的に処理時間を設ける（待ち時間を演出）
await new Promise(resolve => setTimeout(resolve, 1000));
outputArea.textContent = generatedText;
} catch (err) {
console.error(err);
errorMessage.textContent = "エラーが発生しました。詳細はコンソールをご確認ください。";
errorMessage.style.display = 'block';
} finally {
// ローディング非表示
loadingOverlay.style.display = 'none';
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>文章生成AIデモ（擬似生成強化版）</title>
<style>
body {
margin: 0;
font-family: 'Helvetica Neue', Arial, sans-serif;
background: #f5f5f5;
color: #333;
}
header, footer {
background: #222;
color: #fff;
padding: 1.5em;
text-align: center;
}
header h1 {
margin: 0;
font-weight: normal;
}
main {
max-width: 1000px;
margin: 2em auto;
background: #fff;
border-radius: 8px;
padding: 2em;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h2 {
margin-top: 0;
}
.intro-text {
font-size: 0.95em;
line-height: 1.6;
margin-bottom: 2em;
color: #555;
}
.form-group {
margin-bottom: 1.5em;
}
label {
display: block;
margin-bottom: 0.5em;
font-weight: bold;
}
textarea {
width: 100%;
height: 150px;
box-sizing: border-box;
padding: 1em;
font-size: 1em;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
select, input[type=range] {
width: 100%;
box-sizing: border-box;
padding: 0.5em;
font-size: 1em;
margin-top: 0.5em;
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
}
.range-value {
text-align: right;
font-size: 0.9em;
color: #666;
}
button {
background: #007bff;
color: #fff;
border: none;
padding: 0.75em 1.5em;
font-size: 1em;
border-radius: 4px;
cursor: pointer;
display: inline-block;
}
button:hover {
background: #0056b3;
}
.output-section {
margin-top: 2em;
}
#output-area {
border: 1px solid #ccc;
min-height: 150px;
padding: 1em;
border-radius: 4px;
background: #fafafa;
white-space: pre-wrap;
}
/* ローディングアニメーション */
.loading-overlay {
display: none;
position: fixed;
top:0; left:0; right:0; bottom:0;
background: rgba(0,0,0,0.3);
z-index: 9999;
justify-content: center;
align-items: center;
}
.loading-container {
background: #fff;
padding: 2em;
border-radius: 8px;
text-align: center;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
.loading-spinner {
margin: 0 auto 1em;
width: 50px;
height: 50px;
border: 6px solid #eee;
border-top-color: #007bff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
.error-message {
color: #d00;
font-weight: bold;
margin-top: 1em;
}
footer p {
margin: 0;
font-size: 0.9em;
}
/* レスポンシブ対応 */
@media (max-width: 600px) {
main {
margin: 1em;
padding: 1em;
}
}
</style>
</head>
<body>
<header>
<h1>文章生成AIデモ（擬似）</h1>
</header>
<main>
<div class="intro-text">
<p>このデモは擬似的な文章生成を行います。入力されたプロンプト、モデル選択、Temperatureに基づいてあたかもAIが文章を生成したかのような結果を返します。</p>
<p>実際のAIモデルはこのページ単体では動作しておらず、<b>キーワードに応じた例示的なテキスト</b>を返すだけです。後にサーバーサイドでバックエンドを用意すれば、本物のAI生成が可能になります。</p>
<p>試しに、以下のようなキーワードを含めてみてください：<br>
・「猫」：猫に関する創作文章<br>
・「エネルギー問題」：環境やエネルギーについての説明文<br>
・「小説の冒頭」：文学的な書き出し<br>
・「ビジネス戦略」：ビジネス、マーケティングに関連するテキスト
</p>
</div>
<section class="input-section">
<h2>プロンプト入力</h2>
<div class="form-group">
<label for="prompt-input">プロンプト (アイデアやキーワード等)</label>
<textarea id="prompt-input" placeholder="ここに文章生成のためのヒントとなるプロンプトを入力してください"></textarea>
</div>
<div class="form-group">
<label for="model-select">モデル選択</label>
<select id="model-select">
<option value="model-1">model-1 (標準モデル)</option>
<option value="model-2">model-2 (創造性強化モデル)</option>
<option value="model-3">model-3 (高精度モデル)</option>
</select>
</div>
<div class="form-group">
<label>創造性（Temperature）</label>
<div class="range-value">値: <span id="temperature-value">0.7</span></div>
<input type="range" id="temperature-range" min="0" max="1" step="0.1" value="0.7">
</div>
<div class="form-group" style="text-align: right;">
<button id="generate-btn">生成</button>
</div>
</section>
<section class="output-section">
<h2>生成結果</h2>
<div id="output-area"></div>
</section>
<div class="error-message" id="error-message" style="display:none;"></div>
</main>
<div class="loading-overlay" id="loading-overlay">
<div class="loading-container">
<div class="loading-spinner"></div>
<p>文章生成中です。しばらくお待ちください...</p>
</div>
</div>
<footer>
<p>© 2024 AI Text Generation Demo (Mocked)</p>
</footer>
<script>
const promptInput = document.getElementById('prompt-input');
const modelSelect = document.getElementById('model-select');
const temperatureRange = document.getElementById('temperature-range');
const temperatureValue = document.getElementById('temperature-value');
const generateBtn = document.getElementById('generate-btn');
const outputArea = document.getElementById('output-area');
const errorMessage = document.getElementById('error-message');
const loadingOverlay = document.getElementById('loading-overlay');
temperatureRange.addEventListener('input', () => {
temperatureValue.textContent = temperatureRange.value;
});
// キーワードに応じて返す擬似的な生成テキストを用意
function getMockResponse(prompt, model, temperature) {
// 全角・半角を区別しないために小文字で判定
const lowerPrompt = prompt.toLowerCase();
let baseText = "【擬似的なAI生成結果】\n";
baseText += "プロンプト: \"" + prompt + "\"\n";
baseText += "モデル: " + model + "\n";
baseText += "Temperature: " + temperature + "\n\n";
if (lowerPrompt.includes("猫")) {
baseText += "ふわふわした毛皮に包まれた小さな猫は、朝日が差し込む窓辺で静かに丸くなっている。その瞳は琥珀色に輝き、しなやかな尾は優雅な曲線を描く。\n" +
"この猫は人間に対して警戒心を持ちながらも、一度心を開いた相手には無限の甘えを見せる。";
} else if (lowerPrompt.includes("エネルギー問題") || lowerPrompt.includes("環境")) {
baseText += "世界的なエネルギー問題は、化石燃料の枯渇と気候変動への懸念を背景に深刻化している。再生可能エネルギーの導入は、ただ単に環境負荷を低減するだけでなく、地域経済の活性化や新たな技術開発の契機となる。\n" +
"太陽光や風力エネルギーなどのクリーンな資源を活用することで、持続可能な未来を築くことが可能だ。";
} else if (lowerPrompt.includes("小説の冒頭") || lowerPrompt.includes("物語の始まり")) {
baseText += "薄暗い路地裏に、一人の少年が立っていた。その少年の瞳には、不思議な光が宿っている。遠くで犬が吠える音、古い街灯が淡い橙色の光を投げかける。\n" +
"少年は一枚の古めかしい地図を握りしめ、見知らぬ世界への第一歩を踏み出そうとしていた。";
} else if (lowerPrompt.includes("ビジネス戦略") || lowerPrompt.includes("マーケティング")) {
baseText += "成功するビジネス戦略は、顧客ニーズの正確な把握から始まる。市場調査をもとに、ターゲット層に響く価値提案を明確化し、差別化された製品・サービスを提供することが重要だ。\n" +
"さらに、マーケティング戦略を通じてブランド認知度を高め、持続的な成長のために柔軟な計画修正とPDCAサイクルを回し続ける必要がある。";
} else {
// 特定のキーワードがない場合は、汎用的な擬似生成テキストを返す
baseText += "あなたのプロンプトに基づくテキストを生成します。\n" +
"このテキストはあくまでサンプルであり、実際のAIモデルによる生成結果を模したものです。\n\n" +
"ここに様々なアイディア、説明、物語、または議論が展開されることでしょう。\n" +
"モデルやTemperatureを変更することで、文体やアイデアの広がり、独創性のレベルが変化すると考えられます。";
}
return baseText;
}
generateBtn.addEventListener('click', async () => {
const prompt = promptInput.value.trim();
const model = modelSelect.value;
const temperature = parseFloat(temperatureRange.value);
if (!prompt) {
alert("プロンプトを入力してください。");
return;
}
// 前回の結果やエラーメッセージをクリア
outputArea.textContent = '';
errorMessage.style.display = 'none';
errorMessage.textContent = '';
// ローディング表示
loadingOverlay.style.display = 'flex';
try {
// 実際のfetchを行わず、擬似生成結果を生成
const generatedText = getMockResponse(prompt, model, temperature);
// 模擬的に処理時間を設ける（待ち時間を演出）
await new Promise(resolve => setTimeout(resolve, 1000));
outputArea.textContent = generatedText;
} catch (err) {
console.error(err);
errorMessage.textContent = "エラーが発生しました。詳細はコンソールをご確認ください。";
errorMessage.style.display = 'block';
} finally {
// ローディング非表示
loadingOverlay.style.display = 'none';
}
});
</script>
</body>
</html>
高度なコード比較サイト
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高度なコード比較サイト</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
width: 90%;
max-width: 900px;
margin: 20px auto;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
border-radius: 5px;
}
h1 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
.code-input {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
gap: 10px;
}
textarea {
width: 48%;
height: 300px;
font-family: monospace;
font-size: 14px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
resize: none;
background-color: #f9f9f9;
}
.buttons {
display: flex;
justify-content: center;
gap: 10px;
}
button {
padding: 10px 20px;
background: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background: #0056b3;
}
#result {
white-space: pre-wrap;
font-family: monospace;
background-color: #f8f9fa;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
max-height: 300px;
overflow-y: auto;
}
.highlight {
background-color: #ffcccc;
font-weight: bold;
color: #d9534f;
}
.line {
border-left: 4px solid #ccc;
padding-left: 10px;
margin: 5px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>高度なコード比較ツール</h1>
<div class="code-input">
<textarea id="code1" placeholder="コード1を入力..."></textarea>
<textarea id="code2" placeholder="コード2を入力..."></textarea>
</div>
<div class="buttons">
<button onclick="compareCodes()">比較する</button>
<button onclick="clearFields()">クリア</button>
</div>
<h3>比較結果</h3>
<div id="result">
<!-- 結果表示エリア -->
</div>
</div>
<script>
function compareCodes() {
const code1 = document.getElementById('code1').value.split('\n');
const code2 = document.getElementById('code2').value.split('\n');
const resultContainer = document.getElementById('result');
resultContainer.innerHTML = '';
const maxLength = Math.max(code1.length, code2.length);
for (let i = 0; i < maxLength; i++) {
const line1 = code1[i] || '';
const line2 = code2[i] || '';
const lineClass = line1 !== line2 ? 'highlight' : '';
resultContainer.innerHTML += `
<div class="line">
<strong>行 ${i + 1}:</strong>
<span class="${lineClass}">コード1: "${line1}"</span> |
<span class="${lineClass}">コード2: "${line2}"</span>
</div>`;
}
if (!resultContainer.innerHTML.trim()) {
resultContainer.innerHTML = '<div>コードに違いはありません。</div>';
}
}
function clearFields() {
document.getElementById('code1').value = '';
document.getElementById('code2').value = '';
document.getElementById('result').innerHTML = '';
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高度なコード比較サイト</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
width: 90%;
max-width: 900px;
margin: 20px auto;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
border-radius: 5px;
}
h1 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
.code-input {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
gap: 10px;
}
textarea {
width: 48%;
height: 300px;
font-family: monospace;
font-size: 14px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
resize: none;
background-color: #f9f9f9;
}
.buttons {
display: flex;
justify-content: center;
gap: 10px;
}
button {
padding: 10px 20px;
background: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background: #0056b3;
}
#result {
white-space: pre-wrap;
font-family: monospace;
background-color: #f8f9fa;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
max-height: 300px;
overflow-y: auto;
}
.highlight {
background-color: #ffcccc;
font-weight: bold;
color: #d9534f;
}
.line {
border-left: 4px solid #ccc;
padding-left: 10px;
margin: 5px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>高度なコード比較ツール</h1>
<div class="code-input">
<textarea id="code1" placeholder="コード1を入力..."></textarea>
<textarea id="code2" placeholder="コード2を入力..."></textarea>
</div>
<div class="buttons">
<button onclick="compareCodes()">比較する</button>
<button onclick="clearFields()">クリア</button>
</div>
<h3>比較結果</h3>
<div id="result">
<!-- 結果表示エリア -->
</div>
</div>
<script>
function compareCodes() {
const code1 = document.getElementById('code1').value.split('\n');
const code2 = document.getElementById('code2').value.split('\n');
const resultContainer = document.getElementById('result');
resultContainer.innerHTML = '';
const maxLength = Math.max(code1.length, code2.length);
for (let i = 0; i < maxLength; i++) {
const line1 = code1[i] || '';
const line2 = code2[i] || '';
const lineClass = line1 !== line2 ? 'highlight' : '';
resultContainer.innerHTML += `
<div class="line">
<strong>行 ${i + 1}:</strong>
<span class="${lineClass}">コード1: "${line1}"</span> |
<span class="${lineClass}">コード2: "${line2}"</span>
</div>`;
}
if (!resultContainer.innerHTML.trim()) {
resultContainer.innerHTML = '<div>コードに違いはありません。</div>';
}
}
function clearFields() {
document.getElementById('code1').value = '';
document.getElementById('code2').value = '';
document.getElementById('result').innerHTML = '';
}
</script>
</body>
</html>Amazon風ECサイト
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Amazon風ECサイト</title>
<style>
/* === 全体のリセットと基本スタイル === */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
color: #333;
}
img {
max-width: 100%;
height: auto;
}
button {
cursor: pointer;
border: none;
padding: 10px 15px;
border-radius: 5px;
}
a {
text-decoration: none;
color: inherit;
}
/* === ヘッダー部分 === */
header {
background-color: #232f3e;
color: white;
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
header .logo {
font-size: 24px;
font-weight: bold;
}
header .search-bar {
flex: 1;
margin: 0 20px;
display: flex;
}
header .search-bar input {
width: 100%;
padding: 8px;
font-size: 16px;
border-radius: 4px 0 0 4px;
border: none;
}
header .search-bar button {
background-color: #ff9900;
color: white;
font-size: 16px;
border-radius: 0 4px 4px 0;
}
header .user-actions {
display: flex;
align-items: center;
gap: 15px;
}
header .user-actions a {
color: white;
font-size: 16px;
}
header .cart-icon {
position: relative;
}
header .cart-count {
position: absolute;
top: -5px;
right: -10px;
background-color: red;
color: white;
font-size: 12px;
border-radius: 50%;
padding: 4px 7px;
}
/* === ナビゲーションバー === */
nav {
background-color: #37475a;
padding: 10px 20px;
display: flex;
justify-content: space-around;
}
nav a {
color: white;
font-size: 16px;
}
/* === バナーセクション === */
.banner {
background-image: url('https://via.placeholder.com/1200x400');
background-size: cover;
background-position: center;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
}
.banner h1 {
font-size: 36px;
margin-bottom: 10px;
}
.banner button {
background-color: #ff9900;
border: none;
color: white;
font-size: 16px;
padding: 10px 20px;
}
/* === 商品セクション === */
.products {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
padding: 20px;
}
.product {
width: 23%;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 15px;
text-align: center;
}
.product img {
height: 150px;
object-fit: cover;
border-radius: 8px;
}
.product h3 {
font-size: 18px;
margin: 10px 0;
}
.product .price {
font-size: 16px;
color: #ff9900;
margin-bottom: 10px;
}
.product button {
background-color: #ff9900;
color: white;
font-size: 14px;
}
.product .favorite {
background-color: #e0e0e0;
color: #333;
font-size: 14px;
margin-top: 10px;
}
/* === カートポップアップ === */
.cart-popup {
position: fixed;
top: 70px;
right: 20px;
background-color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 8px;
width: 300px;
padding: 20px;
display: none;
z-index: 1000;
}
.cart-popup h3 {
margin-bottom: 10px;
font-size: 18px;
}
.cart-popup .cart-item {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.cart-popup .cart-item span {
font-size: 14px;
}
.cart-popup button {
width: 100%;
background-color: #ff9900;
border: none;
color: white;
padding: 10px;
font-size: 16px;
}
/* === レスポンシブ対応 === */
@media (max-width: 768px) {
.product {
width: 48%;
}
header .search-bar {
flex-direction: column;
gap: 10px;
}
}
@media (max-width: 480px) {
.product {
width: 100%;
}
}
</style>
</head>
<body>
<header>
<div class="logo">Amazon風ECサイト</div>
<div class="search-bar">
<input type="text" placeholder="商品を検索">
<button>検索</button>
</div>
<div class="user-actions">
<a href="#">ログイン</a>
<div class="cart-icon" onclick="toggleCartPopup()">
<img src="https://via.placeholder.com/32" alt="カート">
<div class="cart-count">0</div>
</div>
</div>
</header>
<nav>
<a href="#">ホーム</a>
<a href="#">カテゴリ</a>
<a href="#">セール</a>
<a href="#">おすすめ</a>
</nav>
<div class="banner">
<div>
<h1>ビッグセール開催中！</h1>
<button>セールを見る</button>
</div>
</div>
<div class="products">
<div class="product">
<img src="https://via.placeholder.com/200" alt="商品1">
<h3>商品1</h3>
<div class="price">¥3,000</div>
<button onclick="addToCart('商品1', '¥3,000')">カートに追加</button>
<button class="favorite" onclick="addToFavorite('商品1')">お気に入り</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/200" alt="商品2">
<h3>商品2</h3>
<div class="price">¥5,000</div>
<button onclick="addToCart('商品2', '¥5,000')">カートに追加</button>
<button class="favorite" onclick="addToFavorite('商品2')">お気に入り</button>
</div>
</div>
<div class="cart-popup" id="cart-popup">
<h3>カートの中身</h3>
<div id="cart-items"></div>
<button onclick="checkout()">購入手続きへ</button>
</div>
<script>
let cart = [];
let favorites = [];
function addToCart(name, price) {
cart.push({ name, price });
updateCart();
alert(`${name} をカートに追加しました！`);
}
function addToFavorite(name) {
if (!favorites.includes(name)) {
favorites.push(name);
alert(`${name} をお気に入りに追加しました！`);
} else {
alert(`${name} はすでにお気に入りに追加されています！`);
}
}
function updateCart() {
const cartCount = document.querySelector('.cart-count');
const cartItems = document.getElementById('cart-items');
cartCount.textContent = cart.length;
cartItems.innerHTML = '';
cart.forEach(item => {
const div = document.createElement('div');
div.className = 'cart-item';
div.innerHTML = `<span>${item.name}</span><span>${item.price}</span>`;
cartItems.appendChild(div);
});
}
function toggleCartPopup() {
const cartPopup = document.getElementById('cart-popup');
cartPopup.style.display = cartPopup.style.display === 'block' ? 'none' : 'block';
}
function checkout() {
alert('購入手続きを開始します！');
cart = [];
updateCart();
toggleCartPopup();
}
</script>
</body>
</html>