Webサイトやアプリで使われている『Webデザイン』や『UI』の実装例を纏めました。（随時更新中）
実装方法などは別記事にコードや実装ポイントを公開していますので、自由にご覧ください。
テーブル
| 月 | 売上 | 経費 |
|---|---|---|
| 4 | 500 | 400 |
| 5 | 800 | 650 |
| 6 | 400 | 320 |
シンプル/テーブル
| 月 | 売上 | 経費 |
|---|---|---|
| 4 | 500 | 400 |
| 5 | 800 | 650 |
| 6 | 400 | 320 |
シマシマ/テーブル
説明リスト
- 商品名
- エコバッグ
- 価格
- 600円
- サイズ
- 10cm ✕ 20cm
- 重量
- 100g
- 素材
- ポリエステル
シンプル/説明リスト
- 商品名
- エコバッグ
- 価格
- 600円
- サイズ
- 10cm ✕ 20 cm
- 重量
- 100g
- 素材
- ポリエステル
シマシマ/説明リスト
固定配置ヘッダー
アニメーションなし
ヘッダー
スクロールできます。
↓↓↓↓↓
スクロールできます。
↓↓↓↓↓
スクロールできます。
↓↓↓↓↓
スクロールできます。
↓↓↓↓↓
スクロールできます。
↓↓↓↓↓
スクロールできます。
↓↓↓↓↓
スクロールできます。
固定配置ヘッダー
アニメーションあり
ヘッダー
ヘッダー
スクロールできます。
↓↓↓↓↓
スクロールできます。
↓↓↓↓↓
スクロールできます。
↓↓↓↓↓
スクロールできます。
↓↓↓↓↓
スクロールできます。
↓↓↓↓↓
スクロールできます。
↓↓↓↓↓
スクロールできます。
テキストの前にアイコン
プログレスバー（不定型）
プログレスバー（決定型）
スライドイン表示
レスポンシブデザイン
以下の表の通り、画面サイズでレイアウトが変わります。
| 画面サイズ | 表示レイアウト |
|---|---|
| 〜767px | 3つの要素が縦並び |
| 768px〜1279px | 3つの要素が横並び |
| 1280px〜 | 3つの要素が横並び & 水色画像が他の画像幅の3倍 |
あわせて読みたい
【JS&CSS】ボタンを押したらメッセージを表示する方法4選
ボタンクリック(タップ)でメッセージを表示する4つの方法を紹介します。 ダイアログボックス（アラート） ボタン１ OKボタン付きのダイアログボックスを表示。 実装方法…
