ホームページ作成/リストの表示・装飾 (HTML,CSS)

クリックで深い階層が現れるリストの作り方

サイトマップのような「項目数が多くて長くなるリスト」に活用すると便利な、「項目をクリックすることで深い階層が現れるリスト」の作り方をご紹介。リストが長い場合は、どこに何があるのかが把握しにくくなります。初期状態ではリストを「折り畳まれた状態」にしておき、閲覧者が見たいと思う階層だけをその都度表示する方が、望みの項目が探しやすくなって便利です。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

項目数が多いリストは見づらい

サイトマップのような「項目数が多くて長くなるリスト」は、望みの項目を探し出すのが大変です。最初からすべての項目を表示するよりも、閲覧者が見たいと思う階層だけを表示できるようにする方が、望みの項目を探しやすくなるでしょう。そこで今回は、「項目をクリックすることで深い階層が現れるリスト」を作ってみます。

項目をクリックすることで次々に下層が開くリスト

項目をクリックすることで次々に下層が開くリスト


閲覧者がリスト内の項目をクリックすると、次の階層が現れます。同じ項目をもう一度クリックすると、現れた階層だけが消えます(畳まれます)。これなら、リストが不必要に長くならないため、見やすくなるでしょう。

リストそのものはHTMLのul要素とli要素を使って作成しており、スクリプトで動的に生成しているわけではありません。そのため、スクリプトが利用できない環境からアクセスされても、リスト自体は問題なく閲覧できます。

スクリプトが利用できない環境でも、普通のリストとして見える。

スクリプトが利用できない環境でも、普通のリストとして見える。


スクリプトが使えなくても問題なく閲覧できるということは、
  • 検索エンジンのクローラーなど、ウェブ上の情報を自動収集していくツール
  • 音声読み上げブラウザなど、スクリプトを実行しないユーザエージェント
  • セキュリティ上の都合で、スクリプト機能が無効に設定されている環境
などからでも、問題なくリストの中身を閲覧できるということです。

このリストの実現方法は簡単で、
  1. HTMLのul要素とli要素を使ってリストを作る
  2. HTMLのa要素を使ってリンクを作る(+CSSで装飾を施す)
  3. 短いJavaScriptを記述して、クリックに応じて展開・縮小できるようにする
という3つのステップでソースを記述するだけです。JavaScriptソースはコピー&ペーストするだけで使えますので、気軽に試してみて下さい。

それでは、クリックで深い階層が現れるリストの作り方を順に見ていきましょう

  • 1
  • 2
  • 3
  • 4
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます