(cache)CSSで目次を開閉できるようにデザインする

CSSで目次を開閉できるようにしてみました。

最初は目次を閉じた状態にしておき、ボタンをクリックしたら目次リストが表示と非表示で切り替わる開閉式のデザインです。

CSSで目次を開閉できるようにデザインするときの基本的な作業は3ステップくらいの工程で完成させることができます。

1. 目次を開閉するHTML構造
2. CSSで目次を開閉できるようにする
3. 目次が表示と非表示で開閉する仕組み
4. CSSで目次のデザインを仕上げる
5. 目次リストにアイコン表示したデザイン
6. まとめ

目次を開閉するHTML構造

目次をCSSでデザインしていくために、HTMLで開閉するデザインに使用する「目次のボタン」と「ボタンをクリックしたら目次が開く要素」をマークアップして目次構造を作成します。

「目次ボタン部分」と開閉する「目次ボックス」を2つのパーツとして考えてHTMLを記述していくとCSSのときも分かりやすいです。

まずは目次ボタン部分のHTML です。

<div class="l_toc">
    <label for="tocopen">目次-OPEN</label>
    <input id="tocopen" type="checkbox">
</div>

divでマークアップした要素を目次の親要素にしています。

class属性を記述したクラス名は、CSSで目次全体をデザインしたり、目次を開閉するための表示と非表示の切り替えスイッチ、チェックボックスの非表示などに必要です。

labelとinputは、labelのfor属性とinputのidを同じ値名にして紐づけします。紐付けることで、チェックボックスにチェックを入れたり外したりの連動ができます。

次に開閉する目次ボックスのHTMLです。

<ol class="toc_container">
    <li><a href="#">目次.1</a>
        <ol>
            <li><a href="#">目次1.1</a></li>
            <li><a href="#">目次1.2</a></li>
        </ol>
    </li>
    <li><a href="#">目次.2</a>
        <ol>
            <li><a href="#">目次2.1</a></li>
            <li><a href="#">目次2.2</a></li>
        </ol>
    </li>
    <li><a href="#">目次.3</a>
        <ol>
            <li><a href="#">目次3.1</a></li>
            <li><a href="#">目次3.2</a></li>
        </ol>
    </li>
</ol>

親のolタグにclass属性を記述しておき、CSSで目次をデザインするスタイル用のクラス名を記述しておきます。

ここでマークアップする親のolのクラスは、目次を開閉するボタンをクリックしたとき、目次ボックスの表示と非表示ができるようにするCSS記述で必要なクラスです。

目次リストのaタグは目次から見出しへとジャンプするリンクが入ります。目次を使用するページの見出と目次をidで繋げます。

この辺の詳細は「HTMLで目次を作成してCSSでデザインする」の記事の「目次から見出しにジャンプする」の章で説明していますので参考にしてください。

目次から見出しにジャンプするHTML

作成した「目次ボタン部分」「目次ボックス部分」の2つのパーツ部分は合体させます。

<div class="l_toc">
    <label for="tocopen">目次-OPEN</label>
    <input id="tocopen" type="checkbox">
    <ol class="toc_container">
        <li><a href="#">目次.1</a>
            <ol>
                <li><a href="#">目次1.1</a></li>
                <li><a href="#">目次1.2</a></li>
            </ol>
        </li>
        <li><a href="#">目次.2</a>
            <ol>
                <li><a href="#">目次2.1</a></li>
                <li><a href="#">目次2.2</a></li>
            </ol>
        </li>
        <li><a href="#">目次.3</a>
            <ol>
                <li><a href="#">目次3.1</a></li>
                <li><a href="#">目次3.2</a></li>
            </ol>
        </li>
    </ol>
</div>

目次の親要素内にlabel要素、inputタグ、ol要素の順番で１つにまとめます。

CSSで目次を開閉できるようにする

目次を開閉するHTMLが作成できたら、目次を開閉できるようにするCSSを記述していきます。

/*****
目次ボタンクリックでtoc_containerを開く
******/

#tocopen:checked+.toc_container {
    display: block;
    padding: 45px;
    border: 4px solid tan;
}

CSSで目次を開閉できるようにするには、:checked擬似クラスを使用して、隣接セレクタを作ります。

