ChatGPTでHTMLコーディングをしてみた

ChatGPTでコーディングできるという動画を見て実際にやってみました。

https://youtu.be/_kDEghOAYF8

ほぼ動画のやり方を参考にしていますが、もう少しきれいに作るためにいくつか調整もしています。

なお、完成したWEBサイトはこちらです。

1. 使用したツール
2. 実際のやり取りを解説
- 2.1. bootstrap4の雛形のコードを教えて
3. より具体的に指示をすると的確に答えてくれる
- 3.1. かっこいいレスポンシブ対応のナビゲーションバーのソースコードを教えて
- 3.2. そのCSSを教えて
4. 前のやり取りをちゃんと継承する
5. 最後に

使用したツール

使用したツールは以下。動画で使っていたものだけです。

ChatGPT
VS Code
O-DAN

他に使っているものはありません。サーバーはこのブログのサーバーにUPしてあります。

実際のやり取りを解説

早速、実際のやり取りを解説していきたいと思います。

まず、こちらから指示したのは、どのようなフレームワークを使ってHTMLを作っていくかです。

bootstrap4の雛形のコードを教えて

Bootstrap 4の最も基本的なHTML雛形のコードは次のようになります。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <title>Bootstrap Example</title>
</head>
<body>
  <div class="container">
    <h1>Hello, Bootstrap 4!</h1>
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>

この例では、Bootstrap 4のCSSファイル、jQuery、Popper.js、そしてBootstrap 4のJavaScriptファイルを読み込んでいます。”container”クラスを使用して、文字を中央に配置しています。

注意: Bootstrap 4では、Popper.jsがjQueryの代わりに必要になりました。

また、このコードでは、BootstrapCDNからCSSとJSを取得しています。 BootstrapCDNを使用することで、Bootstrapの最新バージョンを使用できます。

より具体的に指示をすると的確に答えてくれる

動画では、レスポンシブデザインという表現を使っていましたが、レスポンシブデザインで最もポピュラーなフレームワークであるBootstrapで指示を出しました。

実は、この指示の前にBootstrapとだけ指示を出したところBootstrap3でコーディングを始めたので、あえてVer.4をしていています。

これは、ChatGPTが知っている内容であれば、どのようなフレームワークでも適用は可能だといえます。

ただ、仕様としてデフォルト言語が英語になっているようなので、lang=enとなっていました。

ここは、jaに日本語に帰る必要はあります。

次にナビゲーションバー、コンテンツと作成を続けて行きます。

かっこいいレスポンシブ対応のナビゲーションバーのソースコードを教えて

Bootstrap 4を使用して、レスポンシブ対応のナビゲーションバーを作成するためのHTMLコードを次に示します。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">My Website</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

このコードでは、”navbar”、”navbar-expand-lg”、”navbar-light”、”bg-light”クラスを使用して、ナビゲーションバーを作成しています。”navbar-brand”クラスを使用して、サイト名を表示し、”navbar-toggler”クラスを使用して、ナビゲーションバーをスマートフォンなどの小さな画面でも使用できるようにしています。”collapse navbar-collapse”クラスを使用して、ナビゲーションバーのリンクをグループ化し、”navbar-nav”クラスを使用して、ナビゲーションバーのリンクを配置しています。

注意:このコードは最小限のもので、自分に合ったスタイルや、ブランドイメージに合わせるためには、追加でCSSを使用することをおすすめします。

そのCSSを教えて

以下は、Bootstrap 4を使用して作成したナビゲーションバーのスタイルをカスタマイズするためのCSSの例です。

/* Change the background color of the navbar */
.navbar {
    background-color: #F44336;
}

/* Change the font color of the navbar links */
.navbar a {
    color: #ffffff;
}

/* Change the font color of the active navbar link */
.navbar .nav-item.active a {
    color: #000000;
}

/* Change the hover color of the navbar links */
.navbar a:hover {
    color: #000000;
}

/* Change the font-size of the navbar brand */
.navbar-brand {
    font-size: 2em;
}

このCSSでは、ナビゲーションバーの背景色を変更し、リンクのフォント色を変更し、アクティブなリンクのフォント色を変更し、リンクのホバー色を変更し、ブランドのフォントサイズを変更しています。

これらはあくまで例で、自分のブランドカラーやイメージに合ったスタイルにするためには、適宜変更してください。

前のやり取りをちゃんと継承する

次に注目したいのは、Bootstrap4ではじめに指示を出しておけば、その後はその仕様に従ってコーディングを勧めていっているという点です。いちいち初めから説明しなくても会話の流れを理解して的確に答えていっています。

CSSがなければ、CSSを教えてもらえるように指示をすると教えてくれます。

ナビゲーションバーとしか指示を出していないと、レスポンシブ対応がうまくいきません。

特に、ハンバーガーメニューにはしてくれないので、ちゃんとハンバーガーメニューにしてくれと指示したほうが良いです。

ハンバーガーメニューのCSSに変更して

以下は、Bootstrap 4を使用して作成したハンバーガーメニューのスタイルをカスタマイズするためのCSSの例です。

