CSS - 長留裕平のブログ

myblog.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: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    .navbar {
      background-color: #333;
      color: #fff;
      padding: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .navbar a {
      color: #fff;
      text-decoration: none;
      padding: 0 15px;
    }
    .navbar a:hover {
      text-decoration: underline;
    }
    .navbar .menu-toggle {
      display: none;
    }
    .navbar .menu {
      display: flex;
    }
    .navbar .menu .dropdown {
      position: relative;
      display: inline-block;
    }
    .navbar .menu .dropdown-content {
      display: none;
      position: absolute;
      background-color: #444;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }
    .navbar .menu .dropdown-content a {
      color: #fff;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    .navbar .menu .dropdown-content a:hover {
      background-color: #555;
    }
    .navbar .menu .dropdown:hover .dropdown-content {
      display: block;
    }
    .custom-banner {
      background-color: #f0f0f0;
      text-align: center;
      padding: 60px 20px;
    }
    .custom-banner h1 {
      color: #333;
      margin: 0;
      font-size: 2.5em;
    }
    .content {
      padding: 20px;
    }
    .post {
      border-bottom: 1px solid #ddd;
      padding: 20px 0;
      transition: background-color 0.3s;
    }
    .post:hover {
      background-color: #f9f9f9;
    }
    .post h2 {
      margin: 0;
      color: #333;
    }
    .post p {
      margin: 10px 0 0;
      color: #666;
    }
    .footer {
      background-color: #333;
      color: #fff;
      text-align: center;
      padding: 10px;
      position: fixed;
      width: 100%;
      bottom: 0;
    }
    .contact-form {
      max-width: 600px;
      margin: 20px auto;
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 5px;
      background-color: #fff;
    }
    .contact-form label {
      display: block;
      margin-bottom: 5px;
      color: #333;
    }
    .contact-form input, .contact-form textarea {
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid #ddd;
      border-radius: 3px;
    }
    .contact-form button {
      background-color: #333;
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 3px;
      cursor: pointer;
    }
    .contact-form button:hover {
      background-color: #555;
    }
    @media (max-width: 600px) {
      .navbar .menu-toggle {
        display: block;
        cursor: pointer;
      }
      .navbar .menu {
        display: none;
        flex-direction: column;
        width: 100%;
      }
      .navbar .menu a {
        padding: 10px;
        border-top: 1px solid #444;
      }
      .navbar .menu.open {
        display: flex;
      }
    }
  </style>
</head>
<body>
  <div class="navbar">
    <div>私のブログ</div>
    <div class="menu-toggle">メニュー</div>
    <div class="menu">
      <a href="#home">ホーム</a>
      <a href="#about">紹介</a>
      <a href="#posts">記事</a>
      <a href="#contact">お問い合わせ</a>
      <div class="dropdown">
        <a href="#more">もっと</a>
        <div class="dropdown-content">
          <a href="#link1">リンク 1</a>
          <a href="#link2">リンク 2</a>
          <a href="#link3">リンク 3</a>
        </div>
      </div>
    </div>
  </div>

  <div class="custom-banner">
    <h1>私のブログへようこそ</h1>
  </div>

  <div class="content" id="home">
    <h2>ホーム</h2>
    <p>ここはホームセクションです。</p>
  </div>

  <div class="content" id="about">
    <h2>紹介</h2>
    <p>ここは紹介セクションです。</p>
  </div>

  <div class="content" id="posts">
    <h2>記事</h2>
    <div class="post">
      <h2>記事タイトル 1</h2>
      <p>この記事の概要や内容がここに表示されます。</p>
    </div>
    <div class="post">
      <h2>記事タイトル 2</h2>
      <p>この記事の概要や内容がここに表示されます。</p>
    </div>
    <!-- 追加の記事をここに追加 -->
  </div>

  <div class="content" id="contact">
    <h2>お問い合わせ</h2>
    <form class="contact-form">
      <label for="name">名前:</label>
      <input type="text" id="name" name="name" required>

      <label for="email">メールアドレス:</label>
      <input type="email" id="email" name="email" required>

      <label for="message">メッセージ:</label>
      <textarea id="message" name="message" rows="5" required></textarea>

      <button type="submit">送信</button>
    </form>
  </div>

  <div class="footer">
    &copy; 2024 私のブログ. All rights reserved.
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const menuToggle = document.querySelector('.menu-toggle');
      const menu = document.querySelector('.menu');
      const contactForm = document.querySelector('.contact-form');

      menuToggle.addEventListener('click', function() {
        menu.classList.toggle('open');
      });

      contactForm.addEventListener('submit', function(event) {
        event.preventDefault();
        alert('フォームが送信されました！');
        // ここでフォームのデータを送信する処理を追加できます
      });

      alert('ブログへようこそ！');
    });
  </script>