:checked擬似クラスのセレクタは、HTMLで作成したinput id=”tocopen”のid名に:checkedを記述。

そして+で「目次ボックス」の.toc_containerクラスと結合した隣接セレクタを作ります。

記述した隣接セレクタには、display: block;を指定します。

ブロック要素にしたボックスは、目次のlabelボタンをクリックして開閉する要素なので、目次が開いたときに目次全体が窮屈なデザインにならないように、paddingで45pxの余白を与えてデザインしておきます。

また開く目次の枠をborderを指定してデザインしておきます。

CSSで目次を開閉できるようにデザインした、ここまでの時点で一度、目次の表示確認をします。

目次ボタンの「目次-OPEN」をクリックします。すると以下の画像のようにチェックボックスにチェックが入った状態になり、目次ボックスの表示がボーダーの枠とpaddingの余白でデザインした表示に切り替わります。

CSSで目次を開閉できるようにするデザインが成功しています。しかし目次のデザインが切り替わる目次の作り方が成功してるだけなので、目次デザインに必要ない要素を非表示にして完成させます。

/*****
目次ボタンクリックでtoc_containerを開く
******/

#tocopen:checked+.toc_container {
    display: block;
    padding: 45px;
    border: 4px solid tan;
}

/*****
チェックボックスと開閉する目次ボックスは非表示
****/

.toc_container,.l_toc input[type="checkbox"]{
    display: none;
}

目次デザインに必要ない要素は「チェックボックス」と「目次ボックス」の2つです。

この2つの要素はHTMLでid属性とclass属性を付与してます。

チェックボックス　id=”tocopen”
開閉する目次ボックス　class=”toc_container”

toc_containerは、そのままクラスセレクタにします。tocopenはinputタグのチェックボックスなので、.l_toc input[type=”checkbox”]と属性セレクタで記述し、display: none;で非表示にします。

そうすると目次の親要素内部のinputタグのチェックボックスが非表示に、開閉する目次ボックスは、目次ボタンをクリックする前は非表示にデザインしておけます。

目次が表示と非表示で開閉する仕組み

デザインした目次が開閉するCSSの仕組みについて少し解説したいと思います。

<div class="l_toc">
    <label for="tocopen">目次-OPEN</label>
    <input id="tocopen" type="checkbox">
    <ol class="toc_container">
        <！--開閉する目次ボックスの部分-->
    </ol>
</div>

目次のボタンがlabelとinput。この2つは、for属性とid属性で紐付けることで目次ボタンになるlabelをクリックした際に、inputタグのチェックボックスとの連動によってチェックが入る。またtype=”checkbox”のinputタグなのでチェックを「入れる(開く)」「外す(閉じる)」が可能。

これが目次ボタン側の仕組みです。

次に「目次ボックス」が開閉する仕組みです。

/*****目次ボタンクリックでtoc_containerを開く******/

#tocopen:checked+.toc_container {
    display: block;
}

/*****チェックボックスと開閉する目次ボックスは非表示****/

.toc_container,.l_toc input[type="checkbox"]{
    display: none;
}

#tocopen:checked+.toc_container

上記の:checked擬似クラスと+の結合子を使用した隣接セレクタが、開閉する仕組みを作っています。

目次ボタン側の仕組みで使用しているinputタグの「チェックボックス」に「チェックが入ったら」inputタグに「隣接する目次ボックスの要素」を開く。のような条件でCSSのセレクタを記述してます。

ですがチェックが入ったら開く.toc_containerをCSSで非表示にしているため、目次ボタンをクリックして開く要素をどのようにディスプレイ表示して切り替えていいのか分からないです。

そのためチェックが入ったらdisplay: block;のCSSを適用することで、目次ボックスが表示と非表示で開閉するという仕組みです。

ようは「チェックボックスにチェックしたら何を開きたいか」の「何」の要素をどのように表示したいかという感じです。

CSSで目次のデザインを仕上げる

CSSで目次を開閉できるようにする仕組みを作成してしまえば、あとは目次を使用するブログなどのレイアウトに合わせてデザインを仕上げるだけです。

サンプルデザインは全体的にシンプルな目次デザインです。

/*****目次*****/

.l_toc {
    width: 95%;
    max-width: 500px;
    margin: 30px auto;
    position: relative;
    top: 38px;
    left: 0;
}

