-/admin.html at master · YOUTA1004/- · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ポートフォリオ - あなたの名前</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 編集モード切替ボタン -->
    <div class="edit-controls">
        <button id="editToggle" class="edit-btn">✏️ 編集モード</button>
        <button id="saveBtn" class="save-btn" style="display:none;">💾 保存</button>
        <div id="saveMessage" class="save-message"></div>
    </div>

    <!-- ヘッダー -->
    <header>
        <div class="container">
            <h1 class="logo editable" contenteditable="false" data-key="name">あなたの名前</h1>
            <nav>
                <ul>
                    <li><a href="#about">About</a></li>
                    <li><a href="#skills">Skills</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- メインセクション -->
    <section id="hero">
        <div class="container">
            <div class="hero-content">
                <div class="profile-image">
                    <img src="https://via.placeholder.com/200" alt="プロフィール写真" id="profileImg">
                    <div class="image-edit" style="display:none;">
                        <input type="text" id="imageUrl" placeholder="画像URLを入力" class="image-input">
                        <button onclick="updateImage()" class="small-btn">画像を変更</button>
                    </div>
                </div>
                <div class="hero-text">
                    <h2>こんにちは、私は<span class="highlight editable" contenteditable="false" data-key="name2">あなたの名前</span>です</h2>
                    <p class="subtitle editable" contenteditable="false" data-key="title">Web Developer & Designer</p>
                    <p class="description editable" contenteditable="false" data-key="intro">
                        私はWebデザインと開発に情熱を持っています。シンプルで美しく、使いやすいWebサイトを作ることを心がけています。
                        HTML、CSS、JavaScriptを使って、ユーザー体験を重視したWebサイトを制作しています。
                    </p>
                    <a href="#contact" class="btn">お問い合わせ</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Aboutセクション -->
    <section id="about">
        <div class="container">
            <h2 class="section-title">About Me</h2>
            <div class="about-content">
                <p class="editable" contenteditable="false" data-key="about1">
                    私は、ユーザーにとって価値のあるWebサイトを作ることを目指しています。
                    デザインとコードの両方に精通しており、アイデアを形にすることが得意です。
                    常に新しい技術を学び、より良いものを作り続けることをモットーにしています。
                </p>
                <p class="editable" contenteditable="false" data-key="about2">
                    趣味は読書とカメラです。休日は自然の中で写真を撮ることが好きです。
                    また、オープンソースプロジェクトにも貢献しており、コミュニティとの交流を大切にしています。
                </p>
            </div>
        </div>
    </section>

    <!-- スキルセクション -->
    <section id="skills">
        <div class="container">
            <h2 class="section-title">Skills</h2>
            <div class="skills-grid">
                <div class="skill-card">
                    <div class="skill-icon">💻</div>
                    <h3 class="editable" contenteditable="false" data-key="skill1title">HTML & CSS</h3>
                    <p class="editable" contenteditable="false" data-key="skill1desc">セマンティックなHTMLと、レスポンシブなCSSデザインを得意としています。</p>
                </div>
                <div class="skill-card">
                    <div class="skill-icon">⚡</div>
                    <h3 class="editable" contenteditable="false" data-key="skill2title">JavaScript</h3>
                    <p class="editable" contenteditable="false" data-key="skill2desc">モダンなJavaScriptを使って、インタラクティブなWebサイトを作ります。</p>
                </div>
                <div class="skill-card">
                    <div class="skill-icon">🎨</div>
                    <h3 class="editable" contenteditable="false" data-key="skill3title">UI/UX Design</h3>
                    <p class="editable" contenteditable="false" data-key="skill3desc">ユーザー体験を重視した、直感的なデザインを心がけています。</p>
                </div>
                <div class="skill-card">
                    <div class="skill-icon">🚀</div>
                    <h3 class="editable" contenteditable="false" data-key="skill4title">Web Performance</h3>
                    <p class="editable" contenteditable="false" data-key="skill4desc">高速で軽量なWebサイトを作ることにこだわっています。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- コンタクトセクション -->
    <section id="contact">
        <div class="container">
            <h2 class="section-title">Contact</h2>
            <div class="contact-content">
                <p class="editable" contenteditable="false" data-key="contactintro">お仕事のご依頼やご相談は、以下の方法でお気軽にお問い合わせください。</p>
                <div class="contact-info">
                    <div class="contact-item">
                        <span class="contact-icon">📧</span>
                        <a href="mailto:your.email@example.com" class="editable" contenteditable="false" data-key="email">your.email@example.com</a>
                    </div>
                    <div class="contact-item">
                        <span class="contact-icon">🐦</span>
                        <a href="https://twitter.com/yourusername" target="_blank" class="editable" contenteditable="false" data-key="twitter">@yourusername</a>
                    </div>
                    <div class="contact-item">
                        <span class="contact-icon">💼</span>
                        <a href="https://github.com/yourusername" target="_blank" class="editable" contenteditable="false" data-key="github">GitHub</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- フッター -->
    <footer>
        <div class="container">
            <p>&copy; 2025 <span class="editable" contenteditable="false" data-key="footername">あなたの名前</span>. All rights reserved.</p>
        </div>
    </footer>

    <script src="script.js"></script>
    <script src="editor.js"></script>
</body>
</html>