はじめに
このプロジェクトでは、HTML と CSS を使ってユーザーの名刺を作成する方法を学びます。目的は、ユーザーの情報を紹介するための、視覚的に魅力的で構造が整った名刺を作成することです。
👀 プレビュー
🎯 タスク
このプロジェクトでは、以下のことを学びます。
- プロジェクトをセットアップし、必要なファイルを開く方法
- CSS を使って名刺とユーザーアバター要素を中央に配置する方法
- 左側のテキスト要素（レベルとポイント）を水平方向に中央に配置する方法
🏆 成果
このプロジェクトを完了すると、以下のことができるようになります。
- 名刺用の HTML ページを構築する
- CSS を使ってページ上の要素をスタイリッシュに配置する
- 要素を水平方向と垂直方向に中央に配置する技術を適用する
プロジェクトをセットアップする
このステップでは、プロジェクトをセットアップし、エディタでファイルを開きます。
プロジェクトフォルダを開きます。このフォルダには、以下のファイルとディレクトリが含まれています。
├── avatar.png
├── style.css
└── index.html
ここで：
index.htmlはメインページです。style.cssは必要なスタイルを追加するファイルです。
WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。
次に、VM の上部にある「Web 8080」を開き、手動で更新するとページが表示されます。
名刺とアバターを中央に配置する
このステップでは、style.css の TODO セクションを完成させて、名刺とユーザーアバター要素を中央に配置します。
style.cssファイルの TODO セクションを探します。- 名刺 (
class = card) とユーザーアバター (class = avatar) 要素を水平方向と垂直方向に中央に配置するための必要な CSS ルールを追加します。
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
style.cssファイルに変更を保存します。- ブラウザを更新して完成した結果を確認します。完成した結果は以下の通りです。
おめでとうございます！あなたはユーザー名刺プロジェクトを成功裏に完了させました。
まとめ
おめでとうございます！このプロジェクトを完了しました。あなたは実験技術を向上させるために、LabEx でさらに多くの実験を行うことができます。
