1月, 2025 - 長留裕平のブログ

アプリストア.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>&copy; 2025 アプリストア. 全著作権所有。</p>
            <nav>
                <a href="#privacy">プライバシーポリシー</a> |
                <a href="#terms">利用規約</a> |
                <a href="#sitemap">サイトマップ</a>
            </nav>
        </div>
    </footer>
</body>
</html>

JavaScriptモーダルウィンドウ

index.html

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

<head>
    <meta charset="utf-8">
    <title>Modal Window</title>
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <div id="open">
        詳細を見る
    </div>

    <div id="mask" class="hidden"></div>

    <section id="modal" class="hidden">
        <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
        <div id="close">
            閉じる
        </div>
    </section>

    <script src="js/main.js"></script>
</body>

</html>

css/style.css

body {
    font-size: 14px;
}

#open,
#close {
    cursor: pointer;
    width: 200px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
    padding: 12px 0;
    margin: 16px auto 0;
}

#mask {
    background: rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1;
}

#modal {
    background: #fff;
    width: 300px;
    padding: 20px;
    border-radius: 4px;
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    margin: 0 auto;
    transition: transform 0.4s;
    z-index: 2;
}

#modal>p {
    margin: 0 0 20px;
}

#mask.hidden {
    display: none;
}

#modal.hidden {
    transform: translate(0, -500px);
}

/js/main.js

'use strict';

{
    const open = document.getElementById('open');
    const close = document.getElementById('close');
    const modal = document.getElementById('modal');
    const mask = document.getElementById('mask');

    open.addEventListener('click', () => {
        modal.classList.remove('hidden');
        mask.classList.remove('hidden');
    });

    close.addEventListener('click', () => {
        modal.classList.add('hidden');
        mask.classList.add('hidden');
    });

    mask.addEventListener('click', () => {
        // modal.classList.add('hidden');
        // mask.classList.add('hidden');
        close.click();
    });
}

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');
        });
    });
}

ファイナルファンタジー17 (仮) 企画書

プロジェクト概要

タイトル: ファイナルファンタジーXVII (仮)
ジャンル: オープンワールドRPG
プラットフォーム: PlayStation 5 / Xbox Series X|S / PC
テーマ: 「希望と喪失の調和」
開発期間: 約3～4年
販売目標: 1000万本以上

1. ゲームコンセプト

ファイナルファンタジーシリーズの伝統を継承しながら、新しいプレイ体験を提供。
シリーズ初の完全オープンワールドで、プレイヤーが自由に探索できる世界を構築。
ストーリーとプレイの選択肢がプレイヤーの選択によって変化する「動的ナラティブシステム」を導入。
革新的なリアルタイム戦闘システムとクラシックRPGの要素を融合。

2. ストーリー概要

舞台: 滅びゆく惑星「ルシフェリア」。過去に大いなる文明を築いたが、今では自然と機械の均衡が崩れ、終末が訪れつつある。
主人公:
- 名前: リアム（Liam）
  - 選ばれし「調和者」として、世界の崩壊を止める使命を持つ青年。
- 相棒: アルティナ（Altina）
  - 謎のクリスタル生命体で、過去と未来の記憶を宿している。
敵対勢力:
- 「終焉の王」ゼノリス（Xenolis）
  - 世界の終焉を望む強大な存在。
- 人間の欲望による勢力間の争いも物語の重要なテーマ。
テーマ:
- 人間と自然、機械の共存。
- 喪失を抱えながらも希望を見つける旅。

3. ゲームシステム

3.1. 戦闘システム

リアルタイムアクションバトル:
- プレイヤーが自由に操作できるキャラクター切り替え機能。
- 魔法や召喚獣（エイドロン）が戦闘の戦略に影響。
戦略性:
- 戦闘中に時間を止めて指示を出せる「タイムスローモード」を搭載。
- 魔法のクラフトシステムで、自分だけの魔法を作成可能。

3.2. オープンワールド

多種多様な地形やエリア（雪山、砂漠、機械都市、古代遺跡など）。
サイドクエストでNPCのバックストーリーや世界の謎を解明。
ダイナミックな昼夜サイクルと天候変化。

3.3. キャラクター育成

クリスタルスフィアシステムでスキルと能力を自由にカスタマイズ。
武器や防具のクラフト、召喚獣の進化など多彩な育成要素。

4. ビジュアル・アート

壮大で美麗なグラフィックを採用。
古代の文明と未来的な機械技術が融合したアートスタイル。
映画のようなカメラワークとシネマティックシーン。

5. 音楽

作曲: 植松伸夫氏を中心としたチーム。
テーマソングはオーケストラとボーカルの融合。
各エリアやキャラクターに専用の音楽を用意し、没入感を強化。

6. マーケティングプラン

発表時に印象的なティザートレーラーを公開。
大型イベント（E3やTGS）での体験デモ。
コレクターズエディション、デジタル特典付きパッケージ販売。

7. 開発スケジュール

プリプロダクション: 1年
- コンセプトアート、ゲームデザイン、技術検証。
プロダクション: 2年
- メインストーリー、オープンワールド、戦闘システムの構築。
テストフェーズ: 1年
- デバッグ、バランス調整、ユーザーテスト。
ローンチ: 2028年予定。

8. まとめ

ファイナルファンタジー17は、シリーズの革新と伝統の調和を目指し、世界中のプレイヤーに愛されるタイトルを目標とします。この新たな冒険が、FFファンの記憶に残る伝説となることを約束します。