CSSベースのコンテンツアコーディオンを作成する方法
今日のチュートリアルでは、どのようにして作成することができるかを学びます。 CSS3を使用して、水平および垂直コンテンツアコーディオン. この仕事をすることができる多くのjQueryプラグインがありますが、訪問者がJavascriptをオフにしている場合、あなたはどうしますか？あなたのアコーディオンが純粋にCSSの中にあるなら、それはあなたのすべての訪問者のために働くでしょう.
私達は作成するつもりです 水平 そして 垂直 コンテンツアコーディオン。見出しのテキストをクリックするとスライドが開き、コンテンツ全体が表示されます。これがクイックプレビュー（スクリーンショット）です。.
あなたが見るもののように？コーディングを始めましょう!
1. HTMLとコンテンツの準備
まず始めに、アコーディオン用のHTMLを作成します。.
構造はコンテナーを必要とします div それから セクション アコーディオンの各スライドに対して。この例では、5枚のスライドがあります。各スライドには、コンテンツのタイトルと段落があります。.
私たちに関しては
Loremイプサムdolor座ってamet、conittetur adipiscing elit。 Suspendisse id lobortisマッサ。 Nunc viverra vevel leo、amet elementum miを座ってください。 Fusce posuereがmi tempus malesuadaを知らない。キュビツールfacilisis rhoncus eros egetプラセラート。 Aliquam semper maurisはamet justo tempor nec lacinia magna molestieに座ります。気まぐれなPlaceratratは、履歴書adipiscingを主張します。 Aliquam ac erat lorem、iaculis justo。エティアム・マティス・ディグニッシム・グラビダ。 Aliquam nec justoアンティ、non semper mi。ヌルconsectetur interdumマッサ、ベルポルタエニムvulputate sed。 Maecenas elit quam、egestas eget placerat non、fringilla vel eros。 Nam Vehicula elementum nullaがコンクォータット。 Phasellus eu erat enim。 eu loremでマグナノンマッサdapibus scelerisqueの称賛.
サービス内容
Loremイプサムdolor座ってamet、conittetur adipiscing elit。 Suspendisse id lobortisマッサ。 Nunc viverra vevel leo、amet elementum miを座ってください。 Fusce posuereがmi tempus malesuadaを知らない。キュビツールfacilisis rhoncus eros egetプラセラート。 Aliquam semper maurisはamet justo tempor nec lacinia magna molestieに座ります。気まぐれなPlaceratratは、履歴書adipiscingを主張します。 Aliquam ac erat lorem、iaculis justo。エティアム・マティス・ディグニッシム・グラビダ。 Aliquam nec justoアンティ、non semper mi。ヌルconsectetur interdumマッサ、ベルポルタエニムvulputate sed。 Maecenas elit quam、egestas eget placerat non、fringilla vel eros。 Nam Vehicula elementum nullaがコンクォータット。 Phasellus eu erat enim。 eu loremでマグナノンマッサdapibus scelerisqueの称賛.
ブログ
Loremイプサムdolor座ってamet、conittetur adipiscing elit。 Suspendisse id lobortisマッサ。 Nunc viverra vevel leo、amet elementum miを座ってください。 Fusce posuereがmi tempus malesuadaを知らない。キュビツールfacilisis rhoncus eros egetプラセラート。 Aliquam semper maurisはamet justo tempor nec lacinia magna molestieに座ります。気まぐれなPlaceratratは、履歴書adipiscingを主張します。 Aliquam ac erat lorem、iaculis justo。エティアム・マティス・ディグニッシム・グラビダ。 Aliquam nec justoアンティ、non semper mi。ヌルconsectetur interdumマッサ、ベルポルタエニムvulputate sed。 Maecenas elit quam、egestas eget placerat non、fringilla vel eros。 Nam Vehicula elementum nullaがコンクォートを発表Phasellus eu erat enim。 eu loremでマグナノンマッサdapibus scelerisqueの称賛.
ポートフォリオ
Loremイプサムdolor座ってamet、conittetur adipiscing elit。 Suspendisse id lobortisマッサ。 Nunc viverra vevel leo、amet elementum miを座ってください。 Fusce posuereがmi tempus malesuadaを知らない。キュビツールfacilisis rhoncus eros egetプラセラート。 Aliquam semper maurisはamet justo tempor nec lacinia magna molestieに座ります。気まぐれなPlaceratratは、履歴書adipiscingを主張します。 Aliquam ac erat lorem、iaculis justo。エティアム・マティス・ディグニッシム・グラビダ。 Aliquam nec justoアンティ、non semper mi。ヌルconsectetur interdumマッサ、ベルポルタエニムvulputate sed。 Maecenas elit quam、egestas eget placerat non、fringilla vel eros。 Nam Vehicula elementum nullaがコンクォータット。 Phasellus eu erat enim。 eu loremでマグナノンマッサdapibus scelerisqueの称賛.
接触
Loremイプサムdolor座ってamet、conittetur adipiscing elit。 Suspendisse id lobortisマッサ。 Nunc viverra vevel leo、amet elementum miを座ってください。 Fusce posuereがmi tempus malesuadaを知らない。キュビツールfacilisis rhoncus eros egetプラセラート。 Aliquam semper maurisはamet justo tempor nec lacinia magna molestieに座ります。気まぐれなPlaceratratは、履歴書adipiscingを主張します。 Aliquam ac erat lorem、iaculis justo。エティアム・マティス・ディグニッシム・グラビダ。 Aliquam nec justoアンティ、non semper mi。ヌルconsectetur interdumマッサ、ベルポルタエニムvulputate sed。 Maecenas elit quam、egestas eget placerat non、fringilla vel eros。 Nam Vehicula elementum nullaがコンクォートを発表Phasellus eu erat enim。 eu loremでマグナノンマッサdapibus scelerisqueの称賛.
これでスライドが完成し、アコーディオンのスタイルを設定できます。.
2. CSSスタイリング
最初にコンテナをスタイルする必要があります div アコーディオンこれにより、各スライドと各見出しの表示方法がわかります。.
/ *アコーディオンボックスの定義* / .accordion width：830px;オーバーフロー：隠れています。マージン：10px auto。カラー：＃474747。背景：＃414141。パディング：10px。
次に各スライドの見出しを作成します。.
.アコーディオンセクションfloat：left;オーバーフロー：隠れています。カラー：＃333。カーソル：ポインタ。背景：＃333;マージン：3px。アコーディオンセクション：hover background：＃444;
セクションの背景色をダークグレーに設定して、訪問者がクリックしてスライドを表示する見出しにします。このセクションを見出しとコンテンツの両方に使用しています。つまり、使用するHTMLを少なくし、スライドのタイトルをコンテンツの見出しとして再利用することができます。.
.アコーディオンセクションp display：none;
現時点ではすべてのスライドが閉じられるので、スライドが開くまで段落が表示から隠されていることを確認する必要があるので、今のところ段落の表示はなしに設定します。.
.アコーディオンセクション：位置：相対;フォントサイズ：24px。色：＃000;フォントの太さ：太字。アコーディオンセクション：n番目の子（1）：content： '1'の後。アコーディオンセクション：nth-child（2）：content： '2'の後。アコーディオンセクション：nth-child（3）：content： '3'の後。アコーディオンセクション：nth-child（4）：content： '4'の後。アコーディオンセクション：nth-child（5）：content： '5'の後。
スライドを閉じた状態で、見出しの一番下に番号を表示して、どの番号のスライドが表示されているかを確認します。このため、セクション見出しの後にCSSを使用してコンテンツを追加します。これは、 ：後 疑似クラスセレクタ.
スライドの見出しを作成したので、clickイベントを作成してスライドをアコーディオンに表示できます。しかし、問題があります。CSSにはクリックイベントがないため、アコーディオンは通常jQueryを使用して作成されるため、見出しテキストにクリックイベントを添付できます。.
CSSでclickイベントを真似る必要があります。これは、 ：ターゲット 疑似クラスセレクタ.
3.使用 ：ターゲット 擬似クラスセレクタ
：ターゲット フラグメント識別子をスタイルすることができます。ページ上の場所を指すためにページ上のアンカータグを使用することもあります。リンクをクリックすると id アンカータグ内のがターゲットになります。 ：ターゲット セレクタ.
これをアコーディオンに追加するには、見出しの周りにリンクを追加する必要があります。 id スライドの.
私たちに関しては
Loremイプサムdolor座ってamet、conittetur adipiscing elit。 Suspendisse id lobortisマッサ。 Nunc viverra vevel leo、amet elementum miを座ってください。 Fusce posuereがmi tempus malesuadaを知らない。キュビツールfacilisis rhoncus eros egetプラセラート。 Aliquam semper maurisはamet justo tempor nec lacinia magna molestieに座ります。気まぐれなPlaceratratは、履歴書adipiscingを主張します。 Aliquam ac erat lorem、iaculis justo。エティアム・マティス・ディグニッシム・グラビダ。 Aliquam nec justoアンティ、non semper mi。ヌルconsectetur interdumマッサ、ベルポルタエニムvulputate sed。 Maecenas elit quam、egestas eget placerat non、fringilla vel eros。 Nam Vehicula elementum nullaがコンクォータット。 Phasellus eu erat enim。 eu loremでマグナノンマッサdapibus scelerisqueの称賛.
.アコーディオンセクション：ターゲット背景：#FFF;パディング：10px。アコーディオンセクション：ターゲット：ホバー背景：#FFF;アコーディオンセクション：target h2 width：100％;アコーディオンセクション：target h2 a 色：＃333;パディング：０。アコーディオンセクション：ターゲットp 表示：ブロック;アコーディオンセクションh2 a パディング：8px 10px;表示ブロック;フォントサイズ：16px。フォントの太さ：普通。色：#eee;テキスト装飾：なし。
上記のコードは、スライドのサイズを残りのアコーディオンに合わせて変更し、背景色を白に変更します。段落は非表示になっていたので、ターゲット上で段落を表示する必要があります.
アコーディオンの見出しをクリックすると、スライドの内容が表示されるようにスライドのスタイルが変わります。.
4.水平アコーディオン
上のコードは一般的なアコーディオンを作成します。水平アコーディオンと垂直アコーディオンの違いに合わせてCSSを変更します。どちらのアコーディオンも同じ機能を持っていますが、見出しのスタイルは異なります.
.水平断面幅：5％;高さ：250ピクセル。 -moz-transition：幅0.2秒のイーズアウト。 -webkit-transition：幅0.2秒のイーズアウト。 -o-transition：幅0.2秒のイーズアウト。トランジション：幅0.2秒のイーズアウト。
最初に設定します 幅 それは閉じたスライドです。セクションはスライドの見出しとコンテンツの両方であるため、transitionプロパティを使用してコンテンツを表示するためのアニメーションを追加する必要があります。.
/ *スライドの番号を* /。水平方向のセクションの位置に配置：top：140px;左：15ピクセル。
スライド上の番号の位置は、それぞれの閉じた見出しの縦の見出しとは異なる位置にあります。.
/ *閉じたスライドのヘッダ* /。水平セクションh2 -webkit-transform：rotate（90deg）; -moz-transform：rotate（90度）; -o-transform：rotate（90度）;変換：回転（90度）。幅：240ピクセル。位置：相対;左：-100ピクセル。上：85ピクセル。 / *開いたスライドの上にマウスを置いたとき* / .horizontal：target width：73％;高さ：230ピクセル。水平：ターゲットh2 上：0ピクセル;左：0; -webkit-transform：rotate（0deg）; -moz-transform：rotate（0deg）; -o-transform：rotate（0deg）;変換：回転（０度）。
上記のコードは、残りのアコーディオンに合うようにスライドのサイズを変更します。見出しを下に走らせるために見出しを垂直方向に回転させたが、今度はスライドを開いた状態でテキストを0度に回転させることによってテキストを水平方向に戻す必要がある.
垂直アコーディオン
垂直アコーディオンは水平アコーディオンと同じように機能しますが、 高さ の代わりに 幅 テキストの配置を変更する必要はありません.
.垂直断面幅：100％。高さ：40ピクセル。 -webkit-transition：身長0.2秒のイーズアウト。 -moz-transition：身長0.2秒のイーズアウト。トランジション：身長0.2秒のイーズアウト。トランジション：高さ0.2秒 / *スライドの高さを設定* / .vertical：target height：250px;幅：97％。
に ターゲット 垂直アコーディオンの出来事を変えるつもりです 高さ スライドを表示する見出しの.
.垂直断面h 2 位置：相対;左：0;上：-15ピクセル / *スライド上の番号の位置を設定します* / .verticalセクション：after top：-60px;左：810ピクセル。垂直セクション：ターゲット：後左：-9999px;
上記は変更します ポジション 閉じたスライドの見出しテキストの説明。スライドを閉じた状態で、 ポジション アコーディオンの右側にある番号の。スライドが開いているときは、ターゲットが設定されたときに見出しのこの番号を非表示にする必要があるので、画面の左側の位置を変更します。.
アコーディオンの見出しをクリックすると、スライドの内容が表示されるようにスライドのスタイルが変わります。.
編集者注： この投稿はによって書かれています ポールアンダーウッド Hongkiat.comのために。 PaulはイギリスのBristol出身のPHP Web開発者です。彼はWeb開発についてのチュートリアルを書いています。主なテーマはPHP、jQuery、CSS3そしてHTML5です。彼はPaulund.co.ukで有用なコードスニペットも記録しています。.
