GitHub Copilotは便利な機能が多数あるのですが、私はHTMLで作成したクラスをCSS内でクラスのブロックを作成してもらっています。これはChatGPTでも利用していましたが、その場合、VsCodeからHTML画面からコピーして、 ChatGPTに貼り付けて指示をして、回答されたCSSのブロックをまた、VsCodeに貼り付ける作業がありました。これでも便利ではありますが、GitHub Copilotを使えば、VsCode内で完結できます。
例えば、下記のような、HTMLのクラスがあったとします。
<section class=”container”>
<div class=”header”>
<h1 class=”title”>タイトル</h1>
<nav class=”menu”>
<ul>
<li class=”item”><a href=”#”>ホーム</a></li>
<li class=”item”><a href=”#”>サービス</a></li>
<li class=”item”><a href=”#”>製品</a></li>
<li class=”item”><a href=”#”>お問い合わせ</a></li>
</ul>
</nav>
</div>
<div class=”content”>
<article class=”post”>
<h2 class=”post-title”>記事タイトル</h2>
<p class=”post-content”>記事の内容がここに入ります。</p>
</article>
<aside class=”sidebar”>
<h3 class=”sidebar-title”>サイドバータイトル</h3>
<ul class=”sidebar-list”>
<li class=”sidebar-item”>サイドバーアイテム1</li>
<li class=”sidebar-item”>サイドバーアイテム2</li>
<li class=”sidebar-item”>サイドバーアイテム3</li>
</ul>
</aside>
</div>
<footer class=”footer”>
<p class=”copyright”>© 2024 サイト名</p>
</footer>
</section>
上記の該当部分のHTMLを選択してVsCodeの下記赤枠部分をチェックすると、GitHub Copilotのチャット画面が開きます。ここにHTM Lを貼り付けて、空のCSSブロックを作成するよう指示します。
下記のようにCSSのクラスのブロックを作成してくれました。コピーしてCSSに貼り付けます。
一部、コーデイングしやすいように、修正、追加は必要ですが、１から作るより、早く作れます。