</body>
</html>

Ｑ＆Ａサイト

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

        h1, h2, h3 {
            color: #333;
        }

        #question-list, #add-question, #question-detail {
            margin-bottom: 20px;
        }

        #questions {
            list-style-type: none;
            padding: 0;
        }

        .question, .answer {
            background-color: #fff;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

        .answer {
            margin-left: 20px;
        }

        form {
            display: flex;
            flex-direction: column;
        }

        form input, form textarea {
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

        form button {
            padding: 10px;
            border: none;
            border-radius: 5px;
            background-color: #333;
            color: #fff;
            cursor: pointer;
        }

        form button:hover {
            background-color: #555;
        }

        .hidden {
            display: none;
        }

        .action-buttons {
            display: flex;
            gap: 10px;
        }
    </style>
</head>
<body>
    <h1>Q&A Site</h1>
    <div id="question-list">
        <h2>Questions</h2>
        <ul id="questions"></ul>
    </div>
    <div id="add-question">
        <h2>Add a Question</h2>
        <form id="question-form">
            <input type="text" id="question-title" placeholder="Title" required>
            <textarea id="question-body" placeholder="Question" required></textarea>
            <button type="submit">Add Question</button>
        </form>
    </div>
    <div id="question-detail" class="hidden">
        <h2 id="detail-title"></h2>
        <p id="detail-body"></p>
        <div class="action-buttons">
            <button id="edit-question-button">Edit</button>
            <button id="delete-question-button">Delete</button>
        </div>
        <div id="edit-question" class="hidden">
            <h3>Edit Question</h3>
            <form id="edit-question-form">
                <input type="text" id="edit-question-title" required>
                <textarea id="edit-question-body" required></textarea>
                <button type="submit">Save Changes</button>
            </form>
        </div>
        <h3>Answers</h3>
        <ul id="answers"></ul>
        <h3>Add an Answer</h3>
        <form id="answer-form">
            <input type="text" id="answer-name" placeholder="Your name" required>
            <textarea id="answer-body" placeholder="Your answer" required></textarea>
            <button type="submit">Add Answer</button>
        </form>
        <button id="back-button">Back to Questions</button>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            let questions = [];
            let currentQuestionIndex = null;

            const questionForm = document.getElementById('question-form');
            const questionTitle = document.getElementById('question-title');
            const questionBody = document.getElementById('question-body');
            const questionsList = document.getElementById('questions');

            const questionDetail = document.getElementById('question-detail');
            const detailTitle = document.getElementById('detail-title');
            const detailBody = document.getElementById('detail-body');
            const answersList = document.getElementById('answers');
            const answerForm = document.getElementById('answer-form');
            const answerName = document.getElementById('answer-name');
            const answerBody = document.getElementById('answer-body');
            const backButton = document.getElementById('back-button');

            const editQuestionButton = document.getElementById('edit-question-button');
            const deleteQuestionButton = document.getElementById('delete-question-button');
            const editQuestionForm = document.getElementById('edit-question-form');
            const editQuestionTitle = document.getElementById('edit-question-title');
            const editQuestionBody = document.getElementById('edit-question-body');

            questionForm.addEventListener('submit', (e) => {
                e.preventDefault();

                const newQuestion = {
                    title: questionTitle.value,
                    body: questionBody.value,
                    answers: []
                };

                questions.push(newQuestion);
                displayQuestions();

                questionTitle.value = '';
                questionBody.value = '';
            });

            answerForm.addEventListener('submit', (e) => {
                e.preventDefault();

                const newAnswer = {
                    name: answerName.value,
                    body: answerBody.value
                };

                questions[currentQuestionIndex].answers.push(newAnswer);
                displayQuestionDetail(currentQuestionIndex);

                answerName.value = '';
                answerBody.value = '';
            });

            editQuestionButton.addEventListener('click', () => {
                editQuestionForm.classList.remove('hidden');
                editQuestionTitle.value = questions[currentQuestionIndex].title;
                editQuestionBody.value = questions[currentQuestionIndex].body;
            });

            editQuestionForm.addEventListener('submit', (e) => {
                e.preventDefault();
                questions[currentQuestionIndex].title = editQuestionTitle.value;
                questions[currentQuestionIndex].body = editQuestionBody.value;
                displayQuestionDetail(currentQuestionIndex);
                displayQuestions();
                editQuestionForm.classList.add('hidden');
            });

            deleteQuestionButton.addEventListener('click', () => {
                questions.splice(currentQuestionIndex, 1);
                questionDetail.classList.add('hidden');
                document.getElementById('question-list').classList.remove('hidden');
                document.getElementById('add-question').classList.remove('hidden');
                displayQuestions();
            });

            backButton.addEventListener('click', () => {
                questionDetail.classList.add('hidden');
                document.getElementById('question-list').classList.remove('hidden');
                document.getElementById('add-question').classList.remove('hidden');
            });

            function displayQuestions() {
                questionsList.innerHTML = '';

                questions.forEach((question, index) => {
                    const li = document.createElement('li');
                    li.className = 'question';
                    li.innerHTML = `
                        <h3>${question.title}</h3>
                        <p>${question.body}</p>
                        <button onclick="viewQuestion(${index})">View Details</button>
                    `;
                    questionsList.appendChild(li);
                });
            }

            window.viewQuestion = (index) => {
                currentQuestionIndex = index;
                displayQuestionDetail(index);
                document.getElementById('question-list').classList.add('hidden');
                document.getElementById('add-question').classList.add('hidden');
                questionDetail.classList.remove('hidden');
            };

            function displayQuestionDetail(index) {
                const question = questions[index];
                detailTitle.textContent = question.title;
                detailBody.textContent = question.body;
                displayAnswers(index);
            }

            function displayAnswers(index) {
                const question = questions[index];
                answersList.innerHTML = '';

                question.answers.forEach((answer, answerIndex) => {
                    const li = document.createElement('li');
                    li.className = 'answer';
                    li.innerHTML = `
                        <p><strong>${answer.name}:</strong> ${answer.body}</p>
                        <button onclick="editAnswer(${index}, ${answerIndex})">Edit</button>
                        <button onclick="deleteAnswer(${index}, ${answerIndex})">Delete</button>
                    `;
                    answersList.appendChild(li);
                });
            }

            window.editAnswer = (questionIndex, answerIndex) => {
                const answer = questions[questionIndex].answers[answerIndex];
                const newBody = prompt("Edit your answer:", answer.body);
                if (newBody) {
                    answer.body = newBody;
                    displayAnswers(questionIndex);
                }
            };

            window.deleteAnswer = (questionIndex, answerIndex) => {
                questions[questionIndex].answers.splice(answerIndex, 1);
                displayAnswers(questionIndex);
            };

            displayQuestions();
        });
    </script>
