import java.util.Scanner;
public class Main {
public static void main(String[] args) {
Scanner scanner = new Scanner(System.in);
boolean playAgain = true;
int highScore = 0;
System.out.println("数当てゲームへようこそ!");
while (playAgain) {
int minRange = 1;
int maxRange = 100;
int randomNumber = (int) (Math.random() * (maxRange - minRange + 1)) + minRange;
int attempts = 0;
System.out.println("1から100までの数を当ててください!");
while (true) {
System.out.print("予想した数字を入力してください: ");
if (!scanner.hasNextInt()) {
System.out.println("無効な入力です。数値を入力してください。");
scanner.next(); // 不正な入力をクリア
continue;
}
int guessedNumber = scanner.nextInt();
attempts++;
if (guessedNumber < randomNumber) {
System.out.println("もっと大きい数字です。");
} else if (guessedNumber > randomNumber) {
System.out.println("もっと小さい数字です。");
} else {
System.out.println("おめでとうございます!正解です!");
System.out.println("あなたの試行回数: " + attempts);
if (attempts < highScore || highScore == 0) {
highScore = attempts;
System.out.println("新しいハイスコア!試行回数: " + highScore);
} else {
System.out.println("ハイスコアは" + highScore + "回です。");
}
break;
}
}
System.out.print("もう一度プレイしますか? (y/n): ");
String playChoice = scanner.next();
playAgain = playChoice.equalsIgnoreCase("y");
}
System.out.println("ゲームを終了します。");
System.out.println("最終ハイスコア: " + highScore);
scanner.close();
}
}
ECサイトGamazon
http://tyosuke20xx.com/Gamazon.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gamazon</title>
<style>
body {
font-family: Arial, sans-serif;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background-color: #131921;
color: white;
}
.navbar h1 {
font-size: 1.5rem;
}
.navbar nav ul {
list-style: none;
display: flex;
}
.navbar nav ul li {
padding: 0 10px;
}
.navbar nav ul li a {
text-decoration: none;
color: white;
}
.product {
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
width: 200px;
float: left;
}
.product img {
width: 100%;
height: auto;
}
.featured-products .carousel {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.featured-products .carousel div {
scroll-snap-align: start;
flex: 0 0 90%;
margin-right: 10px;
}
</style>
</head>
<body>
<header>
<div class="navbar">
<h1>My Gmazon Store</h1>
<input type="text" placeholder="商品を検索" id="search-box">
<button onclick="searchProduct()">検索</button>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">商品カテゴリ</a></li>
<li><a href="#">セール</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="featured-products">
<h2>特選商品</h2>
<div class="carousel">
<!-- カルーセル用のJavaScriptで動的に商品を挿入 -->
</div>
</section>
<section class="product-list">
<h2>商品リスト</h2>
<div class="products">
<!-- 商品リスト -->
</div>
</section>
<section class="customer-reviews">
<h2>ユーザーレビュー</h2>
<div class="reviews">
<!-- レビュー -->
</div>
</section>
</main>
<footer>
<p>© 2024 My Gmazon Store. All rights reserved.</p>
</footer>
<script>
function searchProduct() {
const searchInput = document.getElementById('search-box').value;
alert('検索した商品: ' + searchInput);
}
// 他にもカルーセルの動きやユーザーレビューを動的に表示する関数を追加
</script>
</body>
</html>
CSS ブレイクポイント
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Media Queries</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
style.css
@charset "utf-8";
body {
background: pink;
}
/* width >= 600px */
@media (min-width: 600px) {
body {
background: skyblue;
}
}
@media (min-width: 800px) {
body {
background: orange;
}
}
動画共有サイト
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>動画共有サイト</title>
<style>
/* スタイルは省略 */
</style>
</head>
<body>
<header>
<h1>動画共有サイト</h1>
</header>
<main>
<section id="video-container">
<!-- 動画を表示 -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/Qkls4DCX_9I" frameborder="0" allowfullscreen></iframe>
</section>
<section id="comments-container">
<!-- コメントを表示 -->
</section>
<section id="comment-form-container">
<!-- コメントを投稿するフォーム -->
<form id="comment-form">
<textarea id="comment-input" rows="3" placeholder="コメントを入力してください"></textarea>
<button type="submit">コメントを投稿</button>
</form>
</section>
<section id="categories">
<!-- カテゴリ一覧 -->
<h2>カテゴリ</h2>
<ul>
<li><a href="#">音楽</a></li>
<li><a href="#">スポーツ</a></li>
<li><a href="#">ゲーム</a></li>
<li><a href="#">ニュース</a></li>
</ul>
</section>
</main>
<footer>
<!-- お気に入りボタン -->
<button id="favorite-button">お気に入り</button>
<!-- 検索フォーム -->
<input type="text" id="search-input" placeholder="動画を検索">
<button id="search-button">検索</button>
</footer>
<script>
// コメントを追加する関数
function addComment(comment) {
var commentsContainer = document.getElementById('comments-container');
var commentElement = document.createElement('div');
commentElement.textContent = comment;
commentsContainer.appendChild(commentElement);
}
// フォームの送信イベントを処理する
document.getElementById('comment-form').addEventListener('submit', function(event) {
event.preventDefault(); // フォームのデフォルトの動作を停止
var commentInput = document.getElementById('comment-input');
var commentText = commentInput.value.trim(); // 入力されたコメントを取得
if (commentText !== '') {
addComment(commentText); // コメントを追加
commentInput.value = ''; // 入力欄をクリア
}
});
// お気に入りボタンのクリックイベントを処理する
document.getElementById('favorite-button').addEventListener('click', function() {
alert('動画をお気に入りに追加しました!');
});
// 検索ボタンのクリックイベントを処理する
document.getElementById('search-button').addEventListener('click', function() {
var searchInput = document.getElementById('search-input').value.trim();
alert('「' + searchInput + '」で検索しました!');
});
</script>
</body>
</html>
コードギアスR3の企画書
企画書:『コードギアス R3:反逆の遺産』
制作会社:サンライズ
企画意図:
『コードギアス 反逆のルルーシュ』の成功に続き、シリーズの新たな章を展開し、ファンに新しい視点と物語を提供する。
物語の概要:
物語は、『コードギアス 反逆のルルーシュ R2』の終わりから数年後を描く。世界は表向きの平和を享受しているが、新たな力「シャドウギアス」が登場し、再び世界は混乱に陥る。主人公はルルーシュの隠された子孫であり、彼が持つ未知のギアス能力により、新たな戦いに挑む。
登場キャラクター:
主人公:アリアス・ヴィ・ブリタニア – ルルーシュの秘密の血を引く若者。彼には未知のギアス能力が宿る。
ヒロイン:メイ・チャン – 独立運動のリーダーであり、アリアスの最初の同盟者。
アンタゴニスト:シリウス・ゾルディック – シャドウギアスの能力者で、新世界秩序を築こうと企む。
メインテーマ:
権力と抵抗 – 権力の座にある者と、それに抵抗する者との永遠の戦い。
遺産と運命 – ルルーシュの遺産がどのように次世代に影響を与えるか。
秘密と発見 – 主人公の真の起源と彼の力の秘密が明らかになるプロセス。
予定話数: 25話
ターゲットオーディエンス:
既存のファンはもちろん、新しい視聴者も引き付けるために、若者から大人まで幅広く。
プロモーション戦略:
アニメ関連イベントでのプレミア上映会
SNSを活用したティザーキャンペーン
コラボグッズの販売
特別編集版DVDのリリース
Pinterest風サイト
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pintrest風サイト</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
margin: 0 auto;
max-width: 1200px;
}
.card {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
cursor: pointer;
}
.card:hover {
transform: translateY(-5px);
}
.card img {
width: 100%;
display: block;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.card-content {
padding: 15px;
}
.card h2 {
font-size: 18px;
margin: 10px 0;
color: #333;
}
.card p {
font-size: 14px;
color: #666;
margin-top: 0;
}
.modal {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border-radius: 5px;
}
.modal img {
max-width: 100%;
display: block;
margin: 0 auto;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
margin-top: 20px;
}
</style>
</head>
<body>
<header>
<h1>Pintrest風サイト</h1>
</header>
<main>
<div class="container">
<div class="card" onclick="openModal('https://via.placeholder.com/800x600', 'Beautiful Sunset', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.')">
<img src="https://via.placeholder.com/400x250" alt="Image 1">
<div class="card-content">
<h2>Beautiful Sunset</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="card" onclick="openModal('https://via.placeholder.com/800x600', 'Cute Kittens', 'Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.')">
<img src="https://via.placeholder.com/400x300" alt="Image 2">
<div class="card-content">
<h2>Cute Kittens</h2>
<p>Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
</div>
<!-- More cards -->
</div>
</main>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal()">×</span>
<img src="" alt="Modal Image" id="modalImage">
<div id="caption"></div>
</div>
</div>
<footer>
<p>© 2024 Pintrest風サイト</p>
</footer>
<script>
function openModal(imageSrc, title, description) {
document.getElementById("modalImage").src = imageSrc;
document.getElementById("caption").innerHTML = "<h2>" + title + "</h2><p>" + description + "</p>";
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
</script>
</body>
</html>
CSS 画像を左右に振り分ける
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<article>
<img src="forest.png" width="240" height="160">
<div class="text">
<h1>タイトル</h1>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</div>
</article>
<article>
<img src="forest.png" width="240" height="160">
<div class="text">
<h1>タイトル</h1>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</div>
</article>
<article>
<img src="forest.png" width="240" height="160">
<div class="text">
<h1>タイトル</h1>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</div>
</article>
<article>
<img src="forest.png" width="240" height="160">
<div class="text">
<h1>タイトル</h1>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</div>
</article>
</body>
</html>
style.css
@charset "utf-8";
article {
display: flex;
gap: 16px;
align-items: center;
}
article+article {
margin-top: 32px;
}
article:nth-child(even) {
flex-direction: row-reverse;
}
.text {
flex: 1;
}
h1 {
margin: 0;
font-size: 22px;
}
HTMLCSS 画像付きの記事一覧を作る
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<article>
<img src="forest.png" width="240" height="160">
<div class="text">
<h1>タイトル</h1>
<p>こんにちは。こんにちは。</p>
</div>
</article>
</body>
</html>
style.css
@charset "utf-8";
article {
display: flex;
gap: 16px;
}
.text {
background: pink;
flex: 1;
}
Slack風チャットボットサイト
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slack風チャットボット</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.chat-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.chat-window {
width: 400px;
background-color: #f4f4f4;
border: 1px solid #ddd;
border-radius: 5px;
padding: 20px;
}
.chat-messages {
height: 300px;
overflow-y: auto;
border-bottom: 1px solid #ddd;
margin-bottom: 10px;
}
#message-input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
margin-bottom: 10px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="chat-container">
<div class="chat-window">
<div class="chat-messages" id="chat-messages">
<!-- チャットメッセージが表示される部分 -->
</div>
<input type="text" id="message-input" placeholder="メッセージを入力してください...">
<button onclick="sendMessage()">送信</button>
</div>
</div>
<script>
function sendMessage() {
var messageInput = document.getElementById('message-input');
var message = messageInput.value.trim();
if (message !== '') {
var chatMessages = document.getElementById('chat-messages');
var messageElement = document.createElement('div');
messageElement.textContent = message;
chatMessages.appendChild(messageElement);
messageInput.value = '';
// メッセージをバックエンドに送信
fetch('/send_message', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ message: message })
});
}
}
</script>
</body>
</html>
CSS align-self、autoキーワード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
</div>
</body>
</html>
style.css
@charset "utf-8";
.container {
border: 8px solid blue;
display: flex;
height: 240px;
}
.item-1 {
width: 80px;
height: 80px;
background-color: pink;
align-self: center;
}
.item-2 {
width: 80px;
height: 80px;
background-color: skyblue;
margin-left: auto;
}
.item-3 {
width: 80px;
height: 80px;
background-color: orange;
}