アコーディオン

アコーディオン

ページ遷移後も開閉状態を記憶するアコーディオンの作り方【HTML/CSS/JavaScript・サンプルコード付き】

ページ遷移後も開閉状態を記憶するアコーディオンの作り方 HTML・CSS・JavaScriptを使って、ページを再読み込みした後や別ページへ移動して戻ってきた後でも、アコーディオンの開閉状態を保持する方法を紹介します。このサンプルでは、ブラ...
アコーディオン

横スクロール対応アコーディオンの作り方【HTML/CSS/JavaScript・サンプルコード付き】

横スクロール対応アコーディオンの作り方 HTML・CSS・JavaScriptを使って、横スクロールに対応したアコーディオンを作る方法を紹介します。このサンプルでは、横に並んだ複数のアコーディオン項目を左右へスクロールしながら閲覧でき、各項...
アコーディオン

ボタンクリックで指定したアコーディオンを開く方法【HTML/CSS/JavaScript・サンプルコード付き】

ボタンクリックで指定したアコーディオンを開く方法 HTML・CSS・JavaScriptを使って、ボタンをクリックすると指定したアコーディオンを自動で開く方法を紹介します。このサンプルでは、ボタンを押すとURLハッシュ(URL末尾の「#fa...
アコーディオン

アイコンが180度回転するアコーディオンの作り方【HTML/CSS/JavaScript・サンプルコード付き】

アイコンが180度回転するアコーディオンの作り方 HTML・CSS・JavaScriptを使って、開閉時にアイコンが180度回転するアコーディオンを作る方法を紹介します。このサンプルでは、見出しをクリックすると内容が開閉し、右側の矢印アイコ...
アコーディオン

アイコンが90度回転するアコーディオンの作り方【HTML/CSS/JavaScript・サンプルコード付き】

アイコンが90度回転するアコーディオンの作り方 HTML・CSS・JavaScriptを使って、開閉時にアイコンが90度回転するアコーディオンを作る方法を紹介します。このサンプルでは、見出しをクリックすると内容が開閉し、右側のアイコンが回転...
アコーディオン

アニメーション付きアコーディオンの作り方【HTML/CSS/JavaScript・サンプルコード付き】

アニメーション付きアコーディオンの作り方 HTML・CSS・JavaScriptを使って、開閉時にアニメーションが付いたアコーディオンを作る方法を紹介します。このサンプルでは、見出しをクリックするとコンテンツが滑らかにアニメーションしながら...
アコーディオン

全て開いた状態のアコーディオンを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

全て開いた状態のアコーディオンを作る方法 HTML・CSS・JavaScriptを使って、ページを開いた時点ですべての項目が開いた状態になるアコーディオンを作る方法を紹介します。このサンプルでは、初期状態では全ての内容を表示し、その後は各項...
アコーディオン

初期状態で1つだけ開いているアコーディオンの作り方【HTML/CSS/JavaScript・サンプルコード付き】

初期状態で1つだけ開いているアコーディオンの作り方 HTML・CSS・JavaScriptを使って、ページを開いた直後から1つだけアコーディオンを開いた状態で表示する方法を紹介します。このサンプルでは、最初の項目だけが初期表示時に開いており...
アコーディオン

全て開閉ボタン付きアコーディオンの作り方【HTML/CSS/JavaScript・サンプルコード付き】

全て開閉ボタン付きアコーディオンの作り方 HTML・CSS・JavaScriptを使って、すべてのアコーディオンを一括で開閉できるボタン付きアコーディオンを作る方法を紹介します。このサンプルでは、「全て開く」ボタンと「全て閉じる」ボタンを用...
アコーディオン

全て閉じるボタン付きアコーディオンの作り方【HTML/CSS/JavaScript・サンプルコード付き】

全て閉じるボタン付きアコーディオンの作り方 HTML・CSS・JavaScriptを使って、「全て閉じる」ボタンで一括して閉じられるアコーディオンを作る方法を紹介します。このサンプルでは、各項目を個別に開閉できるだけでなく、「全て閉じる」ボ...