モーダルウインドウ ページを移動しても開閉状態を記憶するモーダルウインドウの作り方【HTML/CSS/JavaScript・サンプルコード付き】
ページを移動しても開閉状態を記憶するモーダルウインドウの作り方 ページを移動しても開閉状態を記憶するモーダルウインドウの作り方を紹介します。このサンプルでは、モーダルウインドウを開いた状態で別のページへ移動しても、移動先で開いた状態を復元で...
ゆきのふ
モーダルウインドウ 
トグルスイッチ ページを移動してもON/OFFを記憶するトグルスイッチの作り方【HTML/CSS/JavaScript・サンプルコード付き】
ページを移動してもON/OFFを記憶するトグルスイッチの作り方 ページを移動してもON/OFFを記憶するトグルスイッチの作り方を紹介します。このサンプルでは、トグルスイッチで切り替えたON・OFFの状態をJavaScriptのlocalSt...
テキストボックス 誤ってページを移動・再読み込みしても入力内容が消えないテキストボックスの作り方
テキストエリアに入力した文章を自動保存し、誤ってページを移動したり、再読み込みしたりしても、入力内容が消えないようにする方法を紹介します。文章を入力するたびに内容が保存されるため、保存ボタンを押す必要はありません。 ページを離れてから戻った...
セレクトボックス ページを移動・再読み込みしても選択状態を保持するセレクトボックスの作り方
ページを移動したり、再読み込みしたりしても、最後に選択した項目を保持するセレクトボックスを作ります。通常のセレクトボックスはページを開き直すと初期状態に戻ることがありますが、今回の方法では選択した値をブラウザに保存し、次にページを表示したと...
アコーディオン ページを移動しても開閉状態を記憶するアコーディオンの作り方
開閉状態を記憶するアコーディオンは、見出しをクリックして開いた項目や閉じた項目の状態を保存し、ページを再読み込みしても同じ状態を復元できる仕組みです。通常のアコーディオンとは異なり、再読み込みによってすべての項目が閉じることなく、最後に操作...
ポップオーバー ポップオーバーを開いたときに背景をぼかしたり暗くしたりする方法
ポップオーバーを開いたときに、背後の背景をぼかしたり暗くしたりする方法を紹介します。ボタンをクリックすると、背景に半透明のオーバーレイが重なり、その手前にポップオーバーが表示されます。 今回のデモでは、「背景をぼかす」と「背景を暗くする」の...
ポップアップ 背景をぼかして表示するポップアップの作り方【HTML/CSS/JavaScript・サンプルコード付き】
背景をぼかして表示するポップアップの作り方 背景をぼかして表示するポップアップの作り方を紹介します。このサンプルでは、ページを読み込むと画面中央にポップアップを表示し、同時に背後のページ内容へぼかしを加えます。背景の文字やコンテンツをぼかす...
ポップアップ 背景を暗く表示するポップアップの作り方【HTML/CSS/JavaScript・サンプルコード付き】
背景を暗く表示するポップアップの作り方 背景を暗く表示するポップアップの作り方を紹介します。このサンプルでは、ページを開いたときにポップアップを表示し、その背後へ半透明の暗い背景を重ねることで、ポップアップの内容を目立たせます。JavaSc...
ドロップダウンメニュー ドロップダウンメニューを開いた時の背景をぼかしたり暗くしたりする方法
ドロップダウンメニューを開いたときに、背景をぼかしたり暗くしたりする方法を紹介します。メニューの背後に半透明のレイヤー（オーバーレイ）を重ねることで、背景の見え方を変え、開いているメニューを目立たせることができます。 今回は「背景をぼかす」...
通知 基本のお知らせバーを作る方法【HTML/CSS・サンプルコード付き】
基本のお知らせバーを作る方法 基本のお知らせバーを作る方法を紹介します。このサンプルでは、ページを開くとブラウザの画面上部へ横幅いっぱいのお知らせバーが表示されます。HTMLでお知らせ内容を作成し、CSSで画面上部へ固定するシンプルな構成な...