CSSのみでアコーディオンを実装する方法を紹介!

CSSのみでアコーディオンを実装する方法を紹介!

takato(@n8takato)です!

cssだけでアコーディングを作成したい

この記事は上記の課題に向けて作成しています。

本来アコーディオンはjQueryを使いますが、cssのみでも作成出来ます。

jQueryを使いたくない方やcssのみで作成したい方は読んでみてください。

この記事を読むメリット

  • cssのみでアコーディオンを作成する方法がわかる

この記事を書いた人

この記事を書いた僕はこんな人です!

  • 都内制作会社でwebデザイナーとして勤務
  • webデザイナー3年目
  • web制作現場で学んだことを発信している人

〜個人的にオススメなwebデザインスクール3選〜

今なら無料オンライン説明会実施中です!
興味のあるスクールに申し込んでみてください!

目次

CSSのみでアコーディオンを作成する方法

早速CSSのみでアコーディオンを作成する方法を紹介します。

まずは完成系を紹介します。

完成系

日本国民は、正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民との協和による成果と、わが国全土にわたつて自由のもたらす恵沢を確保し、政府の行為によつて再び戦争の惨禍が起ることのないやうにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は、国民の厳粛な信託によるものであつて、その権威は国民に由来し、その権力は国民の代表者がこ…

木曾路はすべて山の中である。あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。東ざかいの桜沢から、西の十曲峠まで、木曾十一宿はこの街道に添うて、二十二里余にわたる長い谿谷の間に散在していた。道路の位置も幾たびか改まったもので、古道はいつのまにか深い山間に埋もれた。名高い桟も…

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてス…

上記のようなアコーディオンを作成します。

使用するHTML

今回使用するHTMLは下記のコードです。

<div class="accordion">
 <div class="option">
  <input type="checkbox" id="toggle1" class="toggle">
   <label class="title" for="toggle1">日本国憲法</label>
    <div class="content">
     <p>日本国民は、正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民との協和による成果と、わが国全土にわたつて自由のもたらす恵沢を確保し、政府の行為によつて再び戦争の惨禍が起ることのないやうにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は、国民の厳粛な信託によるものであつて、その権威は国民に由来し、その権力は国民の代表者がこ...</p>
    </div>
 </div>
        
 <div class="option">
  <input type="checkbox" id="toggle2" class="toggle">
   <label class="title" for="toggle2">夜明け前</label>
    <div class="content">
     <p>木曾路はすべて山の中である。あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。東ざかいの桜沢から、西の十曲峠まで、木曾十一宿はこの街道に添うて、二十二里余にわたる長い谿谷の間に散在していた。道路の位置も幾たびか改まったもので、古道はいつのまにか深い山間に埋もれた。名高い桟も...</p>
    </div>
 </div>
        
 <div class="option">
  <input type="checkbox" id="toggle3" class="toggle">
   <label class="title" for="toggle3">吾輩は猫である</label>
    <div class="content">
     <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてス...</p>
    </div>
 </div>
</div>

「label class=”title” for=””」のタイトル部分をクリックすると<p>の文章が表示されるように設定します。

使用するCSS

cssコードは下記の通りです。

/*アコーディオン全体/*
.accordion {
    margin: 3em auto;
    max-width: 60vw;
}

/*チェックボックスを非表示*/
.toggle {
    display: none;
}

/*ボックス全体の装飾*/
.option {
    position: relative;
    margin-bottom: 1em;
}

.title, .content {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: all 0.3s;
}

.title {
    border: solid 1px #ccc;
    padding: 1em;
    display: block;
    color: #333;
    font-weight: bold;
}

/*右側のマーク*/
.title::after,
.title::before {
    content: "";
    position: absolute;
    right: 1.25em;
    top: 1.25em;
    width: 2px;
    height: 0.75em;
    background-color: #999;
    transition: all 0.3s;
}

/*右側のマーク*/
.title::after {
    transform: rotate(90deg);
}

/*文章を非表示にする*/
.content {
    max-height: 0;
    overflow: hidden;
}

/*文章の装飾*/
.content p {
    margin: 0;
    padding: 0.5em 1em 1em;
    font-size: 0.9em;
    line-height: 1.5;
}

/*クリックすると要素が開く*/
.toggle:checked + .title + .content {
    max-height: 500px;
    transition: all 1.5s;
}
.toggle:checked + .title::before {
    transform: rotate(90deg) !important;
}

cssコードをざっくり説明します。

.content の「overflow: hidden;」で文章を非表示にします。

※「overflow」は領域からはみ出た内容をどのように処理するかというコードです。「hidden」にすると内容は非表示されます。「visible」にするとはみ出た状態で表示します。

「.toggle:checked + .title + .content」でクリックした際に表示されるようにします。

※「:checked」はチェックボックスやラジオボタンがonの状態であることを表す擬似クラスです。擬似クラス内に記入されている要素はクリックされると機能します。

下記が大まかな流れです。

  1. はみ出た文章を「overflow: hidden;」で非表示にする
  2. 「:checked」でクリックすると下に余白が出来るようにする

上記2つの手順でアコーディオンが作成出来ます。

CSSのみでもアコーディオンの設定は出来る!

今回はcssのみでアコーディオンを設定する方法を説明しました。

cssのみで実装したい方は是非やってみてください。

〜個人的にオススメなwebデザインスクール3選〜

今なら無料オンライン説明会実施中です!
興味のあるスクールに申し込んでみてください!

あわせて読みたい
【初心者向け】コーディングの勉強方法を紹介! 効率的なコーディングの勉強方法を知りたい この記事は上記の課題に向けて作成しています。 webデザイナーを目指す方にとってコーディング学習は必須です。 これからコ...
  • URLをコピーしました!
目次