Bootstrap 5 だけを使って、つまり外部の CSS を読み込んだり style を使ったりしないで、ログイン HTML ページを AI 使いながら作った。

近づけたいページと、不満点

• Signin Template · Bootstrap v5.0
  • Bootstrap だけで作成したい。外部の CSS を読み込んでいたり、 <style> を定義していたりするが、読み込みたくないし定義したくない。

Bing AI と Chat GPT 3.５ と会話しながら答えてもらったポイントと補足

• container-fluid クラスを使用して、画面全体にコンテンツが表示されるようにしています。 container クラスだと左右に余白がつく。
  • https://getbootstrap.jp/docs/5.0/layout/containers/#fluid-containers
• justify-content-center クラスは、水平方向に中央揃えするためのものです。このクラスを使用することで、フォームが画面の中央に配置されます。
  • 左右の中央に配置。
  • https://getbootstrap.jp/docs/5.0/utilities/flex/#justify-content
• align-items-center クラスは、垂直方向に中央揃えするためのものです。このクラスを使用することで、フォームが画面の中央に配置されます。
  • 上下の中央に配置。 align-items-center 及び vh-100 が無いと上下の中央に配置されなかったが、なぜかは不明。
  • https://getbootstrap.jp/docs/5.0/utilities/flex/#align-items
• vh-100 クラスは、要素の高さを画面の高さと同じにするためのものです。このクラスを使用することで、フォームが画面の中央に配置されます。
  • 上下の中央に配置。 align-items-center 及び vh-100 が無いと上下の中央に配置されなかったが、なぜかは不明。
  • https://getbootstrap.jp/docs/5.0/utilities/sizing/#relative-to-the-viewport

Bing AI と Chat GPT 3.５ と会話しながら一旦これで完了としたソースコード

laravel/resources/js/views/MyLogin.vue に貼り付け。

<template>
    <div class="container-fluid">
        <div class="row justify-content-center align-items-center vh-100">
            <div class="col-lg-4 col-md-6 col-sm-8 col-xs-12">
                <p class="h1 text-center">💡</p>
                <h1 class="text-center mb-4">ログイン</h1>

                <form>
                    <div class="mb-3 row">
                        <label for="inputEmail" class="col-sm-4 col-form-label">メールアドレス</label>
                        <div class="col-sm-8">
                            <input type="email" class="form-control" id="inputEmail" aria-describedby="emailHelp" required>
                        </div>
                    </div>

                    <div class="mb-3 row">
                        <label for="inputPassword" class="col-sm-4 col-form-label">パスワード</label>
                        <div class="col-sm-8">
                            <input type="password" class="form-control" id="inputPassword" required>
                        </div>
                    </div>

                    <div class="mb-3 form-check row justify-content-center align-items-center">
                        <div class="col-sm-8 offset-sm-4">
                            <input type="checkbox" class="form-check-input" id="exampleCheck1">
                            <label class="form-check-label" for="exampleCheck1">ログイン情報を記憶する</label>
                        </div>
                    </div>

                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary">ログイン</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

Bing AI の使い方メモ

Chat GPT でも同じだと思うが、いろいろ試行錯誤して最終的にメモっておこうと思ったのは以下の点です。

• いきなりログインページ作って、だと上手くいかなかった。
• Bootstrap のバージョンは詳細に指定した方がよかった。
• ログインページの特徴をバラして、まずは上下左右の中央にコンテンツを配置するページを出力してもらった。そのコードを改善、付け足すような形で、ログインページに近づけていった。

おわりに

Bootstrap 5 の本家サンプルなのに、　別途スタイルを使っているのは「デザインを自由自在に操れないので Bootstrap 5 だけでウェブサービスを構築したいプログラマー」のニーズにマッチしていなくて気持ちはわかるけれどもモヤモヤします。

なので、今回 AI を活用してみました。なかなかいい使い方になったのではないかと思っています。

以上です。