/* Change the background color of the hamburger menu button */
.navbar-toggler {
    background-color: #F44336;
}

/* Change the color of the hamburger menu icon */
.navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

/* Change the hover color of the hamburger menu button */
.navbar-toggler:hover {
    background-color: #000000;
}

/* Change the font color of the expanded menu links */
.navbar-collapse a {
    color: #ffffff;
}

/* Change the hover color of the expanded menu links */
.navbar-collapse a:hover {
    color: #000000;
}

このCSSでは、ハンバーガーメニューボタンの背景色を変更し、アイコンの色を変更し、ハンバーガーメニューボタンのホバー色を変更し、展開したメニューリンクのフォント色を変更し、展開したメニューリンクのホバー色を変更しています。

これらはあくまで例で、自分のブランドカラーやイメージに合ったスタイルにするためには、適宜変更してください。

おしゃれなヒーローセクションデザインのコードを教えて

以下は、Bootstrap 4を使用して作成したおしゃれなヒーローセクションのHTMLとCSSの例です。

<section class="hero-section">
  <div class="container h-100">
    <div class="row h-100 align-items-center">
      <div class="col-lg-6">
        <h1 class="hero-title">Welcome to our website</h1>
        <p class="hero-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id risus quis nibh malesuada fringilla.</p>
        <a href="#" class="btn btn-primary btn-lg">Learn More</a>
      </div>
      <div class="col-lg-6">
        <img src="hero-image.jpg" class="img-fluid" alt="Hero Image">
      </div>
    </div>
  </div>
</section>

/* Hero section styles */
.hero-section {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("hero-bg.jpg");
  background-size: cover;
  background-position: center;
  height: 80vh;
  color: #fff;
  text-align: center;
}

.hero-title {
  font-size: 3em;
  margin-bottom: 0.5em;
}

.hero-text {
  font-size: 1.5em;
  margin-bottom: 2em;
}

.hero-section .btn {
  border: 2px solid #fff;
  padding: 0.75em 2em;
  font-size: 1.25em;
  transition: all 0.2s;
}

.hero-section .btn:hover {
  background-color: #fff;
  color: #000;
  cursor: pointer;
}

このHTMLでは、セクションを作成し、コンテナ、行、列を使用して、タイトル、テキスト、画像、ボタンを配置しています。 CSSでは、セクションに背景画像を設定し、背景画像のスタイルを調整し、文字のスタイルを調整し、ボタンのスタイルを調整しています。これらはあくまで例で、自分のブランドカラーやイメージに合ったスタイルにするためには、適宜変更してください。

おしゃれな3カラムセクションコードを教えて

以下は、Bootstrap 4を使用して作成したおしゃれな3カラムセクションのHTMLの例です。

<section class="three-column-section">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="card">
          <img src="image1.jpg" class="card-img-top" alt="Card Image 1">
          <div class="card-body">
            <h4 class="card-title">Column 1</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id risus quis nibh malesuada fringilla.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <img src="image2.jpg" class="card-img-top" alt="Card Image 2">
          <div class="card-body">
            <h4 class="card-title">Column 2</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id risus quis nibh malesuada fringilla.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <img src="image3.jpg" class="card-img-top" alt="Card Image 3">
          <div class="card-body">
            <h4 class="card-title">Column 3</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id risus quis nibh malesuada fringilla.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

このHTMLでは、セクションを作成し、コンテナ、行、列を使用して、カードに画像、タイトル、テキストを配置しています。カードはBootstrapが提供するクラスを使用しています。これらはあくまで例で、自分のブランドカラーやイメージに合ったスタイルにするためには、適宜変更してください。

かっこいい2カラムセクションデザインのコードを教えて

以下は、Bootstrap 4を使用して作成したかっこいい2カラムセクションのHTMLの例です。

<section class="two-column-section">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="left-column">
          <img src="image1.jpg" class="img-fluid" alt="Section Image">
          <h2 class="section-title">Column 1</h2>
          <p class="section-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id risus quis nibh malesuada fringilla.</p>
        </div>
      </div>
      <div class="col-md-6">
        <div class="right-column">
          <img src="image2.jpg" class="img-fluid" alt="Section Image">
          <h2 class="section-title">Column 2</h2>
          <p class="section-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id risus quis nibh malesuada fringilla.</p>
        </div>
      </div>
    </div>
  </div>
</section>

このHTMLでは、セクションを作成し、コンテナ、行、列を使用して、画像、タイトル、テキストを左右に配置しています。画像には「img-fluid」というクラスを使用し、画像をフルサイズに表示しています。これらはあくまで例で、自分のブランドカラーやイメージに合ったスタイルにするためには、適宜変更してください。

かっこいいコンタクトフォームデザインのコードを教えて

以下は、Bootstrap 4を使用して作成したかっこいいコンタクトフォームのHTMLの例です。

