No.1





    作業箇所
    ・グリル　　(●)(×)
    ・フィルター(●)(×)
    ・グリル　　(●)(×)
    ・フィルター(●)(×)
    ・グリル　　(●)(×)
    ・フィルター(●)(×)
    ▶チェック　(〇)(×)

    No.2





    作業箇所
    ・グリル　　(●)(×)
    ・フィルター(●)(×)
    ・グリル　　(●)(×)
    ・フィルター(●)(×)
    ・グリル　　(●)(×)
    ・フィルター(●)(×)
    ▶チェック　(〇)(×)

    No.3





    作業箇所
    ・グリル　　(●)(×)
    ・フィルター(●)(×)
    ・グリル　　(●)(×)
    ・フィルター(●)(×)
    ・グリル　　(●)(×)
    ・フィルター(●)(×)
    ▶チェック　(〇)(×)

    No.4





    作業箇所
    ・グリル　　(●)(×)
    ・フィルター(●)(×)
    ・グリル　　(●)(×)
    ・フィルター(●)(×)
    ・グリル　　(●)(×)
    ・フィルター(●)(×)
    ▶チェック　(〇)(×)

    No.5





    作業箇所
    ・グリル　　(●)(×)
    ・フィルター(●)(×)
    ・グリル　　(●)(×)
    ・フィルター(●)(×)
    ・グリル　　(●)(×)
    ・フィルター(●)(×)
    ▶チェック　(〇)(×)

    No.6





    作業箇所
    ・グリル　　(●)(×)
    ・フィルター(●)(×)
    ・グリル　　(●)(×)
    ・フィルター(●)(×)
    ・グリル　　(●)(×)
    ・フィルター(●)(×)
    ▶チェック　(〇)(×)

    No.7





    作業箇所
    ・グリル　　(●)(×)
    ・フィルター(●)(×)
    ・グリル　　(●)(×)
    ・フィルター(●)(×)
    ・グリル　　(●)(×)
    ・フィルター(●)(×)
    ▶チェック　(〇)(×)

    No.8





    作業箇所
    ・グリル　　(●)(×)
    ・フィルター(●)(×)
    ・グリル　　(●)(×)
    ・フィルター(●)(×)
    ・グリル　　(●)(×)
    ・フィルター(●)(×)
    ▶チェック　(〇)(×)

    Q. CSSのみでアコーディオンを作ることはできますか？


    はい、detailsとsummary要素を使用していただくことで、HTMLのみでアコーディオンの挙動を作成することができます。

    また、CSSを付与することで、デザインもお好きに変更していただくことができます。
    アコーディオンが開いているときのスタイルははsummary要素の[open]属性を使ってデザインしていきましょう。