タブ切り替え 縦型タブ切り替え（右タブ版）を作る方法【HTML/CSS/JavaScript・サンプルコード付き】
縦型タブ切り替え（右タブ版）を作る方法 HTML・CSS・JavaScriptを使って、右側にタブを配置した縦型タブ切り替えを作る方法を紹介します。このサンプルでは、右側のタブをクリックすると対応するコンテンツへ切り替わり、左側に内容を表示...
タブ切り替え 
タブ切り替え YouTube動画をタブ切り替えで表示する方法【HTML/CSS/JavaScript・サンプルコード付き】
YouTube動画をタブ切り替えで表示する方法 HTML・CSS・JavaScriptを使って、YouTube動画をタブ切り替えで表示する方法を紹介します。このサンプルでは、複数のタブをクリックすると、対応するYouTube動画だけを表示で...
タブ切り替え PDFをタブ切り替えで表示する方法【HTML/CSS/JavaScript・サンプルコード付き】
PDFをタブ切り替えで表示する方法 HTML・CSS・JavaScriptを使って、PDFをタブ切り替えで表示する方法を紹介します。このサンプルでは、複数のタブをクリックすると、対応するPDFだけを表示できます。会社案内、商品カタログ、マニ...
タブ切り替え iframeをタブ切り替えで表示する方法【HTML/CSS/JavaScript・サンプルコード付き】
iframeをタブ切り替えで表示する方法 HTML・CSS・JavaScriptを使って、iframeをタブ切り替えで表示する方法を紹介します。このサンプルでは、複数のタブをクリックすると、対応するiframeだけを表示できます。外部ページ...
アコーディオン ページ遷移後も開閉状態を記憶するアコーディオンの作り方【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を使って、開閉時にアニメーションが付いたアコーディオンを作る方法を紹介します。このサンプルでは、見出しをクリックするとコンテンツが滑らかにアニメーションしながら...