Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Atsu1209jp(Atsu1209)

ChatGPT使えば結構いい感じのサイト作れるんじゃね?というお話。 Part2

Posted at

こんにちはAtsu1209です。
今日は前に書いた
ChatGPT使えば結構いい感じのサイト作れるんじゃね?というお話。
という記事の続きみたいなものになります。
前回の記事↓↓↓

前回やったこと

前回は適当なHTMLをChatGPTにCSSを書いてもらっていい感じのサイトにする
ということをやりました。

今回やること

今回はJavaScriptを書いてもらって更にいい感じにしてもらいます。

前回のコード

index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Atsu1209</title>
  <meta name="description" content="Atsu1209紹介ページ" />
  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css" />
  <link href="https://fonts.googleapis.com/css2?family=Philosopher" rel="stylesheet" />    
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <style>
    /* 以下に先ほどのCSSスタイルを追加 */
    body {
      font-family: 'Philosopher', sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f2f2f2;
    }

    .header {
      background-color: #3498db;
      color: white;
      padding: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .header-logo {
      font-size: 24px;
      font-weight: bold;
    }

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

    .header-list li {
      display: inline-block;
      margin-left: 20px;
      font-size: 16px;
      cursor: pointer;
    }

    .main {
      padding: 20px;
      text-align: center;
    }

    .main h1 {
      font-size: 36px;
    }

    .flow-text {
      font-size: 18px;
      margin: 10px 0;
    }

    .footer {
      background-color: #34495e;
      color: white;
      padding: 10px 0;
      text-align: center;
    }

    .footer-logo {
      font-size: 20px;
      font-weight: bold;
    }

    .footer-list {
      list-style: none;
      padding: 0;
    }

    .footer-list li {
      font-size: 14px;
    }

    @media screen and (max-width: 768px) {
      .header {
        flex-direction: column;
        text-align: center;
      }

      .header-list {
        margin-top: 20px;
      }

      .header-list li {
        display: block;
        margin: 10px 0;
      }
    }
  </style>
</head>
<body>
  <div class="fade">
    <div class="hey">
      <div class="header">
        <div class="header-logo">Atsu1209</div>
        <div class="header-list">
          <ul>
            <li class="flow-text">自己紹介ページ</li>
          </ul>
        </div>
      </div>    
    </div>
  
    <div class="main">
      <h1>Atsu1209</h1>
      <h5>プロフィール</h5>
      <h6 class="flow-text">基本暇人 HTML+CSS+JavaScriptが一番得意</h6>
      <h6 class="flow-text">最近はいたずらでウィルス警告画面を作った</h6>
      <h6 class="flow-text">プログラムは小学6年生からPC自体は3,4歳の頃から。</h6>
      <h6 class="flow-text">PCに興味持ち始めたのは小学3年生から</h6>
    </div>
  
    <div class="footer">
      <div class="footer-logo">Atsu1209</div>
      <div class="footer-list">
        <li>CopyLight©2023-Atsu1209</li>
      </div>  
    </div>
  </div>
</body>
</html>

aaaa.png

こんなのができた。

ChatGPT

ではこのサイトに良さげなJavaScriptを追加してくださいと入れます。
するとこれが返された。

index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Atsu1209</title>
  <meta name="description" content="Atsu1209紹介ページ" />
  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css" />
  <link href="https://fonts.googleapis.com/css2?family=Philosopher" rel="stylesheet" />    
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <style>
    body {
      font-family: 'Philosopher', sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f2f2f2;
    }

    .header {
      background-color: #3498db;
      color: white;
      padding: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .header-logo {
      font-size: 24px;
      font-weight: bold;
    }

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

    .header-list li {
      display: inline-block;
      margin-left: 20px;
      font-size: 16px;
      cursor: pointer;
    }

    .main {
      padding: 20px;
      text-align: center;
      opacity: 0;
    }

    .main h1 {
      font-size: 36px;
    }

    .flow-text {
      font-size: 18px;
      margin: 10px 0;
    }

    .footer {
      background-color: #34495e;
      color: white;
      padding: 10px 0;
      text-align: center;
    }

    .footer-logo {
      font-size: 20px;
      font-weight: bold;
    }

    .footer-list {
      list-style: none;
      padding: 0;
    }

    .footer-list li {
      font-size: 14px;
    }

    @media screen and (max-width: 768px) {
      .header {
        flex-direction: column;
        text-align: center;
      }

      .header-list {
        margin-top: 20px;
      }

      .header-list li {
        display: block;
        margin: 10px 0;
      }
    }
  </style>
</head>
<body>
  <div class="fade" style="display: none;">
    <div class="hey">
      <div class="header">
        <div class="header-logo">Atsu1209</div>
        <div class="header-list">
          <ul>
            <li class="flow-text">自己紹介ページ</li>
          </ul>
        </div>
      </div>    
    </div>
  
    <div class="main">
      <h1>Atsu1209</h1>
      <h5>プロフィール</h5>
      <h6 class="flow-text">基本暇人 HTML+CSS+JavaScriptが一番得意</h6>
      <h6 class="flow-text">最近はいたずらでウィルス警告画面を作った</h6>
      <h6 class="flow-text">プログラムは小学6年生からPC自体は3,4歳の頃から。</h6>
      <h6 class="flow-text">PCに興味持ち始めたのは小学3年生から</h6>
    </div>
  
    <div class="footer">
      <div class="footer-logo">Atsu1209</div>
      <div class="footer-list">
        <li>CopyLight©2023-Atsu1209</li>
      </div>  
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('.fade').fadeIn(1000);

      $(window).scroll(function() {
        var windowHeight = $(window).height();
        var scrollPosition = $(window).scrollTop();
        $('.main').each(function() {
          var targetPosition = $(this).offset().top;
          if (scrollPosition > targetPosition - windowHeight + 100) {
            $(this).animate({ opacity: 1 }, 1000);
          }
        });
      });
    });
  </script>
</body>
</html>

このJavaScriptは、ページが読み込まれた後にフェードインするだけでなく、スクロールされるとメインコンテンツがフェードインします。

実際に動かす

こんな感じになった。

まとめ

ChatGPTあんまりJavaScriptは得意じゃないみたいです
かなり適当な記事になりましたが以上です
では

1
0
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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?