カードUI
コピペですぐ使えるカードUIのサンプルコードを動作・特徴別にまとめています。
無料ツール
カードを自由に作成

タイトル・説明文・サイズ・配置・背景色・枠線・影・文字などを設定して、HTMLとCSSを自動生成できます。

カード作成ツールを使う
新しいタブで開きます

基本

基本のカードを作る方法

表示非表示

ボタンクリックでカードを展開して詳細を表示する方法

アニメーション

ページ読み込み時にカードをフェードイン表示する方法
マウスホバーで浮き上がるカードを作る方法

デザイン

カードにNEW通知バッジを付ける方法
カードに斜めリボンを付ける方法

レイアウト

画像を左右に配置したカードを作る方法
画像付きの横長カードを作る方法
画面幅に合わせてカードを自動で折り返す方法
横スクロールできるカード一覧を作る方法

操作

カードをドラッグして並び替える方法
マウスドラッグで上下左右に自由に360度回転できるカードを作る方法
マウスの動きに合わせて傾くカードを作る方法
クリックで裏表が切り替わるカードを作る方法

コンテンツ

iframe付きカードを作る方法
画像ギャラリー付きカードを作る方法
Googleマップ付きカードを作る方法
PDF付きカードを作る方法
YouTube動画付きカードを作る方法
ボタン付きカードを作る方法
画像付きカードを作る方法

入れ子

カード内にカードを表示する方法
カード型チェックボックスを作る方法
カード型カルーセルを作る方法

ナビゲーション

カードをクリックしてリンク先へ移動する方法

応用

FAQ・Q&A向けカードの作り方