カテゴリー: CSS

CSS メディアクエリー

style.css

@charset "utf-8";

.card {
    border: 1px solid #ccc;
    box-sizing: border-box;
    padding: 16px;
    max-width: 600px;
    margin: 0 auto;

    &:hover {
        box-shadow: 0 0 8px rgb(0 0 0 / 0.3);
    }

    h2 {
        margin: 0;
        border-bottom: 1px solid #ccc;
        text-align: center;
        font-size: 18px;
        padding-bottom: 8px;
    }

    p {
        margin: 16px 0 0;
        line-height: 1.6;
    }
}

@media (width >=600px) {
    .card h2 {
        text-align: left;
    }
}

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 CSS Nesting</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <section class="card">
    <h2>こんにちは</h2>
    <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
  </section>
</body>

</html>

MyCarousel

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 Carousel</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <section class="carousel">
        <div class="container">
            <ul>
                <li><img src="img/pic1.png"></li>
                <li><img src="img/pic2.png"></li>
                <li><img src="img/pic3.png"></li>
                <li><img src="img/pic4.png"></li>
            </ul>

            <button id="prev">&laquo;</button>
            <button id="next">&raquo;</button>
        </div>

        <nav>
        </nav>
    </section>

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

</html>

js/main.js

'use strict';

{
    const next = document.getElementById('next');
    const prev = document.getElementById('prev');
    const ul = document.querySelector('ul');
    const slides = ul.children;
    const dots = [];
    let currentIndex = 0;

    function updateButtons() {
        prev.classList.remove('hidden');
        next.classList.remove('hidden');

        if (currentIndex === 0) {
            prev.classList.add('hidden');
        }
        if (currentIndex === slides.length - 1) {
            next.classList.add('hidden');
        }
    }

    function moveSlides() {
        const slideWidth = slides[0].getBoundingClientRect().width;
        ul.style.transform = `translateX(${-1 * slideWidth * currentIndex}px)`;
    }

    function setupDots() {
        for (let i = 0; i < slides.length; i++) {
            const button = document.createElement('button');
            button.addEventListener('click', () => {
                currentIndex = i;
                updateDots();
                updateButtons();
                moveSlides();
            });
            dots.push(button);
            document.querySelector('nav').appendChild(button);
        }

        dots[0].classList.add('current');
    }

    function updateDots() {
        dots.forEach(dot => {
            dot.classList.remove('current');
        });
        dots[currentIndex].classList.add('current');
    }

    updateButtons();
    setupDots();

    next.addEventListener('click', () => {
        currentIndex++;
        updateButtons();
        updateDots();
        moveSlides();
    });

    prev.addEventListener('click', () => {
        currentIndex--;
        updateButtons();
        updateDots();
        moveSlides();
    });

    window.addEventListener('resize', () => {
        moveSlides();
    });
}

css/style.css

.carousel {
    width: 80%;
    margin: 16px auto;
}

.container {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    transition: transform .3s;
}

li {
    height: 100%;
    min-width: 100%;
}

li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#prev,
#next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: rgba(0, 0, 0, .8);
    color: #fff;
    font-size: 24px;
    padding: 0 8px 4px;
    cursor: pointer;
}

#prev:hover,
#next:hover {
    opacity: .8;
}

#prev {
    left: 0;
}

#next {
    right: 0;
}

.hidden {
    display: none;
}

nav {
    margin-top: 16px;
    text-align: center;
}

nav button+button {
    margin-left: 8px;
}

nav button {
    border: none;
    width: 16px;
    height: 16px;
    background: #ddd;
    border-radius: 50%;
    cursor: pointer;
}

nav .current {
    background: #999;
}

MyTabMenu

index.html

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

<head>
    <meta charset="utf-8">
    <title>Tab Menu</title>
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <div class="container">
        <ul class="menu">
            <li><a href="#" class="active" data-id="about">サイトの概要</a></li>
            <li><a href="#" data-id="service">サービス内容</a></li>
            <li><a href="#" data-id="contact">お問い合わせ</a></li>
        </ul>

        <section class="content active" id="about">
            サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。
        </section>

        <section class="content" id="service">
            サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。
        </section>

        <section class="content" id="contact">
            お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。
        </section>
    </div>

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

