【初心者】htmlで折りたたみ機能をつけるやり方2つを紹介

公開日: 2021.09.15
更新日: 2024.01.06
html 折りたたみ

自分のサイトに折りたたみ機能をつけたいが、やり方がわからない・・・

こう思う方は多いのではないでしょうか。本記事をお読みいただくと以下が分かります。

  • htmlで折りたたみ機能をつけるやり方がわかる

基本的なことなのにやり方が分からず途方に暮れる経験は誰しもあると思います。是非本記事をお読みいただき、折りたたみ機能のつけ方を習得してください。

htmlで折りたたみ機能つけるのはどんな時?

折りたたみ機能は便利ですが、むやみやたらにつければいいものではありません。1つの画面に文字数・情報量が多いの時のみつけるようにしましょう

自身のサイトを作っていると、どうしても色々コンテンツを追加してしまい、1画面に大量の情報量が入ってしまうことがあります。そのまますべてのコンテンツが1画面に表示されていると読みづらく、ユーザの離脱にも繋がります。

そんな時に折りたたみ機能をつけると画面全体がすっきりして、読みやすいサイトを作ることができます。

htmlで折りたたみ機能をつけるやり方

それでは、具体的な折りたたみ機能のつけ方を紹介します。htmlでの折りたたみ機能のつけ方はシンプルで、「detailsタグ」「summaryタグ」を使用します。

具体例を見た方が分かりやすいと思うので、早速コードを紹介します。

パターン1

まずはシンプルな折りたたみ機能のつけ方です。全体をdetailsタグで囲い、クリックする部分に表示したいテキストをsummaryタグで囲います

そして実際に折りたたんでおきたいコンテンツを<li>で囲えば折りたたみ機能がつけられます。

HTML
<details>
 <summary>クリックして詳細をチェック</summary>
  <li>情報1</li>
  <li>情報2</li>
  <li>情報3</li>
</details>

いかがでしょうか。非常にシンプルにコードが書けることがお分かりいただけたと思います。

パターン2

もう1つ、折りたたみ機能のパターンを紹介します。パターン1はデフォルトでコンテンツが折りたたまれている状態(=上の例で言うと情報1、情報2、情報3が見えない状態)でしたが、場合によってはデフォルトでコンテンツを表示しておき、必要に応じて折りたためるようにしておきたいというケースがあると思います。

というのも、折りたたみ機能は便利ですがユーザにとっては折りたたみ機能がつけられていることにそもそも気が付かないデメリットがあります。そんなとき、デフォルトでコンテンツを表示しておけばユーザが隠したいコンテンツを自分で選ぶことができるので便利です。

それでは、具体例を見ていきましょう。基本はパターン1と同じですが、detailsタグにopen属性を加えることで実現できます

HTML
<details open> 
  <summary>クリックして詳細をチェック</summary>
    <li>情報1</li>
    <li>情報2</li>
    <li>情報3</li>
</details>

パターン1と同様、すごくシンプルにコードを書けることがお分かりいただけたと思います。

発展 折りたたみ機能にデザインを追加する

基本的な書き方の紹介は以上ですが、最後にcssを利用して折りたたみ機能にデザインを追加するやり方を解説します。

例えば折りたたみコンテンツも含めて背景色を付けたい場合、まずHTMLでdetailsタグにidを追加します(id名は任意です、今回はpattern1とします)。

その次に、CSSでIDを指定した上でカスタマイズしたい内容を追加します。

HTML
<details id=pattern1> 
  <summary>クリックして詳細をチェック</summary>
    <li>情報1</li>
    <li>情報2</li>
    <li>情報3</li>
</details>
CSS
#pattern1 {
background-color:#7fffd4;
width:300px;
}

まとめ

いかがでしたでしょうか。HTMLで折りたたみ機能をつけるやり方を紹介しました。クリックして折りたたみコンテンツを表示するやり方(パターン1)、デフォルトでコンテンツを表示しておくやり方(パターン2)、そして最後にCSSでデザインを追加するパターンがありました。

どれもシンプルなコードで実現できることがお分かりいただけたと思います。CSSでのデザインの追加は凝ろうと思えば無数にパターンが存在するので、是非本記事をきっかけに自身のサイトのクオリティ向上に役立ててください。


プログラミングやパソコンを使って働きたい!

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください!

\プログラミングを学んで/
人生を変えた3名

インタビュー記事一覧 >

\プログラミングスクールを比較/

DMM WEBCAMP

COACHTECH

RUNTEQ

DMM WEBCAMP COACHTECH RUNTEQ
目指せる姿 WEBエンジニアへの転職
フリーランスエンジニア WEBエンジニアへの転職
分割払い
補助金 ×
転職保証 × ×
受講期間 12週間〜 3ヶ月〜 5ヶ月〜
特徴 【IT業界の転職を一番に考えたい方向け】
大手DMMが運営のプログラミングスクール
転職成功率98.8%
豊富なキャンペーンや補助金制度あり
【フリーランスを目指したい方向け】
フリーランスのエンジニアを最短で目指す
エンジニアと共に実際の案件開発を担当
【とことん勉強してから転職したい方向け】
1,000時間(約9カ月)のカリキュラムでしっかり勉強
企業の求める即戦力のWEBエンジニアを目指す
料金 329,350円〜
※給付金適用後
42万9,000円~ 55万円

公式HP

公式HP

公式HP

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5