素晴らしいCSS専用アコーディオンを作成する4つの方法
コンテンツアコーディオンは便利なデザインパターンを作ります。メニュー、リスト、画像、記事の抜粋、テキストスニペット、さらにはビデオなど、さまざまな用途に使用できます。
そこにあるほとんどのアコーディオンは頼りにします JavaScript、主にjQuery, しかし、高度なCSS3技術の使用が広まったので、次のような良い例を見つけることができます。 HTMLとCSSのみを使う, JavaScriptが無効になっている環境でアクセス可能にする.
CSSのみのアコーディオンを作成するのは難しい作業です。この記事では、 開発者が概念を作成する必要があるときに使用する主な概念を理解する.
CSSのみのタブを作成する際には、通常2つの主な方法があり、それぞれに2つの頻繁な使用例があります。最初のアプローチは利用します 隠しフォーム要素, 2番目のものはを利用しながら CSS疑似セレクタ.
1.ラジオボタン方式
ラジオボタン方式は、隠しラジオ入力と対応するラベルタグをアコーディオンの各タブに追加します。論理は簡単です。ユーザーがタブを選択すると、基本的にそのタブに属するラジオボタンをチェックします。フォームに入力するときも同じです。アコーディオンの次のタブをクリックすると、次のラジオボタンを選択します。.
この方法では, 開くことができるタブは1つだけです 同時に。 HTMLのロジックは次のようになります。
コンテンツのタイトル（ここではh1タグを使用しないでください）
いくつかのコンテンツ…
p>
必要がある 各タブに個別のラジオラベルペアを追加する アコーディオンで。 HTMLだけでは望みどおりの動作は得られません。適切なCSSルールも追加する必要があります。それを実現する方法を見てみましょう。.
固定高さ垂直タブ
この解決策（下のスクリーンショットを参照）では、開発者はラジオボタンを使ってラジオボタンを隠しました。 表示：なし。 そして、各タブのタイトルを保持するlabelタグへの相対位置と、対応するタブへの絶対位置を指定します。 ラベル：後 疑似要素.
後者は、タブを開く緑色の+記号の付いたハンドルを持ちます。閉じたタブも緑色でマークされたハンドルを利用しています “-” 兆候CSSでは閉じたタブはelement + element selectorの助けを借りて選択されます.
開いているタブの内容を固定の高さにする必要もあります。これを行うには、element1〜element2 CSSセレクターを使用して、開いているタブの本体（上記のHTMLのtab-contentクラスでマークされている）を選択します。.
CSSの基本的なロジックは次のとおりです。
input [type = radio] 表示：なし。ラベル位置：相対;表示ブロック; label：content： "+"の後。位置：絶対右：1em入力：チェック済み+ラベル：後コンテンツ： " - ";入力：チェックされた〜.tab-content 高さ：150ピクセル;
Codepenで、完全なCSSを見ることができます。 CSSはもともとSassで書かれていますが、をクリックすると “コンパイル済みビュー” ボタンをクリックすると、コンパイル済みのCSSファイルが表示されます。.
ラジオボタン付きの画像アコーディオン
この美しい画像アコーディオンは同じラジオボタン方法を使います、しかしラベルの代わりに、ここの開発者 figcaption HTMLタグを使いました アコーディオンの振る舞いを成し遂げるために.
主にこの場合タブが垂直ではなく水平に配置されるため、CSSは多少異なります。開発者は、エレメント+エレメントCSSセレクタ（前のケースではトグルを選択するために使用されていました）を使用して、カバーされたイメージの端がまだ表示されたままになるようにしました.
このエレガントなCSS専用アコーディオンの作り方についての詳細なガイドを読んでください。.
2.チェックボックス方式
チェックボックスメソッドは、ラジオボタンの代わりにチェックボックス入力タイプを利用します。ユーザーがタブを選択するとき、彼らは基本的に対応するチェックボックスをチェックします.
ラジオボタン方式と比較した場合の違いは、 同時に複数のタブを開くことが可能, フォーム内の複数のチェックボックスをチェックすることができるのと同じように.
一方、ユーザーが別のタブをクリックしても、タブが自動的に閉じることはありません。 HTMLのロジックは以前と同じですが、この場合は入力タイプにチェックボックスを使用する必要があります。.
コンテンツのタイトル（ここではh1タグを使用しないでください）
いくつかのコンテンツ…
p>
固定高チェックボックスアコーディオン
高さ固定のコンテンツタブが必要な場合、CSSのロジックはラジオボタンの場合とほとんど同じです。入力タイプがラジオからチェックボックスに変更されただけです。このCodepenペンでは、コードを見ることができます.
液高チェックボックスアコーディオン
同時に複数のタブが開いている場合、固定の高さのタブを表示すると、アコーディオンの高さが大幅に大きくなる可能性があるため、ユーザーエクスペリエンスに悪影響を及ぼす可能性があります。これは改善すれば 固定の高さを液体の高さに変更;つまり、開いているタブの高さは、保持しているコンテンツのサイズに応じて拡大または縮小されます。.
そうするためにあなたはする必要があります タブコンテンツの固定の高さを最大の高さに変更します。, そして 相対単位を利用する：
入力：checked〜.tab-content 最大の高さ：50em;
この方法がどのように機能するのかをもっとよく知りたいのなら、このCodepenを見てください。.
3.：ターゲットメソッド
：targetはCSS3の疑似セレクタの一つです。その助けを借りて、次のようにHTML要素をアンカータグにリンクすることができます。
タブのタイトル
タブの内容
ユーザーがタブのタイトルをクリックすると、セクション全体が開きます。 ：ターゲット 疑似セレクタを使用すると、URLも次の形式に変更されます。 www.some-url.com/#tab-1.
開いているタブはCSSの助けを借りてCSSでスタイルすることができます。 セクション：ターゲット… ルール。私たちはここでhongkiat上であなたがどのように素晴らしいCSSだけのアコーディオンを作成することができるかについて素晴らしいチュートリアルを持っています ：ターゲット 縦と横の両方のレイアウトでのメソッド.
の主な欠点 ：ターゲット 方法はそれです ユーザーがタブをクリックしたときにURLを変更します。. これはブラウザの履歴に影響し、ブラウザの戻るボタンはユーザーを前のページに移動させるのではなく、アコーディオンの前の状態に移動させます。.
4.：ホバー方法
この後者の欠点は、我々がこれを利用すれば克服することができます。 ホバー 代わりのCSS疑似セレクタ ：ターゲット, しかしこの場合、タブはクリックではなくホバーイベントに反応しません。ここでのトリックはあなたがする必要があるということです。 ホバーしていない要素を非表示にする, または 幅や高さを減らす - タブのレイアウトに応じて
アコーディオンを機能させるには、ホバーされた要素を表示するか、全幅/高さに設定する必要があります。.
次の3つのCSSのみのアコーディオンはすべて：hoverメソッドで作られています、スクリーンショットの下のリンクをクリックしてコードを見てください。.
水平画像アコーディオン
歪んだアコーディオン
デフォルト状態のホバーアクティブ化アコーディオン
