パーソナルファイナンスダッシュボードインターフェイス-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

Barbara Streisand

Dec 22, 2024 am 09:22 AM

Personal Finance Dashboard Interface

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

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

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

?️ プロジェクト概要

目的:

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

主要コンポーネント:

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

? HTML の内訳 (index.html)

? 1. HTML 構造

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

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

導入された概念:

セマンティック HTML:
- ナビゲーション、ヘッダー、セクション、フッター: 読みやすさと SEO のメリットを提供します。
リストナビゲーション:
- クリック可能なリンクのタグ。
スタイリングのクラス:
- 要素には、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;
}