Webデザイン・UIコンポーネント集（HTML/CSS/JS）
Webサイトやアプリで使われている『Webデザイン』や『UI』の実装例やデザイン例を纏めました。（随時更新中）
実装方法などは別記事にコードや実装ポイントを公開していますので、自由にご覧ください。
レスポンシブデザイン
- 〜767px
- 3つの要素が縦並び
- 768〜1279px
- 3つの要素が横並び
- 1280px〜
- 横並び・水色が他の3倍幅
実装方法を見る
テーブル
| 月 |
売上 |
経費 |
| 4 | 500 | 400 |
| 5 | 800 | 650 |
| 6 | 400 | 320 |
シンプル
| 月 |
売上 |
経費 |
| 4 | 500 | 400 |
| 5 | 800 | 650 |
| 6 | 400 | 320 |
シマシマ
実装方法を見る
説明リスト
- 商品名
- エコバッグ
- 価格
- 600円
- サイズ
- 10cm ✕ 20cm
- 重量
- 100g
- 素材
- ポリエステル
シンプル
- 商品名
- エコバッグ
- 価格
- 600円
- サイズ
- 10cm ✕ 20cm
- 重量
- 100g
- 素材
- ポリエステル
シマシマ
実装方法を見る
テキストの前にアイコン
Information
Check Point
Likes
実装方法を見る
固定配置バナー
アニメーションなし
スクロールできます。
↓↓↓↓↓
スクロールできます。
↓↓↓↓↓
スクロールできます。
↓↓↓↓↓
スクロールできます。
実装方法を見る
立体的なボタン
タッチパネルではスムーズに動作しません。
実装方法を見る
動的ドロップダウンリスト
実装方法を見る
一定時間毎に表示変更
フェードアウト
こんにちは！
Hello!
你好！
Bonjour!
Guten Tag!
実装方法を見る
ドラッグ＆ドロップ
- Item 1
- Item 2
- Item 3
- Item 4
実装方法を見る
ダークモード
サンプルテキスト
サンプルテキスト
サンプルテキスト
実装方法を見る
Web・UIのデザイン集
