見出し画像

htmlはChatGPTに書かせよう

Zun-Beho

左脳の無い人のための超簡単フロントエンド開発03

chatGPTははっきりいってhtml苦手です。嫌いなのかもしれません。pythonだったらどんなに根掘り葉掘り聞いても根気強く教えてくれるですが、htmlは途中でコマンドラインからはずれたり、そんなに長くもないのに途中でとまったりします。ですが運が良ければサクッと書いてくれます。

こんな命令をしてみよう

「タイトルに大見出しがあり、本文の中に３つの章があり、3つの章の中にもそれぞれ節が3つづつあるエッセーをhtmlでかきます。文書構造をおしえてください。」

するとすぐさまこんなエッセーをhtmlで書いてしまった！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Trip to Japan</title>
</head>
<body>
  <header>
    <h1>My Trip to Japan</h1>
  </header>
  <main>
    <section>
      <h2>Preparation</h2>
      <article>
        <h3>Research</h3>
        <p>Before my trip, I spent several weeks researching the best places to visit in Japan. I read travel guides, watched videos, and asked for recommendations from friends who had visited before.</p>
      </article>
      <article>
        <h3>Packing</h3>
        <p>I carefully packed my luggage with clothes appropriate for the season, comfortable walking shoes, and a camera to capture all the memories.</p>
      </article>
      <article>
        <h3>Language Study</h3>
        <p>Since I don't speak Japanese, I also spent some time learning basic phrases and greetings to communicate with locals.</p>
      </article>
    </section>
    <section>
      <h2>Exploring Tokyo</h2>
      <article>
        <h3>Shibuya Crossing</h3>
        <p>One of my favorite experiences in Tokyo was crossing the famous Shibuya intersection, which was always crowded with people. I also explored the surrounding shopping and entertainment districts.</p>
      </article>
      <article>
        <h3>Imperial Palace</h3>
        <p>The Imperial Palace was another highlight of my trip. I took a guided tour and learned about the history and significance of the palace and the royal family.</p>
      </article>
      <article>
        <h3>Tsukiji Fish Market</h3>
        <p>I visited the Tsukiji Fish Market early in the morning and witnessed the lively auction and fresh seafood. I also tried some delicious sushi at one of the nearby restaurants.</p>
      </article>
    </section>
    <section>
      <h2>Visiting Kyoto</h2>
      <article>
        <h3>Fushimi Inari Shrine</h3>
        <p>The Fushimi Inari Shrine was a breathtaking sight with thousands of bright orange torii gates lining the hiking trail. I took my time hiking to the summit and enjoyed the peaceful scenery.</p>
      </article>
      <article>
        <h3>Kiyomizu-dera Temple</h3>
        <p>Kiyomizu-dera Temple was another impressive attraction with its stunning architecture and views of Kyoto. I also explored the charming streets of Higashiyama district nearby.</p>
      </article>
      <article>
        <h3>Gion District</h3>
        <p>I ended my trip with a visit to the famous Gion district, where I saw geisha performances and tried traditional Japanese cuisine.</p>
      </article>
    </section>
  </main>
</body>
</html>

めちゃくちゃ正しい文書構造になってる。
ただし、chatGPTに書かせているといつまでたっても覚えないのでemmtを使ってこの構造をサクッと書けるようになろう！

ここから先は

3,420字 / 5画像

エントリープラン

¥1,000 / 月
初月無料
このメンバーシップの詳細
ログイン

この記事が気に入ったらサポートをしてみませんか？