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

Social Networking Service

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Networking Service</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
  body {
    padding: 20px;
  }
  .card {
    margin-bottom: 20px;
  }
</style>
</head>
<body>

<div class="container">
  <h1 class="text-center mb-4">Social Networking Service</h1>

  <!-- ログインフォーム -->
  <div id="loginForm" class="card w-50 mx-auto">
    <div class="card-body">
      <h2 class="card-title text-center mb-4">Login</h2>
      <div class="form-group">
        <input type="text" id="loginUsername" class="form-control" placeholder="Username">
      </div>
      <div class="form-group">
        <input type="password" id="loginPassword" class="form-control" placeholder="Password">
      </div>
      <button onclick="login()" class="btn btn-primary btn-block">Login</button>
      <button onclick="registerForm()" class="btn btn-secondary btn-block">Register</button>
    </div>
  </div>

  <!-- 登録フォーム -->
  <div id="registerForm" class="card w-50 mx-auto" style="display: none;">
    <div class="card-body">
      <h2 class="card-title text-center mb-4">Register</h2>
      <div class="form-group">
        <input type="text" id="registerName" class="form-control" placeholder="Full Name">
      </div>
      <div class="form-group">
        <input type="text" id="registerUsername" class="form-control" placeholder="Username">
      </div>
      <div class="form-group">
        <input type="password" id="registerPassword" class="form-control" placeholder="Password">
      </div>
      <button onclick="register()" class="btn btn-primary btn-block">Register</button>
      <button onclick="loginForm()" class="btn btn-secondary btn-block">Back to Login</button>
    </div>
  </div>

  <!-- プロフィール -->
  <div id="profile" class="card w-50 mx-auto" style="display: none;">
    <div class="card-body">
      <h2 class="card-title text-center mb-4">Profile</h2>
      <p><strong>Name:</strong> <span id="profileName"></span></p>
      <p><strong>Username:</strong> <span id="profileUsername"></span></p>
      <button onclick="logout()" class="btn btn-danger btn-block">Logout</button>
    </div>
  </div>

  <!-- 投稿フォーム -->
  <div id="postForm" class="card w-75 mx-auto" style="display: none;">
    <div class="card-body">
      <h2 class="card-title text-center mb-4">Create Post</h2>
      <div class="form-group">
        <textarea id="postContent" class="form-control" rows="3" placeholder="What's on your mind?"></textarea>
      </div>
      <button onclick="createPost()" class="btn btn-primary btn-block">Post</button>
    </div>
  </div>

  <!-- 投稿一覧 -->
  <div id="postList" class="w-75 mx-auto mt-4"></div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
  let currentUser = null; // 現在のログインユーザー
  let users = []; // ユーザーの配列
  let posts = []; // 投稿の配列

  function login() {
    const username = document.getElementById('loginUsername').value;
    const password = document.getElementById('loginPassword').value;
    const user = users.find(u => u.username === username && u.password === password);
    if (user) {
      currentUser = user;
      showProfile();
    } else {
      alert('Invalid username or password.');
    }
  }

  function logout() {
    currentUser = null;
    hideAll();
    document.getElementById('loginForm').style.display = 'block';
  }

  function registerForm() {
    hideAll();
    document.getElementById('registerForm').style.display = 'block';
  }

  function register() {
    const name = document.getElementById('registerName').value;
    const username = document.getElementById('registerUsername').value;
    const password = document.getElementById('registerPassword').value;
    users.push({ name, username, password });
    alert('Registration successful! Please login.');
    loginForm();
  }

  function loginForm() {
    hideAll();
    document.getElementById('loginForm').style.display = 'block';
  }

  function showProfile() {
    hideAll();
    document.getElementById('profile').style.display = 'block';
    document.getElementById('profileName').textContent = currentUser.name;
    document.getElementById('profileUsername').textContent = currentUser.username;
    document.getElementById('postForm').style.display = 'block';
    displayPosts();
  }

  function createPost() {
    const postContent = document.getElementById('postContent').value;
    if (postContent.trim() !== '') {
      const post = {
        id: Date.now(),
        content: postContent,
        author: currentUser.name,
        authorUsername: currentUser.username,
        likes: 0,
        comments: []
      };
      posts.unshift(post); // 最新の投稿を先頭に追加
      displayPosts();
      document.getElementById('postContent').value = ''; // 投稿後、入力欄を空にする
    }
  }

  function displayPosts() {
    const postList = document.getElementById('postList');
    postList.innerHTML = '';
    posts.forEach(post => {
      const postElement = document.createElement('div');
      postElement.innerHTML = `
        <div class="card mb-3">
          <div class="card-body">
            <p class="card-text">${post.content}</p>
            <small class="text-muted">Posted by ${post.author} (@${post.authorUsername}) at ${new Date(post.id).toLocaleString()}</small><br>
            <button onclick="likePost(${post.id})" class="btn btn-primary btn-sm mt-2">Like (${post.likes})</button>
            <button onclick="showComments(${post.id})" class="btn btn-secondary btn-sm mt-2">Comments</button>
          </div>
        </div>
      `;
      postList.appendChild(postElement);
    });
  }

  function likePost(postId) {
    const post = posts.find(p => p.id === postId);
    post.likes++;
    displayPosts();
  }

  function showComments(postId) {
    const post = posts.find(p => p.id === postId);
    const comments = prompt('Enter your comment:');
    if (comments !== null && comments.trim() !== '') {
      post.comments.push({ author: currentUser.name, content: comments });
      displayPosts();
    }
  }

  function hideAll() {
    document.getElementById('loginForm').style.display = 'none';
    document.getElementById('registerForm').style.display = 'none';
    document.getElementById('profile').style.display = 'none';
    document.getElementById('postForm').style.display = 'none';
  }

  users.push({ name: 'User One', username: 'user1', password: 'password1' });
  users.push({ name: 'User Two', username: 'user2', password: 'password2' });

  hideAll();
  document.getElementById('loginForm').style.display = 'block';