</body>
</html>

React CSSでスタイリングしていこう

index.html

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My React App</title>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
  <link rel="stylesheet" href="style.css">
<body>
  <div id="container"></div>

  <script type="text/babel">
    'use strict';

    {
      const container = document.querySelector('#container');
      const root = ReactDOM.createRoot(container);
      root.render(
        <>
           <h1>アイテム</h1>
           <ul>
            <li>ポーション</li>
            <li>エリクサー</li>
            <li>ラストエリクサー</li>
           </ul>
           <p>合計: 0G</p>
        </>
      );
    }
  </script>
</body>

</html>

style.css

@charset "utf-8";

body{
    margin: 0;
}

#container{
    width: 400px;
    margin: auto;
    background: pink;
}

h1{
    margin: 0;
    font-size: 20px;
    text-align: center;
}

ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
}

p{
    margin: 0;
    text-align: right;
}

tailwindcss To-Do List

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>To-Do List</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
  <div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-md">
    <h1 class="text-2xl font-bold mb-4">To-Do List</h1>
    <form id="todo-form" class="flex mb-4">
      <input id="todo-input" type="text" placeholder="Add a new task" class="flex-grow p-2 border rounded-l-lg focus:outline-none">
      <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-r-lg hover:bg-blue-700">Add</button>
    </form>
    <div class="mb-4">
      <button id="filter-all" class="filter-btn bg-gray-200 text-black px-4 py-2 rounded-l-lg">All</button>
      <button id="filter-active" class="filter-btn bg-gray-200 text-black px-4 py-2">Active</button>
      <button id="filter-completed" class="filter-btn bg-gray-200 text-black px-4 py-2 rounded-r-lg">Completed</button>
    </div>
    <ul id="todo-list" class="list-disc pl-5">
      <!-- To-Do items will be added here -->
    </ul>
  </div>

  <script>
    const todoForm = document.getElementById('todo-form');
    const todoInput = document.getElementById('todo-input');
    const todoList = document.getElementById('todo-list');
    const filterButtons = document.querySelectorAll('.filter-btn');

    document.addEventListener('DOMContentLoaded', loadTodos);
    todoForm.addEventListener('submit', function(event) {
      event.preventDefault();
      addTodoItem(todoInput.value);
      todoInput.value = '';
    });

    filterButtons.forEach(button => {
      button.addEventListener('click', () => {
        document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('bg-blue-500', 'text-white'));
        button.classList.add('bg-blue-500', 'text-white');
        filterTodos(button.id);
      });
    });

    function addTodoItem(task) {
      if (task === '') return;

      const listItem = document.createElement('li');
      listItem.classList.add('flex', 'items-center', 'justify-between', 'py-2', 'border-b', 'border-gray-200');

      const taskText = document.createElement('span');
      taskText.textContent = task;
      taskText.classList.add('flex-grow', 'cursor-pointer');
      taskText.addEventListener('click', toggleComplete);

      const editButton = document.createElement('button');
      editButton.textContent = 'Edit';
      editButton.classList.add('bg-yellow-500', 'text-white', 'px-2', 'py-1', 'rounded', 'ml-2', 'hover:bg-yellow-700');
      editButton.addEventListener('click', () => editTodoItem(listItem, taskText));

      const priorityButton = document.createElement('button');
      priorityButton.textContent = 'Important';
      priorityButton.classList.add('bg-green-500', 'text-white', 'px-2', 'py-1', 'rounded', 'ml-2', 'hover:bg-green-700');
      priorityButton.addEventListener('click', () => togglePriority(taskText));

      const deleteButton = document.createElement('button');
      deleteButton.textContent = 'Delete';
      deleteButton.classList.add('bg-red-500', 'text-white', 'px-2', 'py-1', 'rounded', 'ml-2', 'hover:bg-red-700');
      deleteButton.addEventListener('click', () => deleteTodoItem(listItem));

      listItem.appendChild(taskText);
      listItem.appendChild(editButton);
      listItem.appendChild(priorityButton);
      listItem.appendChild(deleteButton);
      todoList.appendChild(listItem);

      saveTodos();
    }

    function toggleComplete(event) {
      event.target.classList.toggle('line-through');
      event.target.classList.toggle('text-gray-500');
      saveTodos();
    }

    function togglePriority(taskText) {
      taskText.classList.toggle('font-bold');
      saveTodos();
    }

    function editTodoItem(listItem, taskText) {
      const newTask = prompt('Edit your task:', taskText.textContent);
      if (newTask !== null && newTask !== '') {
        taskText.textContent = newTask;
        saveTodos();
      }
    }

    function deleteTodoItem(listItem) {
      listItem.remove();
      saveTodos();
    }

    function saveTodos() {
      const todos = [];
      document.querySelectorAll('#todo-list li').forEach((item) => {
        todos.push({
          text: item.querySelector('span').textContent,
          completed: item.querySelector('span').classList.contains('line-through'),
          important: item.querySelector('span').classList.contains('font-bold')
        });
      });
      localStorage.setItem('todos', JSON.stringify(todos));
    }

    function loadTodos() {
      const savedTodos = JSON.parse(localStorage.getItem('todos')) || [];
      savedTodos.forEach((todo) => {
        const listItem = document.createElement('li');
        listItem.classList.add('flex', 'items-center', 'justify-between', 'py-2', 'border-b', 'border-gray-200');

        const taskText = document.createElement('span');
        taskText.textContent = todo.text;
        taskText.classList.add('flex-grow', 'cursor-pointer');
        if (todo.completed) {
          taskText.classList.add('line-through', 'text-gray-500');
        }
        if (todo.important) {
          taskText.classList.add('font-bold');
        }
        taskText.addEventListener('click', toggleComplete);

        const editButton = document.createElement('button');
        editButton.textContent = 'Edit';
        editButton.classList.add('bg-yellow-500', 'text-white', 'px-2', 'py-1', 'rounded', 'ml-2', 'hover:bg-yellow-700');
        editButton.addEventListener('click', () => editTodoItem(listItem, taskText));

        const priorityButton = document.createElement('button');
        priorityButton.textContent = 'Important';
        priorityButton.classList.add('bg-green-500', 'text-white', 'px-2', 'py-1', 'rounded', 'ml-2', 'hover:bg-green-700');
        priorityButton.addEventListener('click', () => togglePriority(taskText));

        const deleteButton = document.createElement('button');
        deleteButton.textContent = 'Delete';
        deleteButton.classList.add('bg-red-500', 'text-white', 'px-2', 'py-1', 'rounded', 'ml-2', 'hover:bg-red-700');
        deleteButton.addEventListener('click', () => deleteTodoItem(listItem));

        listItem.appendChild(taskText);
        listItem.appendChild(editButton);
        listItem.appendChild(priorityButton);
        listItem.appendChild(deleteButton);
        todoList.appendChild(listItem);
      });
    }

    function filterTodos(filter) {
      const allTodos = document.querySelectorAll('#todo-list li');
      allTodos.forEach((todo) => {
        switch (filter) {
          case 'filter-all':
            todo.style.display = 'flex';
            break;
          case 'filter-active':
            todo.querySelector('span').classList.contains('line-through') ? todo.style.display = 'none' : todo.style.display = 'flex';
            break;
          case 'filter-completed':
            todo.querySelector('span').classList.contains('line-through') ? todo.style.display = 'flex' : todo.style.display = 'none';
            break;
        }
      });
    }
  </script>
