カードUI Googleマップ付きカードを作る方法【HTML/CSS・サンプルコード付き】
Googleマップ付きカードを作る方法 Googleマップ付きカードを作る方法を紹介します。カードの中にGoogleマップ、タイトル、説明文をまとめて表示することで、店舗情報や会社案内、イベント会場などの位置情報を見やすく掲載できます。アク...
ゆきのふ
カードUI 
カードUI PDF付きカードを作る方法【HTML/CSS・サンプルコード付き】
PDF付きカードを作る方法 PDF付きカードを作る方法を紹介します。カードの中にPDF表示エリア、タイトル、説明文をまとめることで、資料やパンフレット、案内文書などをWebページ上で見やすく表示できます。PDFファイルを別ページへ移動せずに...
カードUI YouTube動画付きカードを作る方法【HTML/CSS・サンプルコード付き】
YouTube動画付きカードを作る方法 YouTube動画付きカードを作る方法を紹介します。カードの中にYouTube動画、タイトル、説明文をまとめて表示することで、動画コンテンツを見やすく整理できます。動画紹介、講座ページ、商品説明、レビ...
カードUI ボタン付きカードを作る方法【HTML/CSS・サンプルコード付き】
ボタン付きカードを作る方法 ボタン付きカードを作る方法を紹介します。カードレイアウトは、商品紹介やサービス一覧、料金プラン、おすすめ記事など、情報を見やすく整理して表示する場面でよく利用されます。カード内にボタンを配置することで、詳細ページ...
カードUI 画面幅に合わせてカードを自動で折り返す方法【HTML/CSS・サンプルコード付き】
画面幅に合わせてカードを自動で折り返す方法 画面幅に合わせてカードを自動で折り返す方法を紹介します。このサンプルでは、複数のカードを横方向に並べ、表示できる横幅が狭くなるとカードが自動的に次の行へ移動するレイアウトを作成します。PC・タブレ...
カードUI 横スクロールできるカード一覧を作る方法【HTML/CSS・サンプルコード付き】
横スクロールできるカード一覧を作る方法 横スクロールできるカード一覧を作る方法を紹介します。このサンプルでは、複数のカードを横方向に並べ、表示エリアの横幅に収まらないカードを横スクロールして確認できるレイアウトを作成します。カードを次の行へ...
カードUI 画像付きカードを作る方法【HTML/CSS・サンプルコード付き】
画像付きカードを作る方法 画像付きカードを作る方法を紹介します。このサンプルでは、HTMLとCSSを使用して、カードの上部に画像、その下にタイトルと説明文を配置したシンプルなカードUIを作成します。画像と文章をひとつのまとまりとして表示でき...
カードUI マウスホバーで浮き上がるカードを作る方法【HTML/CSS・サンプルコード付き】
マウスホバーで浮き上がるカードを作る方法 マウスホバーで浮き上がるカードを作る方法を紹介します。このサンプルでは、カードへマウスカーソルを合わせるとカード全体が少し上方向へ移動し、影も変化することで浮き上がったように見えるカードUIを作成し...
ヘッダー 選択中のメニューに下線が付くヘッダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
選択中のメニューに下線が付くヘッダーを作る方法 選択中のメニューに下線が付くヘッダーを作る方法を紹介します。このサンプルでは、サイト名と複数のメニューを横並びに配置し、現在選択しているメニューだけ文字色を青色へ変更して下線を表示します。どの...
ヘッダー 下へスクロールすると隠れる固定ヘッダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
下へスクロールすると隠れる固定ヘッダーを作る方法 下へスクロールすると隠れ、上へスクロールすると再び表示される固定ヘッダーを、HTML・CSS・JavaScriptで作る方法を紹介します。このサンプルでは、ページを開いた直後は「Sample...