デザイン
デザインに関連するサンプルコードをカテゴリー別にまとめています。

カルーセル

3D表示で中央の画像を強調するカルーセルを作る方法
中央の画像を強調表示するカルーセルを作る方法

カードUI

カード内にカードを表示する方法
カードにNEWバッジや斜めリボンを配置する方法｜位置・はみ出し・回転

セレクトボックス

セレクトボックスの矢印アイコンを変更する方法

タブ切り替え

タブ内の件数をバッジ表示するタブ切り替えを作る方法
アイコン付きタブ切り替えの作り方

チェックボックス

立体的なくぼみがあるチェックボックスを作る方法
チェック時に色が変わるチェックボックスを作る方法

ツールチップ

立体的に表示する3Dツールチップを作る方法

テキストボックス

入力欄がくぼんで見える立体テキストボックスを作る方法
下線だけのシンプルなテキストボックスを作る方法

テーブル

行とセルが2段階で浮き上がる立体テーブルを作る方法
テーブルの行を交互に色分けする方法

トグルスイッチ

立体的なトグルスイッチを作る方法

トースト

立体的なトーストを表示する方法

ドロップダウンメニュー

背景をぼかし表示するドロップダウンメニューの作り方
背景を暗く表示するドロップダウンメニューの作り方
立体的なドロップダウンメニューを作る方法
クリックすると枠線を強調するドロップダウンメニューを作る方法

ドロワーメニュー

半透明のドロワーメニューを作る方法
背景をぼかして表示するドロワーメニューの作り方
背景を暗く表示するドロワーメニューの作り方
ドロワーメニュー表示中にページ背景をぼかす方法

フッター

立体的な固定フッターメニューを作る方法

ページネーション

立体的なページネーションを作る方法

ボタン

影で立体的に見せるボタンを作る方法
立体的なボタンを作る方法
グラデーションボタンを作る方法
アイコン付きボタンを作る方法
ホバーで背景色が変わるボタンを作る方法
角丸ボタンを作る方法

ポップアップ

背景をぼかして表示するポップアップの作り方
背景を暗く表示するポップアップの作り方

ポップオーバー

背景をぼかして表示するポップオーバーの作り方
背景を暗く表示するポップオーバーの作り方
立体的なポップオーバーを作る方法

モーダルウインドウ

背景をぼかして表示するモーダルウインドウの作り方
ダークモード対応モーダルウインドウの作り方
全画面オーバーレイ型モーダルウインドウの作り方

ラジオボタン

立体的なくぼみがあるラジオボタンを作る方法
ラジオボタンにマウスを重ねると背景色と枠線が変わる方法
選択中を強調表示するラジオボタンを作る方法
ラジオボタンを非表示にして選択ボタンを作る方法