.l_toc label {
    background-color: tan;
    padding: 10px;
    position: absolute;
    top: -40px;
    left: 0;
}

.toc_container {
    background-color: #fff;
    width: 100%;
}
.toc_container ol>li {
    margin: 10px 0px;
}

目次全体の幅は、CSSでwidth: 95%の最大幅500pxで画面いっぱいに広がらないようにしてます。

目次の余白については、margin: 30px autoで上下の余白を30pxずつにして、横のautoで中央に寄せてます。

そして目次の親要素をposition: relative;で基準にします。これは目次ボタンのラベルを、目次の親要素左上に配置したデザインにするために指定しました。

目次ボタンのデザインは、余白で見やすくして、隣接セレクタで指定したboarderの目次枠の色と統一した色でデザイン。

そしてposition: absolute;で目次の親要素の左上に目次ボタンを移動させた配置のデザインに仕上げます。

目次を使用するページにはあらかじめ以下の記述をしています。

box-sizing: border-box;
olとliにlist-style: none;
aタグにtext-decoration: none;

CSSで目次を開閉できるようにデザインしたページを表示して確認します。

labelのボタンは目次の開くと閉じるを兼用しています。目次ボタンをクリックすると以下の画像のようにデザインした目次が開きます。

開いた目次のリスト先頭にアイコンが表示してますね。この目次デザインはCSSの擬似要素:beforeでデザインします。

目次リストにアイコン表示したデザイン

CSSで目次リストにアイコンを表示したデザインにするときには、擬似要素を使用します。

上の画像のように、目次が開閉される親要素にclass属性を付与してあるので、CSSでは、そのクラス名で直下セレクタにして、擬似要素を記述します。

/*****目次リスト先頭にアイコン*****/

.toc_container>li::before {
    color: deeppink;
    font-family: "Font Awesome 5 Free";
    content: '\f105';
    padding-right: 8px;
}

.toc_container ol>li::before {
    color: rgb(110, 20, 255);
    font-family: "Font Awesome 5 Free";
    content: '\f105';
    padding-right: 8px;
}

目次リストの親階層は、.toc_container>li::beforeと記述してセレクタにします。

CSSの適用先はtoc_containerの直下のli要素達です。

目次リストの子階層は、.toc_container ol>li::beforeと記述したセレクタにします。

CSSの適用先はtoc_containerのol要素直下のli要素達です。

あとは記述したセレクタに、目次に使用するWebフォント名をfont-familyに記述して、contentの値にフォントコードの記述をします。

上記のCSSでは、目次リストにFont Awesomeのアイコンを表示したデザインにしています。

Font AwesomeのアイコンをHTMLとCSSで表示する

目次デザインの表示をしてみるとCSSでデザインした目次は親と子のリストに、それぞれのアイコンを表示した目次デザインにできます。最終的な細かい目次のデザインやレイアウト調整は、それぞれのサイトのページに合わせて微調整すれば、CSSで目次を開閉できるようにデザインする作業は完成です。

ざっくりと作成したページに、今回CSSでデザインした開閉できる目次を組み込んだCode Penを以下に貼り付けておきます。「Result」で見られます。

まとめ

CSSで目次を開閉できるようにデザインするポイントは１つだけだと思っています。

目次ボタンにチェックが入ったら、目次ボックスを開閉するための仕組みになるCSSのセレクタの記述

目次が開閉する仕組みが作成できてしまえば、目次の動きが視覚的に見えてくるので、デザインする目次のイメージが湧きやすくなり、目次デザインが楽しく思えてきます。

CSSで目次を開閉できるようにデザインする

目次を開閉するHTML構造

CSSで目次を開閉できるようにする

目次が表示と非表示で開閉する仕組み

CSSで目次のデザインを仕上げる

目次リストにアイコン表示したデザイン

まとめ

CSSカテゴリの最新記事

CSSでボックスを中央に配置するやり方を覚える

CSSで隙間ができる原因をいくつか解決してみる

CSSで目次を開閉できるようにデザインする

CSSで背景をチェック柄で透過したデザインにするやり方

CSSのnth-childとnth-of-typeの違いを覚える

CSSの擬似クラスnth-child系の使い方を覚える