アコーディオン 立体的に開くアコーディオンを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
立体的に開くアコーディオンを作る方法 立体的に開くアコーディオンを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、見出しをクリックすると説明ブロックが奥から手前へ飛び出すような立体アニメーションで表示...
ゆきのふ
アコーディオン 
スライダー 立体的に中央の画像を強調するスライダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
立体的に中央の画像を強調するスライダーを作る方法 画像を立体的に配置し、中央に表示される画像を大きく強調するスライダーを作る方法を紹介します。左右の画像は奥へ傾けて配置し、中央の画像だけを手前に表示することで、通常のカルーセルとは異なる奥行...
アコーディオン 3D回転しながら開閉するアコーディオンを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
3D回転しながら開閉するアコーディオンを作る方法 3D回転しながら開閉するアコーディオンを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、見出しをクリックすると選択したアコーディオン項目だけが斜め方向...
タブ切り替え 3D回転するタブ切り替えを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
3D回転するタブ切り替えを作る方法 3D回転するタブ切り替えを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、クリックしたタブボタンだけが斜め方向へ立体的に回転しながら選択状態へ切り替わるタブUIを実...
ポップオーバー 最初から表示されたポップオーバーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
最初から表示されたポップオーバーを作る方法 最初から表示されたポップオーバーを作る方法を紹介します。このサンプルでは、ページを開いた時点でポップオーバーを表示した状態にし、ボタンをクリックすると表示・非表示を切り替えられる基本的な実装を作成...
ドロップダウンメニュー 最初から開いているドロップダウンメニューを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
最初から開いているドロップダウンメニューを作る方法 ページを開いた時点でドロップダウンメニューを表示したい場面では、最初から開いている状態で表示する実装が便利です。初めて訪れるユーザーへ重要なメニューを案内したい場合や、操作してほしい項目を...
トグルスイッチ 複数のトグルスイッチのうち1つだけ最初からONにする方法【HTML/CSS・サンプルコード付き】
複数のトグルスイッチのうち1つだけ最初からONにする方法 複数のトグルスイッチを配置する画面では、特定の項目だけを最初からONの状態で表示したいことがあります。例えば、お知らせメールだけを有効にしておき、それ以外の通知はOFFにする設定画面...
テキストフィールド ページを開くと自動でフォーカスするテキストフィールドを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
ページを開くと自動でフォーカスするテキストフィールドを作る方法 テキストフィールドへ文字を入力してもらう画面では、ページを開いた直後から入力欄を操作できる状態にしておくと、ユーザーが入力欄をクリックする手間を減らせます。このサンプルでは、ペ...
テキストエリア 最初から入力できる状態のテキストエリアを作る方法【HTML/CSS・サンプルコード付き】
最初から入力できる状態のテキストエリアを作る方法 最初から入力できる状態のテキストエリアを作る方法を紹介します。このサンプルでは、HTMLのautofocus属性を使用し、ページを開いた時点でテキストエリアへ自動的にカーソルを入れます。利用...
ツールチップ 最初から表示されたツールチップを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
最初から表示されたツールチップを作る方法 最初から表示されたツールチップを作る方法を紹介します。このサンプルでは、ページを開いた時点でツールチップを表示し、「ここをクリックしてください」などの案内を利用者へすぐ伝えられます。通常のホバー表示...