Webデザイン・UIコンポーネント集(HTML/CSS/JS)

Webサイトやアプリで使われている『Webデザイン』や『UI』の実装例を纏めました。(随時更新中)
実装方法などは別記事にコードや実装ポイントを公開していますので、自由にご覧ください。

レイアウト

1
2
3
1
2
3
1
2
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 ✕ 20 cm
重量
100g
素材
ポリエステル

シマシマ/説明リスト

固定配置バナー
アニメーションなし

スクロールできます。

↓↓↓↓↓

スクロールできます。

↓↓↓↓↓

スクロールできます。

↓↓↓↓↓

スクロールできます。

↓↓↓↓↓

スクロールできます。

↓↓↓↓↓

スクロールできます。

↓↓↓↓↓

スクロールできます。

固定配置ヘッダー
アニメーションなし

スクロールできます。

↓↓↓↓↓

スクロールできます。

↓↓↓↓↓

スクロールできます。

↓↓↓↓↓

スクロールできます。

↓↓↓↓↓

スクロールできます。

↓↓↓↓↓

スクロールできます。

↓↓↓↓↓

スクロールできます。

固定配置ヘッダー
アニメーションあり

スクロールできます。

↓↓↓↓↓

スクロールできます。

↓↓↓↓↓

スクロールできます。

↓↓↓↓↓

スクロールできます。

↓↓↓↓↓

スクロールできます。

↓↓↓↓↓

スクロールできます。

↓↓↓↓↓

スクロールできます。

回転 / 縦書き表示

こんにちは

こんにちは

こんにちは

テキストの前にアイコン

Information

Check Point

ローディングアイコン

プログレスバー(不定型)

プログレスバー(決定型)

ホバー時にズーム&ダーク

HELLO WORLD

スライドイン表示

テキストをスライドイン表示します。

立体的なボタン

スマホやタッチパネルのタップではスムーズに動作しません。

画像に影(シャドウ)を入れる

大久野島にいるうさぎその2

シャドウなし

大久野島にいるうさぎその2

外側にシャドウ

大久野島にいるうさぎその2

内側にシャドウ

レスポンシブデザイン

以下の表の通り、画面サイズでレイアウトが変わります。

画面サイズ表示レイアウト
〜767px3つの要素が縦並び
768px〜1279px3つの要素が横並び
1280px〜3つの要素が横並び & 水色画像が他の画像幅の3倍

ダイアログ(alert / confirm / prompt)

アコーディオン

Hello World!

モーダルウィンドウ

ポップアップ

タブメニュー

  • タブ1
  • タブ2
  • タブ3
タブ「1」の内容です。
タブ「2」の内容です。
タブ「3」の内容です。

カルーセル(スライダー)

一定時間毎に表示変更
フェードアウト

こんにちは!

Hello!

你好!

Bonjour!

Guten Tag!

一定時間毎に表示変更
ズームイン&フェードアウト

点滅表示

コピーボタン

Good Morning

Good Afternoon

Good Evening

入力フォームを増減

ドラッグ&ドロップ

  • Item 1
  • Item 2
  • Item 3
  • Item 4

ダークモード

サンプルテキスト

サンプルテキスト

サンプルテキスト

お知らせ表示

  • お知らせ 1
  • お知らせ 2
  • お知らせ 3

閉じる

郵便番号検索

動的ドロップダウンリスト

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!