</html>

css/styles.css

body {
    font-size: 14px;
}

.container {
    margin: 30px auto;
    width: 500px;
}

.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.menu li a {
    display: inline-block;
    width: 100px;
    text-align: center;
    padding: 8px 0;
    color: #333;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
}

.menu li a.active {
    background: #333;
    color: #fff;
}

.menu li a:not(.active):hover {
    opacity: 0.5;
    transition: opacity 0.4s;
}

.content.active {
    background: #333;
    color: #fff;
    min-height: 150px;
    padding: 12px;
    display: block;
}

.content {
    display: none;
}

js/main.js

'use strict';

{
    const menuItems = document.querySelectorAll('.menu li a');
    const contents = document.querySelectorAll('.content');

    menuItems.forEach(clickedItem => {
        clickedItem.addEventListener('click', e => {
            e.preventDefault();

            menuItems.forEach(item => {
                item.classList.remove('active');
            });
            clickedItem.classList.add('active');

            contents.forEach(content => {
                content.classList.remove('active');
            });
            document.getElementById(clickedItem.dataset.id).classList.add('active');
        });
    });
}

MyHamburgerMenu

index.html

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

<head>
  <meta charset="utf-8">
  <title>FAQ</title>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <h1>FAQ</h1>
  <dl>
    <div>
      <dt>質問です</dt>
      <dd>回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。</dd>
    </div>
    <div>
      <dt>質問です</dt>
      <dd>回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。</dd>
    </div>
    <div>
      <dt>質問です</dt>
      <dd>回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。</dd>
    </div>
  </dl>

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

</html>

style.css

h1 {
    font-size: 18px;
    border-bottom: 1px solid;
    padding: 8px 16px;
    margin-bottom: 16px;
}

dl {
    margin: 0;
}

dl>div {
    margin-bottom: 8px;
}

dt {
    padding: 8px;
    cursor: pointer;
    user-select: none;
    position: relative;
}

dt::before {
    content: 'Q. ';
}

dt::after {
    content: '+';
    position: absolute;
    top: 8px;
    right: 16px;
    transition: transform .3s;
}

dl>div.appear dt::after {
    transform: rotate(45deg);
}

dd {
    padding: 8px;
    margin: 0;
    display: none;
}

dd::before {
    content: 'A .';
}

