More than 1 year has passed since last update.

超詳細! Gemini Code Assist × VScode の導入

Last updated at 2025-08-28Posted at 2025-08-28

環境

Googleアカウントは無課金のものを使用

Step1. VScodeで拡張機能「Gemini Code Assist」のインストール

VScode内で「拡張機能 (Ctrl+Shift+x)」をクリック
検索バーで「gemini code」くらいまで入力
「Gemini Code Assist」をインストール

Step2. Googleアカウントへのログイン

VScode内に新たに追加されたGemini Code Assistのアイコンをクリック
「Sign in」をクリック

WEBサイトを拓くことへの許可を求められるので「開く」を選択

直近でアクティブだったブラウザ画面が開かれるのでアカウントを選択

「ログイン」を選択

Googleアカウントとの接続完了！

Step3. WEBサイトを実装

最近、イベント企画を行っているので、Tech系イベント用WEBサイトを実装

プロンプト

あなたは遊び心のある天才的なWEBエンジニアです。
Tech系ワークショップのWEBサイトを作成してほしい。
POPさ・ワクワク感にこだわって、HTMLファイル、CSSファイル、Javascriptファイルを作成して。
ただし回答文はすべて日本語でお願いします

結果が即座に出力（Googleは無料版です！）

VScodeの拡張機能である「Live Server」を用いて、作成したWEBサイトを見てみる！

動的要素もあるPOPなサイトが一瞬で完成！

付録：生成されたコード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tech Spark Workshop - 未来を創る１日</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700;800&family=Poppins:wght@700&display=swap" rel="stylesheet">
</head>
<body>

    <header class="fade-in">
        <div class="logo">Tech Spark ✨</div>
        <nav>
            <a href="#about">ワークショップとは？</a>
            <a href="#sessions">セッション</a>
            <a href="#register">参加登録</a>
        </nav>
    </header>

    <main>
        <section id="hero">
            <div class="hero-content">
                <h1 id="typing-text"></h1>
                <p class="subtitle">君の「好き」が「未来」になる瞬間。最先端テクノロジーを体験しよう！</p>
                <a href="#register" class="cta-button">今すぐスパークする！</a>
            </div>
        </section>

        <section id="about" class="content-section fade-in">
            <h2>🚀 Tech Spark Workshopとは？</h2>
            <p>プログラミング、AI、IoT…言葉は知っていても、触れたことはありますか？<br>Tech Sparkは、第一線で活躍するエンジニアと一緒に、手を動かしながら最新技術を楽しく学べる体験型ワークショップです。</p>
        </section>

        <section id="sessions" class="content-section fade-in">
            <h2>💡 選べる３つのセッション</h2>
            <div class="card-container">
                <div class="card">
                    <h3>Webサイト制作入門</h3>
                    <p>HTML&CSSの基礎から学び、自分だけのオリジナルポートフォリオサイトを１日で作り上げます。</p>
                </div>
                <div class="card">
                    <h3>AIお絵かきマスター</h3>
                    <p>話題の画像生成AIを使いこなし、プロンプトエンジニアリングのコツを掴んで、君もAIアーティストに！</p>
                </div>
                <div class="card">
                    <h3>IoTで未来の部屋づくり</h3>
                    <p>小さなコンピューター「Raspberry Pi」を使って、身の回りのモノをインターネットに繋げる第一歩を踏み出します。</p>
                </div>
            </div>
        </section>

        <section id="register" class="content-section fade-in">
            <h2>🎟️ 参加登録</h2>
            <p>未来へのチケットを手に入れよう！下のボタンから簡単登録。</p>
            <a href="#" class="cta-button">参加登録フォームへ</a>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 Tech Spark Workshop. All Rights Reserved.</p>
    </footer>

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

style.css

