カードUI カードをドラッグして並び替える方法【HTML/CSS/JavaScript・サンプルコード付き】
カードをドラッグして並び替える方法 カードをドラッグして並び替える方法を紹介します。このサンプルでは、一覧に並んだカードをドラッグして好きな位置へ移動し、表示順を自由に変更できます。タスク管理、商品一覧、コンテンツ一覧、管理画面など、利用者...
ゆきのふ
カードUI 
カードUI ボタンクリックでカードを展開して詳細を表示する方法【HTML/CSS/JavaScript・サンプルコード付き】
ボタンクリックでカードを展開して詳細を表示する方法 ボタンクリックでカードを展開して詳細を表示する方法を紹介します。このサンプルでは、カード内の「詳しく見る」ボタンをクリックすると詳細エリアが展開され、もう一度クリックすると折りたたまれるカ...
カードUI マウスドラッグで上下左右に自由に360度回転できるカードを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
マウスドラッグで上下左右に自由に360度回転できるカードを作る方法 マウスドラッグで上下左右に自由に360度回転できるカードを作る方法を紹介します。カードをドラッグすると、マウスの動きに合わせて上下左右へ回転し、表面だけでなく裏面も確認でき...
カードUI マウスの動きに合わせて傾くカードを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
マウスの動きに合わせて傾くカードを作る方法 マウスの動きに合わせて傾くカードを作る方法を紹介します。カードの上でマウスを動かすと、カーソルの位置に合わせてカードが左右や上下へ傾き、立体感のある動きを表現できます。カード自体は移動せず、その場...
カードUI クリックで裏表が切り替わるカードを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
クリックで裏表が切り替わるカードを作る方法 クリックで上下左右に裏表が切り替わるカードを作る方法を紹介します。カードをクリックすると表面から裏面へ切り替わり、もう一度クリックすると元の表面へ戻るカードUIを作成できます。このサンプルでは、左...
カードUI カードにNEW通知バッジを付ける方法【HTML/CSS・サンプルコード付き】
カードにNEW通知バッジを表示する方法 カードの右上にNEW通知バッジを表示する方法を紹介します。このサンプルでは、カードを基準にバッジを絶対配置し、右上から少しはみ出す位置へ赤色の「NEW」ラベルを重ねて表示します。JavaScriptは...
カードUI カードに斜めリボンを付ける方法【HTML/CSS・サンプルコード付き】
カードに斜めリボンを付ける方法 カードの右上に斜めリボンを付ける方法を紹介します。このサンプルでは、カード内に配置した「NEW」ラベルをCSSのtransformで45度回転させ、右上を横切る斜めリボンとして表示します。画像やJavaScr...
カードUI カードをクリックしてリンク先へ移動する方法【HTML/CSS・サンプルコード付き】
カードをクリックしてリンク先へ移動する方法 カード全体をクリックしてリンク先へ移動する方法を紹介します。このサンプルでは、HTMLのa要素でカード全体を囲み、見出しや説明文だけでなくカード内の余白部分もクリックできるリンクカードを作成します...
カードUI 画像を左右に配置したカードを作る方法【HTML/CSS・サンプルコード付き】
画像を左右に配置したカードを作る方法 画像を左右に配置したカードを作る方法を紹介します。このサンプルでは、HTMLとCSSを使用して、カードの左側と右側にそれぞれ画像を配置し、中央にタイトルと説明文を表示するレイアウトを作成します。Flex...
カードUI 画像付きの横長カードを作る方法【HTML/CSS・サンプルコード付き】
画像付きの横長カードを作る方法 画像付きの横長カードを作る方法を紹介します。このサンプルでは、カードの左側に画像、右側にタイトルと説明文を配置し、横方向に情報をまとめて表示します。画像と文章を横並びにすることで、縦長カードよりも高さを抑えな...