</script>

</body>
</html>

python chatGPT2-AI

chatGPT-2.py

from flask import Flask, render_template, request, redirect, url_for
from transformers import GPT2Tokenizer, GPT2LMHeadModel
import wikipedia

app = Flask(__name__)

# GPT-2のトークナイザーとモデルをロード
tokenizer = GPT2Tokenizer.from_pretrained("gpt2")
model = GPT2LMHeadModel.from_pretrained("gpt2")

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/generate', methods=['POST'])
def generate_text():
    # ユーザーからの入力を取得
    prompt_text = request.form['prompt']
    
    try:
        # Wikipediaからテキストを取得
        wikipedia_text = wikipedia.summary(prompt_text)
        
        # テキストの生成
        inputs = tokenizer.encode(wikipedia_text, return_tensors="pt")
        outputs = model.generate(inputs, max_length=100, num_return_sequences=1, temperature=0.7)
        
        # 生成されたテキストをデコードしてHTMLコードに組み込む
        generated_text = tokenizer.decode(outputs[0], skip_special_tokens=True)
        
        # 生成されたテキストとWikipediaのテキストと共にHTMLを返す
        return render_template('index.html', prompt_text=prompt_text, generated_text=generated_text, wikipedia_text=wikipedia_text)
    
    except wikipedia.exceptions.DisambiguationError as e:
        # 曖昧性がある場合は、候補のリストを表示
        options = e.options
        return render_template('disambiguation.html', options=options)
    
    except wikipedia.exceptions.PageError:
        wikipedia_text = "Wikipediaにそのトピックが見つかりませんでした。"
        return render_template('index.html', prompt_text=prompt_text, wikipedia_text=wikipedia_text)

