ドロワーメニュー 最初から開いたドロワーメニューを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
最初から開いたドロワーメニューを作る方法 最初から開いたドロワーメニューを作る方法を紹介します。このサンプルでは、ページを表示した時点で画面左側からドロワーメニューが開いた状態になり、利用者がすぐにメニューを確認できます。通常は「メニューを...
ゆきのふ
ドロワーメニュー 
ドロップダウンメニュー 最初から開いているドロップダウンメニューを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
最初から開いているドロップダウンメニューを作る方法 ページを開いた時点でドロップダウンメニューを表示したい場面では、最初から開いている状態で表示する実装が便利です。初めて訪れるユーザーへ重要なメニューを案内したい場合や、操作してほしい項目を...
トグルスイッチ 複数のトグルスイッチのうち1つだけ最初からONにする方法【HTML/CSS・サンプルコード付き】
複数のトグルスイッチのうち1つだけ最初からONにする方法 複数のトグルスイッチを配置する画面では、特定の項目だけを最初からONの状態で表示したいことがあります。例えば、お知らせメールだけを有効にしておき、それ以外の通知はOFFにする設定画面...
テキストボックス 最初から入力できる状態のテキストボックスを作る方法【HTML/CSS・サンプルコード付き】
最初から入力できる状態のテキストボックスを作る方法 最初から入力できる状態のテキストボックスを作る方法を紹介します。HTMLのautofocus属性を利用すると、ページを開いた直後から入力欄が選択された状態になり、ユーザーはクリックすること...
テキストエリア 最初から入力できる状態のテキストエリアを作る方法【HTML/CSS・サンプルコード付き】
最初から入力できる状態のテキストエリアを作る方法 最初から入力できる状態のテキストエリアを作る方法を紹介します。このサンプルでは、HTMLのautofocus属性を使用し、ページを開いた時点でテキストエリアへ自動的にカーソルを入れます。利用...
ツールチップ 最初から表示されたツールチップを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
最初から表示されたツールチップを作る方法 最初から表示されたツールチップを作る方法を紹介します。このサンプルでは、ページを開いた時点でツールチップを表示し、「ここをクリックしてください」などの案内を利用者へすぐ伝えられます。通常のホバー表示...
チェックボックス 最初から項目が選択されたチェックボックスを作る方法【HTML/CSS・サンプルコード付き】
最初から項目が選択されたチェックボックスを作る方法 最初から項目が選択されたチェックボックスを作る方法を紹介します。このサンプルでは、HTMLのchecked属性を使用して、ページを開いた時点で任意のチェックボックスへチェックが入った状態を...
タブ切り替え 最初から指定したタブが選択されたタブ切り替えを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
最初から指定したタブが選択されたタブ切り替えを作る方法 最初から指定したタブが選択されたタブ切り替えを作る方法を紹介します。このサンプルでは、ページを開いた時点で2番目の「CSS」タブを選択状態にし、対応するコンテンツを最初から表示します。...
アコーディオン 最初から1つだけ開いているアコーディオンの作り方【HTML/CSS/JavaScript・サンプルコード付き】
最初から1つだけ開いているアコーディオンを作る方法 最初から1つだけ開いているアコーディオンを作る方法を紹介します。このサンプルでは、ページを開いた時点で最初の項目だけを展開した状態で表示し、残りの項目は閉じた状態で開始します。各見出しをク...
アコーディオン 最初から全て開いたアコーディオンを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
最初から全て開いたアコーディオンを作る方法 最初から全て開いたアコーディオンを作る方法を紹介します。このサンプルでは、ページを表示した時点ですべてのアコーディオンが開いた状態になり、必要に応じて各項目をクリックして個別に開閉できます。通常の...