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

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

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

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

---

?️ プロジェクト概要

目的:

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

主要コンポーネント:

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

---

? HTML の内訳 (index.html)

? 1. HTML 構造

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

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

導入された概念:

1. セマンティック HTML:

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

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

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

   • スタイリングのクラス:

     • 要素には、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 でプロジェクトを表示

   以上がパーソナル ファイナンス ダッシュボード インターフェイスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。