/* --- 全体のスタイルと変数定義 --- */
:root {
    --bg-color: #1a1a2e;
    --primary-color: #16213e;
    --secondary-color: #0f3460;
    --accent-color: #e94560;
    --text-color: #ffffff;
    --font-main: 'M PLUS Rounded 1c', sans-serif;
    --font-title: 'Poppins', sans-serif;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-main);
    margin: 0;
    line-height: 1.8;
    overflow-x: hidden; /* 横スクロールバーを隠す */
}

/* --- ヘッダー --- */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%;
    background: rgba(22, 33, 62, 0.5);
    backdrop-filter: blur(10px);
    position: fixed;
    width: 90%;
    top: 0;
    z-index: 100;
}

.logo {
    font-family: var(--font-title);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--accent-color);
    text-shadow: 0 0 10px var(--accent-color);
}

nav a {
    color: var(--text-color);
    text-decoration: none;
    margin-left: 2rem;
    font-weight: 700;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

nav a:hover {
    color: var(--accent-color);
    text-shadow: 0 0 5px var(--accent-color);
}

/* --- ヒーローセクション --- */
#hero {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 2rem;
    position: relative;
    overflow: hidden;
}

.hero-content {
    z-index: 1;
}

#hero h1 {
    font-family: var(--font-title);
    font-size: 4rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(45deg, #f7b733, #fc4a1a, #a73737);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

/* タイピングカーソル */
#hero h1::after {
    content: '|';
    display: inline-block;
    animation: blink 0.7s infinite;
    color: var(--accent-color);
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 2rem;
}

.cta-button {
    display: inline-block;
    background: linear-gradient(45deg, var(--accent-color), #f06a7f);
    color: var(--text-color);
    padding: 1rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-button:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 8px 30px rgba(233, 69, 96, 0.6);
}

/* --- コンテンツセクション --- */
.content-section {
    padding: 6rem 10%;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.content-section h2 {
    font-family: var(--font-title);
    font-size: 2.5rem;
    margin-bottom: 3rem;
    position: relative;
    display: inline-block;
}

.content-section h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 4px;
    background: linear-gradient(45deg, var(--accent-color), #f06a7f);
    border-radius: 2px;
}

/* --- カードデザイン --- */
.card-container {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.card {
    background: var(--primary-color);
    padding: 2rem;
    border-radius: 15px;
    width: 280px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--secondary-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.card h3 {
    font-family: var(--font-title);
    color: var(--accent-color);
    margin-top: 0;
}

/* --- フッター --- */
footer {
    text-align: center;
    padding: 2rem 0;
    background-color: var(--secondary-color);
    margin-top: 4rem;
    font-size: 0.9rem;
}

/* --- アニメーション --- */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

script.js

document.addEventListener('DOMContentLoaded', () => {

    // --- ヒーローセクションのタイピングエフェクト ---
    const typingTextElement = document.getElementById('typing-text');
    const textToType = "Create Your Future.";
    let charIndex = 0;

    function type() {
        if (charIndex < textToType.length) {
            typingTextElement.textContent += textToType.charAt(charIndex);
            charIndex++;
            setTimeout(type, 150); // 次の文字を打つ速さ
        }
    }
    type();


    // --- スクロールでのフェードインエフェクト ---
    const faders = document.querySelectorAll('.fade-in');

    const appearOptions = {
        threshold: 0.3, // 要素が30%見えたら発動
        rootMargin: "0px 0px -50px 0px" // 少し早めに検知
    };

    const appearOnScroll = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (!entry.isIntersecting) {
                return;
            }
            entry.target.classList.add('visible');
            observer.unobserve(entry.target); // 一度表示したら監視を停止
        });
    }, appearOptions);

    faders.forEach(fader => {
        appearOnScroll.observe(fader);
    });

});

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

超詳細! Gemini Code Assist × VScode の導入

目次

環境

Step1. VScodeで拡張機能「Gemini Code Assist」のインストール

Step2. Googleアカウントへのログイン

Step3. WEBサイトを実装

付録：生成されたコード