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

アコーディオン

アコーディオンにiframeでYouTube・PDF・Googleマップを表示する方法

カードUI

iframeでPDF・Googleマップ・YouTubeをカード内に表示する方法
カードの上下・左右に画像を配置する方法
ボタン付きカードを作る方法

スライダー

YouTube動画をカルーセルで表示する方法
iframeをスライダーで表示する方法
Googleマップを表示するスライダーを作る方法

セレクトボックス

画像をセレクトボックスで切り替える方法

タブ切り替え

タブで画像ギャラリーを切り替える方法
タブで画像を切り替える方法
画像クリックで切り替わるカルーセルを作る方法
YouTube動画をタブ切り替えに表示する方法
PDFをタブ切り替えに表示する方法
iframeをタブ切り替えに表示する方法
Googleマップをタブ切り替えに表示する方法

チェックボックス

カード型チェックボックスの作り方｜カード全体をクリックして複数選択
画像をチェックボックスにする方法

ツールチップ

Googleマップをツールチップに表示する方法
iframeをツールチップに表示する方法
YouTube動画をツールチップに表示する方法
PDFをツールチップに表示する方法
画像付きツールチップを作る方法
長い文章を表示できるツールチップの作り方

テーブル

Googleマップをテーブルに表示する方法
PDFをテーブルに表示する方法
iframeをテーブルに表示する方法
YouTube動画をテーブルに表示する方法
画像付きテーブルを作る方法
テーブルにタイトルを付ける方法

トグルスイッチ

画像を切り替えるトグルスイッチを作る方法

トースト

Googleマップをトーストに表示する方法
PDFをトーストに表示する方法
iframeをトーストに表示する方法
YouTube動画をトーストに表示する方法
画像付きトーストを作る方法

ドロップダウンメニュー

Googleマップをドロップダウンメニューに表示する方法
PDFをドロップダウンメニューに表示する方法
iframeをドロップダウンメニューに表示する方法
YouTube動画をドロップダウンメニューに表示する方法
画像付きドロップダウンメニューを作る方法

ドロワーメニュー

画像をドロワーメニューに拡大表示する方法
画像ギャラリーをドロワーメニューで表示する方法
MP4動画プレーヤーをドロワーメニューで表示する方法
MP3音楽プレーヤーをドロワーメニューで表示する方法
YouTube動画をドロワーメニューに表示する方法
PDFをドロワーメニューに表示する方法
iframeをドロワーメニューに表示する方法
Googleマップをドロワーメニューに表示する方法

ボタン

ボタン付きカードを作る方法

ポップアップ

画像付きポップアップを表示する方法

ポップオーバー

画像付きポップオーバーを表示する方法

モーダルウインドウ

FAQ・Q&A向けモーダルウインドウの作り方
MP4動画プレーヤーをモーダルウインドウで表示する方法
MP3音楽プレーヤーをモーダルウインドウで表示する方法
PDFをモーダルウインドウに表示する方法
iframeをモーダルウインドウに表示する方法
Googleマップをモーダルウインドウに表示する方法
YouTube動画をモーダルウインドウに表示する方法
画像ギャラリーをモーダルウインドウで表示する方法
画像をモーダルウインドウに拡大表示する方法

ラジオボタン

画像付きラジオボタンの作り方｜選択ボタン付き・画像全体をクリックする2種類