GitHub でプロジェクトを参照

? プロジェクト構造

payment-app/
│-- index.html
│-- styles.css
│-- images/
│   └-- credit-card.png

? このプロジェクトの使用方法

1. リポジトリをダウンロードまたはクローン作成します:

   git clone https://github.com/yourusername/simple_interface.git

1. プロジェクト ディレクトリに移動します:

   cd payment_app_interface

1. ブラウザでindex.htmlファイルを開いて、支払いアプリのインターフェースを表示します。

? 主要な概念と機能

1. HTML 構造:

   • サイドバー ナビゲーション: シンプルなサイドバーに nav と ul を使用します。
   • メインコンテンツセクション:
     • バランス表示、スタイル付きカード付き。
     • 入力フィールドと送信ボタンを備えた支払いフォーム。
     • トランザクション リスト ul 要素と li 要素を使用します。

2. CSS スタイル:

   • フレックスボックス レイアウト: サイドバーとメイン コンテンツの配置に使用されます。
   • カラースキーム: サイドバー、ボタン、取引タイプ (収入と支出) の個別の色。
   • ホバー効果: ボタンとサイドバー リンクのインタラクティブなフィードバック。
   • レスポンシブ デザイン: 柔軟なメイン コンテンツを備えた固定幅のサイドバー。

3. 中級スキルを練習しました:

   • サイドバーと複数のセクションを含む複雑なレイアウト。
   • ユーザー入力用のフォーム スタイル。
   • 明確なセクションとインタラクティブな要素を備えた一貫した UI デザイン。