ゆきのふ

アコーディオン

PDFをアコーディオンで表示する方法【HTML/CSS/JavaScript・サンプルコード付き】

PDFをアコーディオンで表示する方法 HTML・CSS・JavaScriptを使って、PDFをアコーディオン内に表示する方法を紹介します。このサンプルでは、見出しをクリックしたときだけPDFを展開し、必要なときだけ資料や書類を表示できます。...
アコーディオン

iframeをアコーディオンで表示する方法【HTML/CSS/JavaScript・サンプルコード付き】

iframeをアコーディオンで表示する方法 HTML・CSS・JavaScriptを使って、iframeをアコーディオン内に表示する方法を紹介します。このサンプルでは、見出しをクリックしたときだけiframeを展開し、Webページや外部コン...
アコーディオン

Googleマップをアコーディオンで表示する方法【HTML/CSS/JavaScript・サンプルコード付き】

Googleマップをアコーディオンで表示する方法 HTML・CSS・JavaScriptを使って、Googleマップをアコーディオン内に表示する方法を紹介します。このサンプルでは、見出しをクリックしたときだけGoogleマップを展開し、必要...
モーダルウインドウ

フェード+スライド演出で自然に開閉するモーダルウインドウの作り方【HTML/CSS/JavaScript・サンプルコード付き】

フェード+スライド演出で自然に開閉するモーダルウインドウの作り方 HTML・CSS・JavaScriptを使って、フェードとスライドアニメーションを組み合わせたモーダルウインドウを作る方法を紹介します。このサンプルでは、ボタンをクリックする...
モーダルウインドウ

上部ナビバーからドロップダウン風に表示するモーダルウインドウの作り方【HTML/CSS/JavaScript・サンプルコード付き】

上部ナビバーからドロップダウン風に表示するモーダルウインドウの作り方 HTML・CSS・JavaScriptを使って、上部ナビバーからドロップダウン風に表示するモーダルウインドウを作る方法を紹介します。このサンプルでは、ヘッダー内のボタンを...
ドロワーメニュー

ページ遷移後も開閉状態を記憶するドロワーメニューの作り方【HTML/CSS/JavaScript・サンプルコード付き】

ページ遷移後も開閉状態を記憶するドロワーメニューの作り方 HTML・CSS・JavaScriptを使って、ページ遷移後も開閉状態を記憶するドロワーメニューを作る方法を紹介します。このサンプルでは、ドロワーメニューを開いた状態をブラウザに保存...
モーダルウインドウ

グラデーション背景と半透明オーバーレイ付きモーダルウインドウの作り方【HTML/CSS/JavaScript・サンプルコード付き】

グラデーション背景と半透明オーバーレイ付きモーダルウインドウの作り方 HTML・CSS・JavaScriptを使って、グラデーション背景と半透明オーバーレイを組み合わせたモーダルウインドウを作る方法を紹介します。このサンプルでは、ボタンをク...
モーダルウインドウ

モーダルウインドウ内にモーダルウインドウを表示する方法【HTML/CSS/JavaScript・サンプルコード付き】

モーダルウインドウ内にモーダルウインドウを表示する方法 HTML・CSS・JavaScriptを使って、モーダルウインドウ内からさらに別のモーダルウインドウを表示する方法を紹介します。このサンプルでは、親モーダルを開いた状態でボタンをクリッ...
モーダルウインドウ

モーダルウインドウ表示時に背景をぼかす方法【HTML/CSS/JavaScript・サンプルコード付き】

モーダルウインドウ表示時に背景をぼかす方法 HTML・CSS・JavaScriptを使って、モーダルウインドウを表示した際に背景をぼかす方法を紹介します。このサンプルでは、ボタンをクリックすると背景コンテンツにぼかし効果が適用され、モーダル...
ドロワーメニュー

閉じるボタンのないドロワーメニューを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

閉じるボタンのないドロワーメニューを作る方法 HTML・CSS・JavaScriptを使って、閉じるボタンを置かずに操作できるドロワーメニューを作る方法を紹介します。このサンプルでは、ボタンをクリックすると画面左側からドロワーメニューを表示...