山田隆一公式サイト

1561.【GPT-5】ChatGPTで、簡易的なログイン機能を作ってみました。【HTML/CSS/JavaScript】

2025/08/30

...

生成AI「ChatGPT」の使い方はぜひこちらをご覧くださいませ。

...

「ログイン機能のサンプル」

今回は、ログイン機能のサンプルを作ってみました。

ログイン機能のサンプル

(画像をクリック・タップするとご覧いただけます。)

このようにシンプルなサンプルです。スンプルセンプルソンプル。

サンプルですので、ユーザーIDとパスワードは1つしか設定しておりません。上の画像にも括弧書きで薄く表示しているものがそれぞれユーザーID(sample)とパスワード(sample123)です。

ログイン機能のサンプル

試しにこのように異なることを入力してログインしようとしてみます。下部のログインボタンを押します。

ログイン機能のサンプル

するとこのように赤い文字で入力内容が異なることが表示されてログインできません。

ログイン機能のサンプル

今度はおとなしく正しいIDとパスワードを入力し、ログインボタンを押します。

ログイン機能のサンプル

するとログインが成功し、このような画面が表示されます。ユーザー名は「サンプルさん」にしました。

簡易的なサンプルのログイン機能ですので、これだけです。本格的に実装する際は、ここから更にいろいろと作り上げていくこととなります。

ログイン機能のサンプル

下のログアウトボタンを押すと、再び元の画面に戻ります。この画像のように「次回もログイン状態を保持する」にチェックを入れることでログイン状態を保持することもできます。

...

以上がシンプルなログイン機能のサンプルです。

このようにアプリやWebサイトをいろいろと制作しておりますので、お仕事のご依頼もお気軽にお待ちしております!こちらからご連絡をどうぞ!

...

お読みいただき、ありがとうございました。