スタイルを整える

GitHub Copilot を利用をしながら フロントエンドの JavaScript から バックエンドの API に通信を行い、 データを表示するプログラムを 作成してきました。 この画面が表示結果です。 従業員を表す エンプロイデータを取得して 表示した結果です。 ID が１番と２番の ２件のデータが事前に登録されているので、 このように表示することができました。 しかしこの表示は少し シンプルすぎる気がするので、 もう少し見た目を装飾していきましょう。 Visual Studio Code を開いて、 スタイルシートを追加していきましょう。 先ほどのページは MyApi というフォルダーの wwwroot というフォルダーにある index.html でした。 まずこのファイルを開きながら、 Copilot チャットにお問合せを 行っていきましょう。 チャットメニューを開きます。 今回はスタイルを適用するのに、 bootstrap を利用しましょう。 「bootstrap を利用して テーブルにスタイルを適用する 方法を教えてください。」 このように質問を送ってみましょう。 Copilot が解答が返ってきました。 「１参照使用済み」という欄を クリックすると、 このように index.html を 参照していることがわかります。 Copilot は index.html の 中身を参照しながら 回答をくれました。 まず head タグに このようにスタイルシートを 読み込むコードを記述します。 スタイルシートは Web 上にある bootstrap のソースコードを 読み込んでいます。 コピーして、 head タグに追記しましょう。 このように追記を行うことができました。 続いてテーブルタグを このように変更する必要があるようです。 class の定義を 追加する必要があるようです。 ここだけコピーして追加しましょう。 class の指定が追加できました。 それではブラウザに戻って 実行結果を確認してみましょう。 このように先ほどの シンプルな表示が スタイルを利用して テーブルが見やすく表示できるように なりました。 スタイルの指定ができたので、 もう少し変更を加えていきましょう。 先ほどの質問に少し加えます。 「奇数行と 偶数行で背景色を…