Skip to content

ChatGPTが楽しすぎる。アコーディオンメニュー作らせてみた。

ChatGPTが楽しすぎる。アコーディオンメニュー作らせてみた。 CODE
CODE
この記事は約5分で読めます。

この記事は近年のAI事情に戦々恐々しているWebデザイナーやコーダーに向けた記事になります。

Just a moment...

ChatGPTにアコーディオンメニューを作らせてみた

今更ではあるのですがChatGPTの紹介もしつつどこまで遊べるのかを確認していました。

ChatGPTとは簡単に言ってしまえばチャット感覚でテキストを送ると具体的な形でアウトプットしてくれるサービスです。
Googleさんの場合は「キーワードから検索結果を出力してくれる」のに対してChatGPTは「テキストを解析した上で解答を出力してくれる」というものであり、その精度がものすごいと話題になっています。

というわけで以下の命令文を実行してみました。

クリックしたときに動くアコーディオンメニューを生成してください。
JavaScriptは使用しないことが条件です。

すると、以下の返答をいただきました。

HTML
<div class="accordion">
  <div class="accordion-header" tabindex="0">
    <h2>Accordion Title 1</h2>
  </div>
  <div class="accordion-content">
    <p>Accordion content 1 goes here</p>
  </div>
  <div class="accordion-header" tabindex="0">
    <h2>Accordion Title 2</h2>
  </div>
  <div class="accordion-content">
    <p>Accordion content 2 goes here</p>
  </div>
  <div class="accordion-header" tabindex="0">
    <h2>Accordion Title 3</h2>
  </div>
  <div class="accordion-content">
    <p>Accordion content 3 goes here</p>
  </div>
</div>
CSS
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.accordion-header {
  cursor: pointer;
}

.accordion-header:after {
  content: "+";
  font-size: 1.5em;
  float: right;
}

.accordion-header[aria-expanded="true"]:after {
  content: "-";
}

.accordion-header:focus + .accordion-content {
  max-height: 500px;
}
上記のHTML,CSSを使用すれば、クリックしたときにアコーディオンメニューが動作するアコーディオンメニューを生成することができます。
複数のアコーディオンがある場合は、それぞれのアコーディオンの要素に対してclassを付けて、上記のHTML,CSSを使用することで実現できます。

ぎえええぇぇ!?十数秒で生成してくれました。しかし、これが本当に使い物になるのか疑問です。

実際に出力したアコーディオンメニューがこちら

Accordion Title 1

Accordion content 1 goes here

Accordion Title 2

Accordion content 2 goes here

Accordion Title 3

Accordion content 3 goes here

な、なんか惜しい。。。けど下地としては十分で、あとはHTMLとCSSをちょっと修正するとそれなりのものになりそうです。

現時点ではベースとなるHTMLやCSSを生成してもらえるだけでもありがたいなぁと思いますが、後1年後とかどうなってるのでしょう?
様々な条件を付け加えることで求めている完璧なものまで作りきってしまいそうで恐ろしい時代になったものだと思います。

お仕事・当サイトへ興味を持っていただいた方お問い合わせはこちらから

ma-san(鈴木正行)
テクニカルディレクター / Webデザイナー

「ma-san web design」の管理者。東京都・千葉県・宮城県仙台市を中心に企業のWebデザイン/マーケティング/IT戦略のプランニングからWebサイト構築・運用をしています。
Webアクセシビリティ」を中心に、「変わりゆくWebと共にサービス・サイトを改善していくこと」を重視します。
当サイトではお仕事のご相談からナレッジシェアを中心に活動していきます。

PR
シェアする
ma-sanをフォローする
ma-san blog