<section class="contact-form">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 offset-lg-3">
        <h2 class="section-title text-center">Contact Us</h2>
        <form>
          <div class="form-group">
            <label for="name">Name</label>
            <input type="text" class="form-control" id="name" placeholder="Enter your name">
          </div>
          <div class="form-group">
            <label for="email">Email</label>
            <input type="email" class="form-control" id="email" placeholder="Enter your email">
          </div>
          <div class="form-group">
            <label for="message">Message</label>
            <textarea class="form-control" id="message" rows="3"></textarea>
          </div>
          <div class="text-center">
            <button type="submit" class="btn btn-primary">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

このHTMLでは、「section」タグでフォームを囲み、「container」、「row」、「col-lg-6 offset-lg-3」を使用して、フォームを中央に配置しています。「form-group」クラスを使用して、各入力欄をグループ化し、「form-control」クラスを使用して、入力欄をデザインしています。「text-center」クラスを使用して、「submit」ボタンを中央に配置し、「btn btn-primary」クラスを使用して、「submit」ボタンをデザインしています。これらはあくまで例で、自分のブランドカラーやイメージに合ったスタイルにするためには、適宜変更してください。

かっこいいフッターデザインのコードを教えて

以下は、Bootstrap 4を使用して作成したかっこいいフッターデザインのHTMLの例です。

<footer class="bg-dark text-light">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <h4 class="mb-4">About Us</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, magna sit amet congue accumsan, augue ipsum pharetra augue, id pellentesque odio sapien eu ipsum.</p>
      </div>
      <div class="col-md-4">
        <h4 class="mb-4">Quick Links</h4>
        <ul class="list-unstyled">
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </div>
      <div class="col-md-4">
        <h4 class="mb-4">Contact Us</h4>
        <ul class="list-unstyled">
          <li>123 Main Street</li>
          <li>City, State ZIP</li>
          <li>Phone: (123) 456-7890</li>
          <li>Email: info@example.com</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="copyright text-center py-3">Copyright &copy; 2022 Your Company</div>
</footer>

このHTMLでは、「footer」タグでフッターを囲み、「bg-dark text-light」クラスを使用して、背景色を暗く、文字色を明るくしています。「container」、「row」、「col-md-4」を使用して、フッターをグリッドレイアウトで配置しています。「mb-4」クラスを使用して、各セクションの上下の余白を設定しています。「list-unstyled」クラスを使用して、リンクリストをデザインしています。「copyright」クラスを使用して、コピーライトを配置し、「text-center」クラスを使用して、中央寄せにしています。

最後に

こんな感じで、フッターまで指示を出してコードをすべて書いてもらい、そのコードをただVScodeにコピペしていっただけです。

とは言っても、マージンやパディングなど余白に関しては全くクリアランスがないので流石に調整はしました。部分的にコードを書かせてつなぎ合わせた結果なので、仕方ないですが。

自分でコーディングするよりも格段に早くてメチャクチャ簡単にフォーマットができていまいます。

もちろん、メニューのリンクや内容などは手直しをかける必要はありますが、それでもベースがあるのと無いのとでは制作スピードが倍ぐらい違います。

まだまだChatGPTの可能性を引き出せていない気もします。

今後も、いろんなことをさせてみて性能検証を行って行きたいと思います。

ChatGPTでHTMLコーディングをしてみた

使用したツール

実際のやり取りを解説

bootstrap4の雛形のコードを教えて

より具体的に指示をすると的確に答えてくれる

かっこいいレスポンシブ対応のナビゲーションバーのソースコードを教えて

そのCSSを教えて

前のやり取りをちゃんと継承する

ハンバーガーメニューのCSSに変更して

おしゃれなヒーローセクションデザインのコードを教えて

おしゃれな3カラムセクションコードを教えて

かっこいい2カラムセクションデザインのコードを教えて

かっこいいコンタクトフォームデザインのコードを教えて

かっこいいフッターデザインのコードを教えて

最後に

関連

ChatGPTにインタビューしてみた 2023.01.28

【解説】WEB3.0とは結局何なのか？暗号資産、メタバースについて　第29回10分間セミナー 2023.02.03

ChatGPTでHTMLコーディングをしてみた

使用したツール

実際のやり取りを解説

bootstrap4の雛形のコードを教えて

より具体的に指示をすると的確に答えてくれる

かっこいいレスポンシブ対応のナビゲーションバーのソースコードを教えて

そのCSSを教えて

前のやり取りをちゃんと継承する

ハンバーガーメニューのCSSに変更して

おしゃれなヒーローセクションデザインのコードを教えて

おしゃれな3カラムセクションコードを教えて

かっこいい2カラムセクションデザインのコードを教えて

かっこいいコンタクトフォームデザインのコードを教えて

かっこいいフッターデザインのコードを教えて

最後に

Share

関連

ChatGPTにインタビューしてみた 2023.01.28

【解説】WEB3.0とは結局何なのか？暗号資産、メタバースについて 第29回10分間セミナー 2023.02.03

【解説】WEB3.0とは結局何なのか？暗号資産、メタバースについて　第29回10分間セミナー 2023.02.03