LoginSignup
2
2
この記事誰得？ 私しか得しないニッチな技術で記事投稿！
Qiita Engineer Festa20242024年7月17日まで開催中！
@Atsu1209jp(Atsu1209)inStedTechOrganization

プログラマーが落ち着かなくなるコードを書いてみた #3

Posted at

こんにちはAtsu1209です。
今回はエンジニアが落ち着かなくなるコードを書いてみた 第三回です

第一回

第二回

番外編

今回作るもの

今回は作るもの自体はまともですが、コメントアウトを大量に入れて
恐怖を覚えさせたいと思います。

今回はブログのHTML部分をかいて行きます。
ブログのHTML部分のコードは以前の記事から流用します。

記事↓

HTML

前回ChatGPTが書いたHTMLがこちらです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ブログサイト</title>
</head>
<style>
/* リセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ベーススタイル */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
    padding: 20px;
}

/* ヘッダー */
header {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

header h1 {
    margin-bottom: 10px;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.3s;
}

nav ul li a:hover {
    background-color: #575757;
}

/* メインコンテンツ */
main {
    margin: 20px 0;
}

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

article h2 {
    color: #333;
    margin-bottom: 10px;
}

article p {
    margin-bottom: 10px;
}

/* フッター */
footer {
    text-align: center;
    padding: 20px 0;
    background-color: #333;
    color: #fff;
    border-top: 5px solid #575757;
}

footer p {
    margin: 0;
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
    nav ul li {
        display: block;
        margin-bottom: 10px;
    }

    header h1 {
        font-size: 24px;
    }

    article {
        padding: 10px;
    }
}

</style>
<body>
    <header>
        <h1>私のブログ</h1>
        <nav>
            <ul>
                <li><a href="#home">ホーム</a></li>
                <li><a href="#about">私について</a></li>
                <li><a href="#contact">連絡先</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>最初のブログ記事</h2>
            <p>これは最初のブログ記事の内容です。ここにテキストを追加します。</p>
            <p>更に内容を追加する場合は、このように段落を増やします。</p>
        </article>
        
        <article>
            <h2>二番目のブログ記事</h2>
            <p>これは二番目のブログ記事の内容です。ここにテキストを追加します。</p>
            <p>更に内容を追加する場合は、このように段落を増やします。</p>
        </article>
    </main>
    
    <footer>
        <p>&copy; 2024 私のブログ. All rights reserved.</p>
    </footer>
</body>
</html>

ブログサイト-1.png

こんな感じ

ただの恐怖

ではクソ化しましょう
まずは恐怖の文字列
/*これ消すと動かなくなるから消しちゃダメ!*/を書きます。
実際に消しても動きますが、定番なので書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ブログサイト</title>
</head>
<style>
/*これ消すと動かなくなるから消しちゃダメ!*/
/* リセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/* ベーススタイル */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
    padding: 20px;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/* ヘッダー */
header {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
header h1 {
    margin-bottom: 10px;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
nav ul {
    list-style: none;
    padding: 0;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
nav ul li {
    display: inline;
    margin-right: 10px;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.3s;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
nav ul li a:hover {
    background-color: #575757;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/* メインコンテンツ */
main {
    margin: 20px 0;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
article {
    background-color: #fff;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
/*これ消すと動かなくなるから消しちゃダメ!*/
article h2 {
    color: #333;
    margin-bottom: 10px;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
article p {
    margin-bottom: 10px;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/* フッター */
footer {
    text-align: center;
    padding: 20px 0;
    background-color: #333;
    color: #fff;
    border-top: 5px solid #575757;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
footer p {
    margin: 0;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/* レスポンシブデザイン */
@media (max-width: 768px) {
    nav ul li {
        display: block;
        margin-bottom: 10px;
    }

    header h1 {
        font-size: 24px;
    }

    article {
        padding: 10px;
    }
}

</style>
<body>
    <header>
        <h1>私のブログ</h1>
        <nav>
            <ul>
                <li><a href="#home">ホーム</a></li>
                <li><a href="#about">私について</a></li>
                <li><a href="#contact">連絡先</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>最初のブログ記事</h2>
            <p>これは最初のブログ記事の内容です。ここにテキストを追加します。</p>
            <p>更に内容を追加する場合は、このように段落を増やします。</p>
        </article>
        
        <article>
            <h2>二番目のブログ記事</h2>
            <p>これは二番目のブログ記事の内容です。ここにテキストを追加します。</p>
            <p>更に内容を追加する場合は、このように段落を増やします。</p>
        </article>
    </main>
    
    <footer>
        <p>&copy; 2024 私のブログ. All rights reserved.</p>
    </footer>
</body>
</html>

とりあえず書けるだけ書いておきました

いらん説明

次にコメントアウトで見ればわかることを説明していきます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ブログサイト</title>
</head>
<style>
/*これ消すと動かなくなるから消しちゃダメ!*/
/* リセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/* ベーススタイル */
/*bodyのスタイル*/
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
    padding: 20px;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/* ヘッダー */
/*ヘッダーのスタイル*/
header {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/*ヘッダーのh1のスタイル*/
header h1 {
    margin-bottom: 10px;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/*navのulのスタイル*/
nav ul {
    list-style: none;
    padding: 0;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/*navのulのliのスタイル*/
nav ul li {
    display: inline;
    margin-right: 10px;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/*navのulのliのaのスタイル*/
nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.3s;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/*navのulのliのaのホバー時のスタイル*/
nav ul li a:hover {
    background-color: #575757;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/* メインコンテンツ */
/*mainのスタイル*/
main {
    margin: 20px 0;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/*articleのスタイル*/
article {
    background-color: #fff;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/*articleのh2のスタイル*/
article h2 {
    color: #333;
    margin-bottom: 10px;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/*articleのpのスタイル*/
article p {
    margin-bottom: 10px;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/* フッター */
/*フッターのスタイル*/
footer {
    text-align: center;
    padding: 20px 0;
    background-color: #333;
    color: #fff;
    border-top: 5px solid #575757;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/*フッターのpのすた*/
footer p {
    margin: 0;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/* レスポンシブデザイン */
@media (max-width: 768px) {
    nav ul li {
        display: block;
        margin-bottom: 10px;
    }

    header h1 {
        font-size: 24px;
    }

    article {
        padding: 10px;
    }
}

</style>
<body>
    <? ここからヘッダー ?>
    <header>
        <? ブログのh1 ?>
        <h1>私のブログ</h1>
        <? navだよ ?>
        <nav>
            <ul>
                <? liだよ ?>
                <li><a href="#home">ホーム</a></li>
                <? liだよ ?>
                <li><a href="#about">私について</a></li>
                <? liだよ ?>
                <li><a href="#contact">連絡先</a></li>
            </ul>
        </nav>
    </header>
   <? mainだよ ?> 
    <main>
        <? articleだよ ?>
        <article>
        <? ブログ記事のタイトルだよ ?>
            <h2>最初のブログ記事</h2>
            <? ブログの説明だよ ?>
            <p>これは最初のブログ記事の内容です。ここにテキストを追加します。</p>
            <? ブログの説明だよ ?>
            <p>更に内容を追加する場合は、このように段落を増やします。</p>
        </article>
        
        <? articleだよ ?>
        <article>
            <? ブログ記事のタイトルだよ ?>
            <h2>二番目のブログ記事</h2>
             <? ブログの説明だよ ?>
            <p>これは二番目のブログ記事の内容です。ここにテキストを追加します。</p>
             <? ブログの説明だよ ?>
            <p>更に内容を追加する場合は、このように段落を増やします。</p>
        </article>
    </main>

    <? フッター ?>
    <footer>
        <p>&copy; 2024 私のブログ. All rights reserved.</p>
    </footer>
</body>
</html>

かなりうるさくなりましたね

絵文字の多様

さらにうるさくしていきます
コメントアウトに絵文字を使ってやりましょう

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ブログサイト</title>
</head>
<style>
/* これ消すと動かなくなるから消しちゃダメ!🙅 */
/* リセット⭐ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* これ消すと動かなくなるから消しちゃダメ!🙅 */
/* ベーススタイル🌞 */
/* bodyのスタイル🐔 */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
    padding: 20px;
}
/* これ消すと動かなくなるから消しちゃダメ!🙅 */
/* ヘッダー🧠 */
/* ヘッダーのスタイル🧠🐔 */
header {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}
/* これ消すと動かなくなるから消しちゃダメ!🙅 */
/* ヘッダーのh1のスタイル📝 */
header h1 {
    margin-bottom: 10px;
}
/* これ消すと動かなくなるから消しちゃダメ!🙅 */
/* navのulのスタイル🚢 */
nav ul {
    list-style: none;
    padding: 0;
}
/* これ消すと動かなくなるから消しちゃダメ!🙅 */
/* navのulのliのスタイル📄 */
nav ul li {
    display: inline;
    margin-right: 10px;
}
/* これ消すと動かなくなるから消しちゃダメ!🙅 */
/* navのulのliのaのスタイル🔗 */
nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.3s;
}
/* これ消すと動かなくなるから消しちゃダメ!🙅 */
/* navのulのliのaのホバー時のスタイル🖱️ */
nav ul li a:hover {
    background-color: #575757;
}
/* これ消すと動かなくなるから消しちゃダメ!🙅 */
/* メインコンテンツ📝 */
/* mainのスタイル🌟 */
main {
    margin: 20px 0;
}
/* これ消すと動かなくなるから消しちゃダメ!🙅 */
/* articleのスタイル📚 */
article {
    background-color: #fff;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
/* これ消すと動かなくなるから消しちゃダメ!🙅 */
/* articleのh2のスタイル📝 */
article h2 {
    color: #333;
    margin-bottom: 10px;
}
/* これ消すと動かなくなるから消しちゃダメ!🙅 */
/* articleのpのスタイル📜 */
article p {
    margin-bottom: 10px;
}
/* これ消すと動かなくなるから消しちゃダメ!🙅 */
/* フッター👣 */
/* フッターのスタイル💬 */
footer {
    text-align: center;
    padding: 20px 0;
    background-color: #333;
    color: #fff;
    border-top: 5px solid #575757;
}
/* これ消すと動かなくなるから消しちゃダメ!🙅 */
/* フッターのpのスタイル📝 */
footer p {
    margin: 0;
}
/* これ消すと動かなくなるから消しちゃダメ!🙅 */
/* レスポンシブデザイン📱 */
@media (max-width: 768px) {
    nav ul li {
        display: block;
        margin-bottom: 10px;
    }

    header h1 {
        font-size: 24px;
    }

    article {
        padding: 10px;
    }
}

</style>
<body>
    <? ここからヘッダー 🙇 ?>
    <header>
        <? ブログのh1 📝 ?>
        <h1>私のブログ</h1>
        <? navだよ 🚢 ?>
        <nav>
            <ul>
                <? liだよ 📄 ?>
                <li><a href="#home">ホーム</a></li>
                <? liだよ 📄 ?>
                <li><a href="#about">私について</a></li>
                <? liだよ 📄 ?>
                <li><a href="#contact">連絡先</a></li>
            </ul>
        </nav>
    </header>
   <? mainだよ 🌟 ?> 
    <main>
        <? articleだよ 📚 ?>
        <article>
        <? ブログ記事のタイトルだよ 📝 ?>
            <h2>最初のブログ記事</h2>
            <? ブログの説明だよ 📜 ?>
            <p>これは最初のブログ記事の内容です。ここにテキストを追加します。</p>
            <? ブログの説明だよ 📜 ?>
            <p>更に内容を追加する場合は、このように段落を増やします。</p>
        </article>
        
        <? articleだよ 📚 ?>
        <article>
            <? ブログ記事のタイトルだよ 📝 ?>
            <h2>二番目のブログ記事</h2>
             <? ブログの説明だよ 📜 ?>
            <p>これは二番目のブログ記事の内容です。ここにテキストを追加します。</p>
             <? ブログの説明だよ 📜 ?>
            <p>更に内容を追加する場合は、このように段落を増やします。</p>
        </article>
    </main>

    <? フッター 👣 ?>
    <footer>
        <p>&copy; 2024 私のブログ. All rights reserved.</p>
    </footer>
</body>
</html>

うん うるさくなった☆

最後に

コメントアウトはあったほうが良いですが、ありすぎたりよくわからんことを書いてあったら
なんか落ち着かないですよね

少なくとも職場ではやめましょう
では次の記事で

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
2