CSSを作成しよう
このカリキュラムではGitHub Copilot Chat機能を使い、先ほど作成したindex.htmlのスタイルを定義するCSSファイルを作成します。
copilot_curriculumフォルダ内にstyles.cssファイルを作成しましょう。
ファイルの参照を学ぼう
今回も、HTMLを作成したときと同様にチャット機能を使ってコードを作成していきます。前回のカリキュラムで作成したindex.htmlに対応するCSSファイルですので、index.htmlのコード情報が必要になります。
ChatGPTのような生成AIの場合、プロンプトにHTMLのコードをコピーして貼り付ける必要があり、手間がかかりますが、GitHub Copilotでは参照させたいコードを開いておくだけで、自動的にコードの提案が行われます。ただし、ファイルを開いていても、表示が確認できる範囲のコードしか参照されない点に注意が必要です。
この例では、1行目から32行目までのコードのみが参照されます。
ファイル全体を参照させる方法は次のカリキュラムで紹介いたします。
それではindex.htmlを開いた状態でCSSを作成していきます。すると以下の画像のようにプロンプトの下に確認できるコードが表示されていることがわかります。
提案されたコード内の「1参照 使用済み」をクリックすると、この提案にどのコードを参照したかを確認することができます。
このようにしっかりと表示されている部分を参照してコードを提案してもらったことが確認できます。
提案されたコードはstyles.cssファイルに反映させるので、styles.cssファイルを開き、反映させましょう。
今回の提案ではCSSのコードを作成してくれただけでなく、index.htmlに紐づけるためのリンクも作成してくれました。作成されたリンクはindex.htmlに反映させましょう。
これでindex.htmlのCSSを作成することができました。
index.htmlを開いた状態で、チャット機能を使い、作成したcssファイルにコードを生成しましょう。
※ AIが作成するコードは毎回異なります。そのため、必ずしもカリキュラム通りのコードと同じである必要はありません。
プロンプト：
うまくいかない方はコード例をコピペして使用してください。
index.htmlにリンクが作成されない場合は、作成してもらいましょう。
プロンプト：
ファイル参照の切り替えを学ぼう
ファイルを開いておかなくても、GitHub Copilotは過去の会話の履歴の中にindex.htmlのコードがあれば、そちらを参照してくれます。そのため、必ずしも参照させたいファイルを開いておく必要はありませんが、表示が確認できるコードが自動で参照されるということを覚えておきましょう。
また、ファイルを開いておくとプロンプト入力欄にそのファイル名が表示されます。その際、「Current file」の右のアイコンをクリックすると開いているファイルを参照させなくすることができます。
豆知識として覚えておきましょう。
CSSファイルの確認をしよう
それでは作成したCSSのスタイルが反映されているか、ブラウザで確認をしてみましょう。
※ AIが作成するコードは毎回異なります。そのため、必ずしもカリキュラムのデザインと同じである必要はありません。
このようにしっかりとデザインされているのが確認できました。これでCSSファイルの完成です。
この記事のまとめ
- チャットをする際、ファイルを開いていると表示が確認されるコードが自動で参照されます。
- アイコンをクリックすることで、参照の切り替えをすることができます。
- GitHub Copilotは会話の履歴のコードを参照して、提案してくれます。
この記事で学んだことをTwitterに投稿して、アウトプットしよう！
Twitterの投稿画面に遷移します