</body>
</html>

Tailwind CSS入門　インタラクティブにスタイルを変えてみよう

index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <button
        class="bg-orange-400 text-white m-4 py-2 px-4 rounded-full shadow-black/30 shadow-md hover:opacity-80 transition duration-500 active:translate-y-1">
        Buy now!
    </button>
</body>

</html>

Tailwind CSS入門ボタンのスタイリングをしてみよう

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
<button class="bg-orange-400 text-white m-4 py-2 px-4 rounded-full shadow-black/30 shadow-md">
        Buy now!
    </button>
</body>

</html>

Tailwind CSS入門境界線を設定してみよう

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <div class="bg-red-400 w-20 h-20 border-solid border-gray-200 border-8">Box 1</div>
    <div class="bg-sky-400 w-20 h-20 border-dashed border-gray-200 border-b-8">Box 2</div>
</body>

</html>

Tailwind CSS 余白設定してみよう

index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <div class="bg-red-400 w-40 h-40 m-4">Box 1</div>
    <div class="bg-sky-400 w-[160px] mb-4">Box 2</div>
    <div class="bg-orange-400 w-3/4 mx-auto">Box 3</div>
    <div class="bg-green-400 w-[75%]-pl-4">Box 4</div>
</body>

</html>

Tailwind CSS 要素のサイズを設定してみよう

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Tailwind CSS</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <div class="bg-red-400 w-40 h-40">Box 1</div>
  <div class="bg-sky-400 w-[160px]">Box 2</div>
  <div class="bg-orange-400 w-3/4">Box 3</div>
  <div class="bg-green-400 w-[75%]">Box 4</div>
</body>
</html>

Tailwind CSS 要素のサイズを設定してみよう

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <div class="bg-red-400 w-40 h-40">Box 1</div>
    <div class="bg-sky-400 w-[160px]">Box 2</div>
    <div class="bg-orange-400 w-3/4">Box 3</div>
    <div class="bg-green-400 w-[75%]">Box 4</div>
</body>

</html>