誰でもわかる！Markdown AIでウェブサイト作り

Last updated at 2024-12-06Posted at 2024-12-06

はじめに 👋

今回は、Markdown AIを使って面白いウェブサイトを作る方法を紹介します。
プログラミング初心者の方でも簡単に作れる内容になっています。

完成版はこちら 🎯

カラーチェンジャー

エラーボタン

参考記事 📚

1️⃣ マジック！カラーチェンジャー 🎨

カラーチェンジャーの仕組み 🤔

このウェブサイトは3つの要素で構成されています：

HTML：ページの基本構造
CSS：デザインの設定
JavaScript：動作の制御

コードと解説

以下のコードを順番にMarkdown AIに入力していきます：

<script>
function changeColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  document.body.style.backgroundColor = color;
  document.getElementById('currentColor').textContent = color;
}

document.addEventListener('keydown', function(event) {
  if (event.code === 'Space') {
    event.preventDefault();
    changeColor();
  }
});
</script>

<style>
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: background-color 0.5s;
}

button {
  padding: 20px 40px;
  font-size: 1.2em;
  font-weight: bold;
  border: none;
  border-radius: 50px;
  background: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s;
}

button:hover {
  transform: scale(1.05);
}

#currentColor {
  margin-top: 20px;
  font-family: monospace;
  font-size: 1.1em;
}
</style>

<div style="text-align: center;">
  <button onclick="changeColor()">色を変える！</button>
  <div id="currentColor">#FFFFFF</div>
</div>

コードの詳しい説明 📝

1. JavaScriptの部分

function changeColor() {
  const letters = '0123456789ABCDEF';  // 色を作るための文字
  let color = '#';                     // 色コードの開始
  for (let i = 0; i < 6; i++) {       // 6回繰り返す
    color += letters[Math.floor(Math.random() * 16)];  // ランダムな文字を追加
  }
  document.body.style.backgroundColor = color;         // 背景色を変更
  document.getElementById('currentColor').textContent = color;  // 色コードを表示
}

このコードはランダムな色を生成します
色は#から始まる6文字の16進数で表現します
例：#FF0000（赤）、#00FF00（緑）、#0000FF（青）

2. CSSの部分

body: ページ全体の設定
button: ボタンのデザイン
#currentColor: 色コード表示部分のスタイル

3. HTMLの部分

ボタンと色コード表示用の要素を配置
中央揃えで表示

コード全体:

---
カラーボタン
---

<script>
function changeColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  document.body.style.backgroundColor = color;
  document.getElementById('currentColor').textContent = color;
}

// スペースキーでも色を変更できるようにする
document.addEventListener('keydown', function(event) {
  if (event.code === 'Space') {
    event.preventDefault(); // スペースキーでのスクロールを防ぐ
    changeColor();
  }
});
</script>

<style>
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: background-color 0.5s;
}

button {
  padding: 20px 40px;
  font-size: 1.2em;
  font-weight: bold;
  border: none;
  border-radius: 50px;
  background: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s;
}

button:hover {
  transform: scale(1.05);
}

#currentColor {
  margin-top: 20px;
  font-family: monospace;
  font-size: 1.1em;
}
</style>

<div style="text-align: center;">
  <button onclick="changeColor()">色を変える！</button>
  <div id="currentColor">#FFFFFF</div>
</div>

2️⃣ ドッキリ！エラーボタン 😈

エラーボタンのコード

---
エラーボタン
---

<script>
let popupCount = 0;

function createPopup() {
 if (popupCount >= 150) return;
 
 const errorMessages = [
   "エラーが発生しました",
   "システムエラー",
   "接続に失敗",
   "不正なアクセス",
   "データが破損",
   "404 Not Found",
   "メモリ不足です",
   "タイムアウト",
   "こんにちは"
 ];
 
 const popup = document.createElement('div');
 popup.classList.add('error-popup');
 
 popup.style.left = Math.random() * (window.innerWidth - 200) + 'px';
 popup.style.top = Math.random() * (window.innerHeight - 100) + 'px';
 
 const message = errorMessages[Math.floor(Math.random() * errorMessages.length)];
 popup.innerHTML = `
   <div class="error-title">エラー</div>
   <div class="error-message">${message}</div>
 `;
 
 document.body.appendChild(popup);
 popupCount++;
}

function showErrors() {
 document.body.style.backgroundColor = '#111';  // ボタンを押したら背景を暗くする
 for (let i = 0; i < 150; i++) {
   setTimeout(createPopup, i * 25);
 }
}
</script>

<style>
body {
 background: white;  /* 初期背景を白に設定 */
 margin: 0;
 height: 100vh;
 display: flex;     /* Flexboxを使用して中央配置 */
 justify-content: center;
 align-items: center;
 overflow: hidden;
 transition: background-color 0.3s;  /* 背景色の変化をスムーズに */
}

#error-button {
 padding: 15px 30px;
 background: #ff3333;
 color: white;
 border: none;
 border-radius: 4px;
 cursor: pointer;
 font-size: 18px;
 font-weight: bold;
 z-index: 1000;
 box-shadow: 0 2px 4px rgba(0,0,0,0.2);
 transition: transform 0.2s;
}

#error-button:hover {
 transform: scale(1.05);
}

.error-popup {
 position: absolute;
 width: 200px;
 background: #1a1a1a;
 border: 1px solid #ff3333;
 border-radius: 4px;
 z-index: 100;
 box-shadow: 0 2px 8px rgba(255,0,0,0.2);
}

.error-title {
 background: #ff3333;
 color: white;
 padding: 5px 10px;
 font-weight: bold;
}

.error-message {
 padding: 10px;
 color: #ff3333;
}
</style>

<button id="error-button" onclick="showErrors()">絶対に押さないで</button>

エラーボタンの解説 📝

1. エラーメッセージの仕組み

9種類のエラーメッセージをランダムに表示
最大150個のエラーウィンドウを生成
25ミリ秒ごとに1つずつ表示

2. 表示位置の計算

画面内のランダムな位置に表示
Math.random()で座標を計算

3. デザイン

エラーウィンドウは黒背景に赤い枠
ボタンは赤色でホバーエフェクト付き

カスタマイズのヒント 💡

カラーチェンジャー

ボタンの文字を変える
色が変わる速度を調整
特定の色だけを使用するように変更

エラーボタン

エラーメッセージを追加・変更
表示間隔を調整
エラーウィンドウのデザインを変更

発展的な改造案 🚀

色の履歴を表示する機能
お気に入りの色を保存する機能
エラーウィンドウをクリックで消せるようにする
効果音を追加する

プログラミングを楽しみながら学べましたか？
次は何を作ってみたいですか？ 😊

さいごに

Markdown AIでウェブサイト作りは簡単ので皆さんもぜひ触って作ってみてください！

Markdown AIのサーバーAI機能を使ってWebサイトを作ってみよう by MarkdownAIAdvent Calendar 2024

Day 5

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