@app.route('/generate_with_option/<option>', methods=['GET'])
def generate_with_option(option):
    try:
        # Wikipediaからテキストを取得
        wikipedia_text = wikipedia.summary(option)
        
        # テキストの生成
        inputs = tokenizer.encode(wikipedia_text, return_tensors="pt")
        outputs = model.generate(inputs, max_length=100, num_return_sequences=1, temperature=0.7)
        
        # 生成されたテキストをデコードしてHTMLコードに組み込む
        generated_text = tokenizer.decode(outputs[0], skip_special_tokens=True)
        
        # 生成されたテキストとWikipediaのテキストと共にHTMLを返す
        return render_template('index.html', prompt_text=option, generated_text=generated_text, wikipedia_text=wikipedia_text)
    
    except wikipedia.exceptions.PageError:
        wikipedia_text = "Wikipediaにそのトピックが見つかりませんでした。"
        return render_template('index.html', prompt_text=option, wikipedia_text=wikipedia_text)

if __name__ == '__main__':
    app.run(debug=True)

templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generate Text</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        header {
            text-align: center;
            margin-top: 50px;
        }

        main {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        .form-section, .response-section, .wikipedia-section {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }

        .prompt-form {
            max-width: 100%;
        }

        label {
            font-weight: bold;
        }

        input[type="text"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #0056b3;
        }

        .generated-text {
            margin-top: 20px;
        }

        .tweet-link {
            display: block;
            margin-top: 10px;
            text-align: center;
        }

        footer {
            text-align: center;
            margin-top: 50px;
        }
    </style>
</head>
<body>

    <header>
        <h1>Generate Text</h1>
    </header>

    <main>
        <section class="form-section">
            <form action="/generate" method="POST" class="prompt-form">
                <label for="prompt">Enter your prompt:</label><br>
                <input type="text" id="prompt" name="prompt" placeholder="Enter your prompt..."><br><br>
                <button type="submit">Generate</button>
            </form>
        </section>

        <!-- 生成されたテキストを表示 -->
        {% if generated_text %}
        <section class="response-section">
            <div class="response">
                <h2>Generated Text:</h2>
                <p class="generated-text">{{ generated_text }}</p>
                <a href="https://twitter.com/intent/tweet?text={{ generated_text }}" class="tweet-link">Tweet</a>
            </div>
        </section>
        {% endif %}

        <!-- Wikipediaからの関連情報を表示 -->
        {% if wikipedia_text %}
        <section class="wikipedia-section">
            <div class="wikipedia-info">
                <h2>Wikipedia Info:</h2>
                <p>{{ wikipedia_text }}</p>
            </div>
        </section>
        {% endif %}

        <!-- 保存ボタン -->
        <button id="saveButton">Save Generated Text</button>
    </main>

    <footer>
        <p>© 2024 Generate Text App</p>
    </footer>

    <script>
        // 保存ボタンがクリックされたときの処理
        document.getElementById('saveButton').addEventListener('click', function() {
            // 生成されたテキストを取得
            var generatedText = document.querySelector('.generated-text').innerText;
            // テキストをダウンロード用にBlobに変換
            var blob = new Blob([generatedText], { type: 'text/plain' });
            // BlobをURLに変換
            var url = window.URL.createObjectURL(blob);
            // ダウンロード用のリンクを作成してクリック
            var a = document.createElement('a');
            a.href = url;
            a.download = 'generated_text.txt';
            document.body.appendChild(a);
            a.click();
            // 不要なURLを解放
            window.URL.revokeObjectURL(url);
            document.body.removeChild(a);
        });
    </script>

</body>
</html>

今回はテキストデータを保存できるようにしました

検索エンジン「Voogle」

import requests
from flask import Flask, request, jsonify

app = Flask(__name__)

class SearchEngine:
    def __init__(self, documents):
        self.documents = documents

    def search_local(self, query):
        results = []
        for doc in self.documents:
            if query.lower() in doc["text"].lower():
                results.append(doc)
        return results

    def search_wikipedia(self, query, lang='ja'):
        base_url = f"https://{lang}.wikipedia.org/w/api.php"
        params = {
            'action': 'query',
            'list': 'search',
            'srsearch': query,
            'format': 'json'
        }
        response = requests.get(base_url, params=params)
        if response.status_code == 200:
            search_results = response.json().get('query', {}).get('search', [])
            return [{'id': result['pageid'], 'text': result['snippet']} for result in search_results]
        else:
            return []

# サンプルドキュメントデータ
documents = [
    {"id": 1, "text": "Pythonは汎用の高水準言語です。"},
    {"id": 2, "text": "検索エンジンは情報を検索するためのツールです。"},
    {"id": 3, "text": "人工知能はコンピュータによる知的な振る舞いを実現する技術です。"},
    {"id": 4, "text": "Web開発では、HTML、CSS、JavaScriptなどの技術が使われます。"},
    {"id": 5, "text": "データサイエンティストはデータから有益な情報を引き出す専門家です。"}
]

# SearchEngineインスタンスの作成
search_engine = SearchEngine(documents)

@app.route("/", methods=["GET", "POST"])
def search():
    # 以前の関数の内容は変更なし
    if request.method == "POST":
        query = request.form["query"]
        local_results = search_engine.search_local(query)
        wiki_results = search_engine.search_wikipedia(query)
        all_results = local_results + wiki_results
        if not all_results:
            return "検索結果はありません。"
        else:
            result_text = "<br>".join([f"<div><strong>ID:</strong> {result['id']}, <strong>Text:</strong> {result['text']}</div>" for result in all_results])
            return f"""
            <!DOCTYPE html>
            <html>
            <head>
                <title>検索エンジン</title>
                <style>
                    body {{
                        font-family: Arial, sans-serif;
                        margin: 0 auto;
                        max-width: 800px;
                        padding: 20px;
                    }}
                    h1 {{
                        color: #333;
                    }}
                    form {{
                        margin-bottom: 20px;
                    }}
                    input[type="text"] {{
                        margin-right: 10px;
                        padding: 10px;
                        width: calc(100% - 122px);
                    }}
                    input[type="submit"] {{
                        padding: 10px 20px;
                        background-color: #4CAF50;
                        color: white;
                        border: none;
                        cursor: pointer;
                    }}
                    input[type="submit"]:hover {{
                        background-color: #45a049;
                    }}
                    div {{
                        margin-bottom: 10px;
                        padding: 10px;
                        background-color: #f2f2f2;
                        border-left: 4px solid #4CAF50;
                    }}
                </style>
            </head>
            <body>
                <h1>検索エンジン</h1>
                <form method="POST">
                    <label for="query">検索キーワード:</label>
                    <input type="text" name="query" id="query" required>
                    <input type="submit" value="検索">
                </form>
                {result_text}
            </body>
            </html>
            """
    return """
    <!DOCTYPE html>
    <html>
    <head>
        <title>検索エンジン</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                margin: 0 auto;
                max-width: 800px;
                padding: 20px;
            }
            h1 {
                color: #333;
            }
            form {
                margin-bottom: 20px;
            }
            input[type="text"] {
                margin-right: 10px;
                padding: 10px;
                width: calc(100% - 122px);
            }
            input[type="submit"] {
                padding: 10px 20px;
                background-color: #4CAF50;
                color: white;
                border: none;
                cursor: pointer;
            }
            input[type="submit"]:hover {
                background-color: #45a049;
            }
        </style>
    </head>
    <body>
        <h1>検索エンジン</h1>
        <form method="POST">
            <label for="query">検索キーワード:</label>
            <input type="text" name="query" id="query" required>
            <input type="submit" value="検索">
        </form>
    </body>
    </html>
    """

if __name__ == "__main__":
    app.run(debug=True)

https://voogle.onrender.com/

GPT-2とWikipediaを使って生成するAI

GPT-2.py

from flask import Flask, render_template, request, redirect, url_for
from transformers import GPT2Tokenizer, GPT2LMHeadModel
import wikipedia

app = Flask(__name__)

# GPT-2のトークナイザーとモデルをロード
tokenizer = GPT2Tokenizer.from_pretrained("gpt2")
model = GPT2LMHeadModel.from_pretrained("gpt2")

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/generate', methods=['POST'])
def generate_text():
    # ユーザーからの入力を取得
    prompt_text = request.form['prompt']
    
    try:
        # Wikipediaからテキストを取得
        wikipedia_text = wikipedia.summary(prompt_text)
        
        # テキストの生成
        inputs = tokenizer.encode(wikipedia_text, return_tensors="pt")
        outputs = model.generate(inputs, max_length=100, num_return_sequences=1, temperature=0.7)
        
        # 生成されたテキストをデコードしてHTMLコードに組み込む
        generated_text = tokenizer.decode(outputs[0], skip_special_tokens=True)
        
        # 生成されたテキストとWikipediaのテキストと共にHTMLを返す
        return render_template('index.html', prompt_text=prompt_text, generated_text=generated_text, wikipedia_text=wikipedia_text)
    
    except wikipedia.exceptions.DisambiguationError as e:
        # 曖昧性がある場合は、候補のリストを表示
        options = e.options
        return render_template('disambiguation.html', options=options)
    
    except wikipedia.exceptions.PageError:
        wikipedia_text = "Wikipediaにそのトピックが見つかりませんでした。"
        return render_template('index.html', prompt_text=prompt_text, wikipedia_text=wikipedia_text)

@app.route('/generate_with_option/<option>', methods=['GET'])
def generate_with_option(option):
    try:
        # Wikipediaからテキストを取得
        wikipedia_text = wikipedia.summary(option)
        
        # テキストの生成
        inputs = tokenizer.encode(wikipedia_text, return_tensors="pt")
        outputs = model.generate(inputs, max_length=100, num_return_sequences=1, temperature=0.7)
        
        # 生成されたテキストをデコードしてHTMLコードに組み込む
        generated_text = tokenizer.decode(outputs[0], skip_special_tokens=True)
        
        # 生成されたテキストとWikipediaのテキストと共にHTMLを返す
        return render_template('index.html', prompt_text=option, generated_text=generated_text, wikipedia_text=wikipedia_text)
    
    except wikipedia.exceptions.PageError:
        wikipedia_text = "Wikipediaにそのトピックが見つかりませんでした。"
        return render_template('index.html', prompt_text=option, wikipedia_text=wikipedia_text)

if __name__ == '__main__':
    app.run(debug=True)

templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generate Text</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        h1 {
            text-align: center;
            margin-top: 50px;
        }

        form {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        label {
            font-weight: bold;
        }

        input[type="text"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #0056b3;
        }

        .response {
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .generated-text {
            margin-top: 20px;
        }

        .tweet-link {
            display: block;
            margin-top: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Generate Text</h1>
    <form action="/generate" method="POST">
        <label for="prompt">Enter your prompt:</label><br>
        <input type="text" id="prompt" name="prompt"><br><br>
        <button type="submit">Generate</button>
    </form>

    <!-- 生成されたテキストを表示 -->
    {% if generated_text %}
    <div class="response">
        <h2>Generated Text:</h2>
        <p class="generated-text">{{ generated_text }}</p>
        <a href="https://twitter.com/intent/tweet?text={{ generated_text }}" class="tweet-link" target="_blank">Tweet</a>
    </div>
    {% endif %}
</body>
</html>

templates/disambiguation.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Disambiguation Page</title>
</head>
<body>
    <h1>Disambiguation</h1>
    <p>Multiple meanings were found for the provided prompt. Please select the intended meaning:</p>
    <ul>
        {% for option in options %}
            <li><a href="{{ url_for('generate_with_option', option=option) }}">{{ option }}</a></li>
        {% endfor %}
    </ul>
</body>
</html>

HTMLCSSJavascript Canvas

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My Canvas</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <canvas width="600" height="240">
    Canvas not supported.
  </canvas>

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

css/styles.css

body {
  background: #222;
}
canvas {
  background: #fff;
}

js/main.js

'use strict';

{
  let t = 0;
  
  function draw() {
    const canvas = document.querySelector('canvas');
    if (typeof canvas.getContext === 'undefined') {
      return;
    }
    const ctx = canvas.getContext('2d');
    
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    ctx.beginPath();
    ctx.ellipse(100, 100, 40, 30, 0, 0, 2 * Math.PI);
    ctx.fillStyle = 'black';
    ctx.fill();
    
    ctx.beginPath();
    ctx.ellipse( 80 + Math.sin(t / 30), 100, 8, 8, 0, 0, 2 * Math.PI);
    ctx.ellipse(120 + Math.sin(t / 30), 100, 8, 8, 0, 0, 2 * Math.PI);
    ctx.fillStyle = 'skyblue';
    ctx.fill();
    
    t++;
    setTimeout(draw, 10);
 }

  draw();
}

HTMLについて

HTML (HyperText Markup Language)は、Webページを作成するためのマークアップ言語です。HTMLを使うことで、テキストや画像、音声、動画などのコンテンツをWebページ上に配置し、それらをリンクさせることができます。

HTMLは、タグ (tag) と呼ばれる特定の単語や文字列で構成される要素から成り立っています。タグは、以下のような形式で表現されます。

php
Copy code
<タグ名 属性="属性値">コンテンツ
例えば、以下のような

タグは、見出しを定義するためのものです。

css
Copy code

見出しのテキスト

また、以下のようにタグを使うことで、画像を表示することができます。

php
Copy code
画像の説明
さらに、HTMLは、CSSやJavaScriptなどの技術と組み合わせて、より複雑なWebページやアプリケーションを作成することができます。

HTMLは、Web開発において必要な基本的な技術であり、WebデザイナーやWeb開発者にとって重要なスキルとなっています。

HTMLの基礎

HTMLの基礎については以下の通りです。

HTMLの文書構造
HTML文書は基本的に以下のような構造を持ちます。
php
Copy code


ページのタイトル

見出し

文章の本文

はHTML5の文書タイプを指定するための宣言です。
はHTML文書全体を囲むタグで、その中にはとが含まれます。
は文書の情報を含むタグで、タイトルやスタイルシートなどが指定されます。
はHTML文書の本文を含むタグです。
HTMLタグ
HTML文書は、さまざまなHTMLタグを使って構成されています。タグは<と>で囲まれた文字列で、HTMLの要素を指定します。
例えば、

タグは見出しを表すために使用され、

タグは段落を表すために使用されます。

属性
HTMLタグには、属性を追加することができます。属性は、HTML要素の詳細を指定するために使用されます。
例えば、タグには、src属性を追加することで、表示する画像のファイルパスを指定することができます。

リンク
HTML文書では、リンクを作成することができます。リンクは、タグを使用して作成されます。
例えば、以下のように書くことで、Googleのウェブサイトにリンクを作成することができます。

php
Copy code
Google
画像の表示
HTML文書では、画像を表示することができます。画像の表示には、タグを使用します。
例えば、以下のように書くことで、”example.jpg”という画像を表示することができます。

php
Copy code
画像の説明
以上が、HTMLの基礎的な概念についての説明です。

HTML

HTML (Hypertext Markup Language) is a markup language used to create and structure content for the World Wide Web. It is the standard language for creating web pages and web applications.

HTML uses a system of tags and attributes to define the structure and content of a web page. Tags are used to enclose content, and attributes provide additional information about the content.

Some common HTML tags include:

: This tag is used to enclose the entire HTML document.
: This tag contains information about the document, such as the title and metadata.
: This tag contains the main content of the web page.

to

: These tags are used to define headings of various sizes.

: This tag is used to define paragraphs.
: This tag is used to create hyperlinks to other web pages or resources.
: This tag is used to embed images into the web page.
In addition to these tags, there are many other tags and attributes that can be used in HTML to create a wide variety of web content.

HTML is often used in conjunction with other web technologies, such as CSS (Cascading Style Sheets) for styling and layout, and JavaScript for interactivity and dynamic content.