見事なログインページをデザインする

はじめに

このプロジェクトでは、美しいインターフェイスを持つログインページをデザインしてスタイリッシュにする方法を学びます。目的は、快適なユーザー体験を提供する視覚的に魅力的なログインページを作成することです。

👀 プレビュー

完了したログインページのデザイン

🎯 タスク

このプロジェクトでは、以下を学びます。

プロジェクト構造を設定し、提供されたファイルを理解する方法
ログインページのボディとナビゲーションバーをスタイリッシュにする方法
アバター画像、フォームコンテナ、フォーム要素、およびテキストを含むログインフォームをスタイリッシュにする方法

🏆 成果

このプロジェクトを完了すると、以下ができるようになります。

CSS を使用して視覚的に魅力的なログインページのレイアウトを作成する
入力フィールド、ボタン、テキストなどのログインフォームのさまざまな要素をスタイリッシュにする
画像と背景スタイルを組み込んで、ログインページの全体的なデザインを向上させる

プロジェクト構造をセットアップする

このステップでは、ログインページのプロジェクト構造を設定する方法を学びます。

実験環境を開き、プロジェクトディレクトリに移動します。
プロジェクトディレクトリ内には、以下のファイル構造が見られます。

├── css
│   └── style.css
├── images
│   ├── background-pic.jpg
│   ├── cat.png
│   └── icon.png
└── index.html

css/style.css ファイルには、ログインページをスタイリッシュにするための CSS コードを記述します。images フォルダには、プロジェクトで使用される画像ファイルが含まれています。
エディタで index.html ファイルを開きます。これは、ログインページの構造を含む HTML ファイルです。
WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。
VM の上部にある「Web 8080」を開き、手動で更新するとページが表示されます。

ボディとナビゲーションバーをスタイリッシュにする

このステップでは、ログインページのボディとナビゲーションバーをスタイリッシュにします。

エディタで css/style.css ファイルを開きます。
次の CSS コードをファイルに追加します。

/* ここに CSS コードを追加してください */
body {
  background-image: url("../images/background-pic.jpg");
  background-size: cover;
  color: #fff;
  height: 945;
  width: 1920;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nav-bar img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  margin: 15px;
}

このコードは、ボディの背景画像、ナビゲーションバーのスタイルを設定し、ページの右上にプロフィールにアクセスする画像を追加します。

ログインフォームをスタイリッシュにする

このステップでは、ログインフォームをスタイリッシュにします。

次の CSS コードを css/style.css ファイルに追加します。

.content > img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin-left: 125px;
  margin-top: -100px;
}

.content-container {
  margin: 100px auto;
  width: 450px;
  height: 600px;
  background-color: rgb(0, 0, 0, 0.45);
  border-radius: 10px;
}

.form {
  text-align: center;
}

.form > h2 {
  font-size: 45px;
  font-weight: 800;
  margin-bottom: 20px;
}

button {
  width: 80px;
  height: 30px;
  border: #041c32;
  background-color: #2d4263;
  font-size: 16px;
  color: white;
  margin: 10px;
}

input {
  font-size: 20px;
  border-radius: 5px;
  width: 300px;
  margin: 10px;
}

.text {
  text-align: center;
  margin: 10px;
}

.text > a {
  text-decoration: none;
  color: white;
}

このコードは、アバター画像、フォームコンテナ、フォーム要素（ヘッダー、ボタン、入力フィールド）、およびフォームの下部のテキストを含むログインフォームをスタイリッシュにします。

最終結果をレビューしてテストする

このステップでは、完成したページと実際に与えられたページの類似度をテストすることができます。

style.css ファイルの変更を保存します。
ブラウザを更新して完成した結果を確認します。前のステップを完了すると、css 構文を使ってページをレイアウトして美化する方法を学ぶことができ、あなたのログインページをできるだけ以下のようにすることができます。

画像の説明

おめでとうございます！あなたはログインページをメイクオーバーするプロジェクトを成功裏に完了しました。

まとめ

おめでとうございます！このプロジェクトを完了しました。あなたは実験技術を向上させるために、LabEx でさらに多くの実験を行うことができます。

あなたのページをメイクオーバーしましょう