dl>div.appear dd {
    display: block;
    animation: .3s fadeIn;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

main.js

'use strict';

{
  const dts = document.querySelectorAll('dt');

  dts.forEach(dt => {
    dt.addEventListener('click', () => {
      dt.parentNode.classList.toggle('appear');
    });
  });
}

高度なコード比較サイト

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
137
138
139
140
141
142
143
144
<span class="dec"><!DOCTYPE html></span><span class="pln">
</span><span class="tag"><html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"ja"</span><span class="tag">></span><span class="pln">
</span><span class="tag"><head></span><span class="pln">
  </span><span class="tag"><meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"UTF-8"</span><span class="tag">></span><span class="pln">
  </span><span class="tag"><meta</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"viewport"</span><span class="pln"> </span><span class="atn">content</span><span class="pun">=</span><span class="atv">"width=device-width, initial-scale=1.0"</span><span class="tag">></span><span class="pln">
  </span><span class="tag"><title></span><span class="pln">高度なコード比較サイト</span><span class="tag"></title></span><span class="pln">
  </span><span class="tag"><style></span><span class="pln">
    body </span><span class="pun">{</span><span class="pln">
      font</span><span class="pun">-</span><span class="pln">family</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Arial</span><span class="pun">,</span><span class="pln"> sans</span><span class="pun">-</span><span class="pln">serif</span><span class="pun">;</span><span class="pln">
      background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#f4f4f4;</span><span class="pln">
      margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">
      padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
 
    </span><span class="pun">.</span><span class="pln">container </span><span class="pun">{</span><span class="pln">
      width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">90</span><span class="pun">%;</span><span class="pln">
      max</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">900px</span><span class="pun">;</span><span class="pln">
      margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pln"> </span><span class="kwd">auto</span><span class="pun">;</span><span class="pln">
      background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#fff;</span><span class="pln">
      box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">10px</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.1</span><span class="pun">);</span><span class="pln">
      padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln">
      border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
 
    h1 </span><span class="pun">{</span><span class="pln">
      text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln"> center</span><span class="pun">;</span><span class="pln">
      margin</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln">
      color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#333;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
 
    </span><span class="pun">.</span><span class="pln">code</span><span class="pun">-</span><span class="pln">input </span><span class="pun">{</span><span class="pln">
      display</span><span class="pun">:</span><span class="pln"> flex</span><span class="pun">;</span><span class="pln">
      justify</span><span class="pun">-</span><span class="pln">content</span><span class="pun">:</span><span class="pln"> space</span><span class="pun">-</span><span class="pln">between</span><span class="pun">;</span><span class="pln">
      margin</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln">
      gap</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
 
    textarea </span><span class="pun">{</span><span class="pln">
      width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">48</span><span class="pun">%;</span><span class="pln">
      height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">300px</span><span class="pun">;</span><span class="pln">
      font</span><span class="pun">-</span><span class="pln">family</span><span class="pun">:</span><span class="pln"> monospace</span><span class="pun">;</span><span class="pln">
      font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">14px</span><span class="pun">;</span><span class="pln">
      padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln">
      border</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1px</span><span class="pln"> solid </span><span class="com">#ddd;</span><span class="pln">
      border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pun">;</span><span class="pln">
      resize</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln">
      background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#f9f9f9;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
 
    </span><span class="pun">.</span><span class="pln">buttons </span><span class="pun">{</span><span class="pln">
      display</span><span class="pun">:</span><span class="pln"> flex</span><span class="pun">;</span><span class="pln">
      justify</span><span class="pun">-</span><span class="pln">content</span><span class="pun">:</span><span class="pln"> center</span><span class="pun">;</span><span class="pln">
      gap</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
 
    button </span><span class="pun">{</span><span class="pln">
      padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln">
      background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#007BFF;</span><span class="pln">
      color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#fff;</span><span class="pln">
      border</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln">
      border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pun">;</span><span class="pln">
      cursor</span><span class="pun">:</span><span class="pln"> pointer</span><span class="pun">;</span><span class="pln">
      font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">16px</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
 
    button</span><span class="pun">:</span><span class="pln">hover </span><span class="pun">{</span><span class="pln">
      background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#0056b3;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
 
    </span><span class="com">#result {</span><span class="pln">
      white</span><span class="pun">-</span><span class="pln">space</span><span class="pun">:</span><span class="pln"> pre</span><span class="pun">-</span><span class="pln">wrap</span><span class="pun">;</span><span class="pln">
      font</span><span class="pun">-</span><span class="pln">family</span><span class="pun">:</span><span class="pln"> monospace</span><span class="pun">;</span><span class="pln">
      background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#f8f9fa;</span><span class="pln">
      padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln">
      border</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1px</span><span class="pln"> solid </span><span class="com">#ddd;</span><span class="pln">
      border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pun">;</span><span class="pln">
      max</span><span class="pun">-</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">300px</span><span class="pun">;</span><span class="pln">
      overflow</span><span class="pun">-</span><span class="pln">y</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">auto</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
 
    </span><span class="pun">.</span><span class="pln">highlight </span><span class="pun">{</span><span class="pln">
      background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#ffcccc;</span><span class="pln">
      font</span><span class="pun">-</span><span class="pln">weight</span><span class="pun">:</span><span class="pln"> bold</span><span class="pun">;</span><span class="pln">
      color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#d9534f;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
 
    </span><span class="pun">.</span><span class="pln">line </span><span class="pun">{</span><span class="pln">
      border</span><span class="pun">-</span><span class="pln">left</span><span class="pun">:</span><span class="pln"> </span><span class="lit">4px</span><span class="pln"> solid </span><span class="com">#ccc;</span><span class="pln">
      padding</span><span class="pun">-</span><span class="pln">left</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln">
      margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
  </span><span class="tag"></style></span><span class="pln">
</span><span class="tag"></head></span><span class="pln">
</span><span class="tag"><body></span><span class="pln">
  </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"container"</span><span class="tag">></span><span class="pln">
    </span><span class="tag"><h1></span><span class="pln">高度なコード比較ツール</span><span class="tag"></h1></span><span class="pln">
    </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"code-input"</span><span class="tag">></span><span class="pln">
      </span><span class="tag"><textarea</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"code1"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"コード1を入力..."</span><span class="tag">></textarea></span><span class="pln">
      </span><span class="tag"><textarea</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"code2"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"コード2を入力..."</span><span class="tag">></textarea></span><span class="pln">
    </span><span class="tag"></div></span><span class="pln">
    </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"buttons"</span><span class="tag">></span><span class="pln">
      </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">compareCodes</span><span class="pun">()</span><span class="atv">"</span><span class="tag">></span><span class="pln">比較する</span><span class="tag"></button></span><span class="pln">
      </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">clearFields</span><span class="pun">()</span><span class="atv">"</span><span class="tag">></span><span class="pln">クリア</span><span class="tag"></button></span><span class="pln">
    </span><span class="tag"></div></span><span class="pln">
    </span><span class="tag"><h3></span><span class="pln">比較結果</span><span class="tag"></h3></span><span class="pln">
    </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"result"</span><span class="tag">></span><span class="pln">
      </span><span class="com"><!-- 結果表示エリア --></span><span class="pln">
    </span><span class="tag"></div></span><span class="pln">
  </span><span class="tag"></div></span><span class="pln">
  </span><span class="tag"><script></span><span class="pln">
    </span><span class="kwd">function</span><span class="pln"> compareCodes</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="kwd">const</span><span class="pln"> code1 </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'code1'</span><span class="pun">).</span><span class="pln">value</span><span class="pun">.</span><span class="pln">split</span><span class="pun">(</span><span class="str">'\n'</span><span class="pun">);</span><span class="pln">
      </span><span class="kwd">const</span><span class="pln"> code2 </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'code2'</span><span class="pun">).</span><span class="pln">value</span><span class="pun">.</span><span class="pln">split</span><span class="pun">(</span><span class="str">'\n'</span><span class="pun">);</span><span class="pln">
      </span><span class="kwd">const</span><span class="pln"> resultContainer </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'result'</span><span class="pun">);</span><span class="pln">
      resultContainer</span><span class="pun">.</span><span class="pln">innerHTML </span><span class="pun">=</span><span class="pln"> </span><span class="str">''</span><span class="pun">;</span><span class="pln">
 
      </span><span class="kwd">const</span><span class="pln"> maxLength </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">max</span><span class="pun">(</span><span class="pln">code1</span><span class="pun">.</span><span class="pln">length</span><span class="pun">,</span><span class="pln"> code2</span><span class="pun">.</span><span class="pln">length</span><span class="pun">);</span><span class="pln">
 
      </span><span class="kwd">for</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">let</span><span class="pln"> i </span><span class="pun">=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> i </span><span class="pun"><</span><span class="pln"> maxLength</span><span class="pun">;</span><span class="pln"> i</span><span class="pun">++)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="kwd">const</span><span class="pln"> line1 </span><span class="pun">=</span><span class="pln"> code1</span><span class="pun">[</span><span class="pln">i</span><span class="pun">]</span><span class="pln"> </span><span class="pun">||</span><span class="pln"> </span><span class="str">''</span><span class="pun">;</span><span class="pln">
        </span><span class="kwd">const</span><span class="pln"> line2 </span><span class="pun">=</span><span class="pln"> code2</span><span class="pun">[</span><span class="pln">i</span><span class="pun">]</span><span class="pln"> </span><span class="pun">||</span><span class="pln"> </span><span class="str">''</span><span class="pun">;</span><span class="pln">
        </span><span class="kwd">const</span><span class="pln"> lineClass </span><span class="pun">=</span><span class="pln"> line1 </span><span class="pun">!==</span><span class="pln"> line2 </span><span class="pun">?</span><span class="pln"> </span><span class="str">'highlight'</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="str">''</span><span class="pun">;</span><span class="pln">
 
        resultContainer</span><span class="pun">.</span><span class="pln">innerHTML </span><span class="pun">+=</span><span class="pln"> </span><span class="pun">`</span><span class="pln">
          </span><span class="pun"><</span><span class="pln">div </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"line"</span><span class="pun">></span><span class="pln">
            </span><span class="pun"><</span><span class="pln">strong</span><span class="pun">>行</span><span class="pln"> $</span><span class="pun">{</span><span class="pln">i </span><span class="pun">+</span><span class="pln"> </span><span class="lit">1</span><span class="pun">}:</</span><span class="pln">strong</span><span class="pun">></span><span class="pln">
            </span><span class="pun"><</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"${lineClass}"</span><span class="pun">>コード</span><span class="lit">1</span><span class="pun">:</span><span class="pln"> </span><span class="str">"${line1}"</span><span class="pun"></</span><span class="pln">span</span><span class="pun">></span><span class="pln"> </span><span class="pun">|</span><span class="pln">
            </span><span class="pun"><</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"${lineClass}"</span><span class="pun">>コード</span><span class="lit">2</span><span class="pun">:</span><span class="pln"> </span><span class="str">"${line2}"</span><span class="pun"></</span><span class="pln">span</span><span class="pun">></span><span class="pln">
          </span><span class="pun"></</span><span class="pln">div</span><span class="pun">>`;</span><span class="pln">
      </span><span class="pun">}</span><span class="pln">
 
      </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(!</span><span class="pln">resultContainer</span><span class="pun">.</span><span class="pln">innerHTML</span><span class="pun">.</span><span class="pln">trim</span><span class="pun">())</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        resultContainer</span><span class="pun">.</span><span class="pln">innerHTML </span><span class="pun">=</span><span class="pln"> </span><span class="str">'<div>コードに違いはありません。</div>'</span><span class="pun">;</span><span class="pln">
      </span><span class="pun">}</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
 
    </span><span class="kwd">function</span><span class="pln"> clearFields</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'code1'</span><span class="pun">).</span><span class="pln">value </span><span class="pun">=</span><span class="pln"> </span><span class="str">''</span><span class="pun">;</span><span class="pln">
      document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'code2'</span><span class="pun">).</span><span class="pln">value </span><span class="pun">=</span><span class="pln"> </span><span class="str">''</span><span class="pun">;</span><span class="pln">
      document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'result'</span><span class="pun">).</span><span class="pln">innerHTML </span><span class="pun">=</span><span class="pln"> </span><span class="str">''</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
  </span><span class="tag"></script></span><span class="pln">
</span><span class="tag"></body></span><span class="pln">
</span><span class="tag"></html></span>
<!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;
      background-color: #f4f4f4;
      margin: 0;
      padding: 0;
    }

    .container {
      width: 90%;
      max-width: 900px;
      margin: 20px auto;
      background: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      padding: 20px;
      border-radius: 5px;
    }

    h1 {
      text-align: center;
      margin-bottom: 20px;
      color: #333;
    }

    .code-input {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      gap: 10px;
    }

    textarea {
      width: 48%;
      height: 300px;
      font-family: monospace;
      font-size: 14px;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
      resize: none;
      background-color: #f9f9f9;
    }

    .buttons {
      display: flex;
      justify-content: center;
      gap: 10px;
    }

    button {
      padding: 10px 20px;
      background: #007BFF;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
    }

    button:hover {
      background: #0056b3;
    }

    #result {
      white-space: pre-wrap;
      font-family: monospace;
      background-color: #f8f9fa;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
      max-height: 300px;
      overflow-y: auto;
    }

    .highlight {
      background-color: #ffcccc;
      font-weight: bold;
      color: #d9534f;
    }

    .line {
      border-left: 4px solid #ccc;
      padding-left: 10px;
      margin: 5px 0;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>高度なコード比較ツール</h1>
    <div class="code-input">
      <textarea id="code1" placeholder="コード1を入力..."></textarea>
      <textarea id="code2" placeholder="コード2を入力..."></textarea>
    </div>
    <div class="buttons">
      <button onclick="compareCodes()">比較する</button>
      <button onclick="clearFields()">クリア</button>
    </div>
    <h3>比較結果</h3>
    <div id="result">
      <!-- 結果表示エリア -->
    </div>
  </div>
  <script>
    function compareCodes() {
      const code1 = document.getElementById('code1').value.split('\n');
      const code2 = document.getElementById('code2').value.split('\n');
      const resultContainer = document.getElementById('result');
      resultContainer.innerHTML = '';

      const maxLength = Math.max(code1.length, code2.length);

      for (let i = 0; i < maxLength; i++) {
        const line1 = code1[i] || '';
        const line2 = code2[i] || '';
        const lineClass = line1 !== line2 ? 'highlight' : '';

        resultContainer.innerHTML += `
          <div class="line">
            <strong>行 ${i + 1}:</strong>
            <span class="${lineClass}">コード1: "${line1}"</span> |
            <span class="${lineClass}">コード2: "${line2}"</span>
          </div>`;
      }

      if (!resultContainer.innerHTML.trim()) {
        resultContainer.innerHTML = '<div>コードに違いはありません。</div>';
      }
    }

    function clearFields() {
      document.getElementById('code1').value = '';
      document.getElementById('code2').value = '';
      document.getElementById('result').innerHTML = '';
    }
  </script>
</body>
</html>

CSS ヘッダーのスタイルの変更

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
<span class="pln">body </span><span class="pun">{</span><span class="pln">
    margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">
    font</span><span class="pun">-</span><span class="pln">family</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Verdana</span><span class="pun">,</span><span class="pln"> sans</span><span class="pun">-</span><span class="pln">serif</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
 
header </span><span class="pun">{</span><span class="pln">
    display</span><span class="pun">:</span><span class="pln"> flex</span><span class="pun">;</span><span class="pln">
    padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">16px</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
 
header h1 </span><span class="pun">{</span><span class="pln">
    margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">
    font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">22px</span><span class="pun">;</span><span class="pln">
    line</span><span class="pun">-</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">64px</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
 
</span><span class="pun">.</span><span class="pln">sp</span><span class="pun">-</span><span class="pln">menu </span><span class="pun">{</span><span class="pln">
    margin</span><span class="pun">-</span><span class="pln">left</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">auto</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
 
</span><span class="pun">.</span><span class="pln">sp</span><span class="pun">-</span><span class="pln">menu </span><span class="com">#open {</span><span class="pln">
    font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">32px</span><span class="pun">;</span><span class="pln">
    line</span><span class="pun">-</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">64px</span><span class="pun">;</span><span class="pln">
    cursor</span><span class="pun">:</span><span class="pln"> pointer</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
 
main </span><span class="pun">{</span><span class="pln">
    padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">16px</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span>
body {
    margin: 0;
    font-family: Verdana, sans-serif;
}

header {
    display: flex;
    padding: 0 16px;
}

header h1 {
    margin: 0;
    font-size: 22px;
    line-height: 64px;
}

.sp-menu {
    margin-left: auto;
}

.sp-menu #open {
    font-size: 32px;
    line-height: 64px;
    cursor: pointer;
}

main {
    padding: 0 16px;
}

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>