パーソナル ファイナンス ダッシュボード インターフェイス

? 中級クラス向けのパーソナル ファイナンス ダッシュボード プロジェクトの説明

このプロジェクトは、HTML と CSS を使用した現実世界のインターフェースの構造化、スタイル設定、強化についての実践的な入門を提供します。より複雑な Web アプリケーションの基盤を提供し、学習者が JavaScript とレスポンシブ デザインの概念を統合する準備を整えます。

プロジェクトを主要な概念、セクション、使用されるテクニックに分割してみましょう。

---

?️ プロジェクト概要

目的:

パーソナル ファイナンス ダッシュボード は、アカウント残高、最近の取引、予算の概要などの財務データを表示するように設計されています。このプロジェクトは、学習者が Flexbox や Grid などの高度な CSS テクニックを使用して、構造化およびスタイル設定されたインターフェイスを作成する方法を理解するのに役立ちます。

主要コンポーネント:

1. サイドバーナビゲーション
2. メインコンテンツエリア (概要カードとトランザクションテーブル)
3. ヘッダーとフッター

---

? HTML の内訳 (index.html)

? 1. HTML 構造

ページはさまざまなセマンティックセクションに分かれています:

• サイドバー (
  ): ナビゲーション リンクが含まれています。
• メインコンテンツ (
• ヘッダー (): ページのタイトルとプロフィール アイコンが表示されます。
• フッター (): 著作権情報が含まれています。

導入された概念:

1. セマンティック HTML:

   • ナビゲーション、ヘッダー、セクション、フッター: 読みやすさと SEO のメリットを提供します。

2. リストナビゲーション:

   • 順序なしリストの場合。
   • クリック可能なリンクのタグ。

3. スタイリングのクラス:

   • 要素には、CSS でスタイルを設定するために、サイドバー、メインコンテンツ、プロフィールアイコンなどのクラスが割り当てられます。

---

? CSS の内訳 (styles.css)

? 1.一般的なリセット

body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f9;
  color: #333;
}

• 目的: デフォルトのフォント、マージン、パディング、背景色を設定して、ブラウザ間で一貫したスタイルを確保します。

---

? 2. Flexbox を使用したダッシュボード レイアウト

.dashboard-container {
  display: flex;
  min-height: 100vh;
}

• 説明:
  • display: flex: メイン コンテナを フレックス コンテナ にし、サイドバーとメイン コンテンツを並べて配置できるようにします。
  • min-height: 100vh: ダッシュボードがビューポートの高さ全体を占めるようにします。

---

? 3.サイドバーのスタイル

.sidebar {
  background-color: #2a3f54;
  color: white;
  padding: 20px;
  width: 250px;
}

.sidebar a {
  color: white;
  text-decoration: none;
  transition: color 0.3s;
}

.sidebar a:hover {
  color: #1abc9c;
}

• 主要な概念:
  • 背景色: サイドバーのダークテーマを設定します。
  • リンク: スムーズな色の変化のため、トランジションを使用したホバー効果でスタイル設定されています。

---

? 4.メインコンテンツとヘッダー

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

.profile-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

• ヘッダー用フレックスボックス:

  • justify-content: space-between: タイトルを左側に、プロフィール アイコンを右側に配置します。
  • align-items: center: 項目を垂直方向に整列させます。

• 丸みを帯びた画像:

  • border-radius: 50% を指定すると、プロフィール アイコンが円形になります。

---

? 5.概要カード

.overview-cards {
  display: flex;
  gap: 20px;
  margin: 20px 0;
}

.card {
  background-color: #1abc9c;
  color: white;
  padding: 20px;
  border-radius: 10px;
  flex: 1;
  text-align: center;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

• フレックスボックス レイアウト:

  • 表示: flex はカードを水平に配置します。
  • ギャップ: 20px はカード間にスペースを作成します。
  • flex: 1 は、カードが均等に分散されるようにします。

• スタイリングテクニック:

  • 背景色 視覚的にアピールします。
  • ボックス シャドウ はカードに深みを与えます。

---

? 6.トランザクションテーブル

.transactions table {
  width: 100%;
  border-collapse: collapse;
}

.transactions th, .transactions td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: left;
}

.transactions th {
  background-color: #2a3f54;
  color: white;
}

• テーブルのスタイル:
  • border-collapse: 折りたたむと、テーブルの境界線間のスペースが削除されます。
  • セルの一貫したパディングと境界線。
  • ヘッダー行 (th) は、コントラストのために暗い背景でスタイル設定されています。

---

? 教えられる概念

1. セマンティック HTML:
   
   読みやすさと構造が改善されました。

2. フレックスボックス:
   
   レイアウト設計が簡素化され、レスポンシブなインターフェースの作成が容易になります。

3. ナビゲーション メニュー:
   
   リンクを使用してサイドバーを構造およびスタイルする方法。

4. カードとパネル:
   
   視覚的に魅力的で再利用可能なコンポーネントを作成します。

5. テーブル:
   
   構造化された方法でデータをフォーマットします。

6. ホバー効果とトランジション:
   
   ナビゲーション リンクにインタラクティブ性を追加します。

GitHub でプロジェクトを表示