RailsでSlickMapCSSに感動泣き

Rails CSS

リスト形式でサイトマップを書くとグラフィカルに表現してくれるCSS『SlickMap CSS』をRailsで使ってみました。
SlickMap CSSについては下記参照
http://astuteo.com/slickmap/

  1. 上記サイトよりダウンロードしたslickmap.cssをpublic/stylesheetsに配置。
  2. slickmap.cssを開き、『url('images/〜.png')』となっている箇所を『url('../images/〜.png')』に変更。
  3. 同様にダウンロードしたimagesフォルダ配下のPNGファイルをpublic/imagesに配置。
  4. sitemap.rhtmlを作成。以下のように記述。
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>サイトマップsample</title>
  <%= stylesheet_link_tag '/stylesheets/slickmap.css' %>
</head>
<body>
  <div class="sitemap">

      <h1>サイトマップ</h1>

      <ul id="utilityNav">
          <li><a href="/register">ホームページ</a></li>
      </ul>

      <ul id="primaryNav">
          <li id="home"><a href="">Home</a></li>
          <li><a href="">ほげほげ</a>
              <ul>
                  <li><%= link_to 'ほげ', :action => :hoge %></li>
                  <li><%= link_to 'ふが', :action => :fuga %></li>
              </ul>
          </li>
          <li><a href="">ふーばー長官</a>
              <ul>
                  <li><%= link_to 'ふー', :action => :foo %></li>
                  <li><%= link_to 'ばー', :action => :bar %></li>
              </ul>
          </li>
      </ul>

  </div>

</body>
</html>
ポイント
  • stylesheet_link_tagでslickmap.cssをリンクする。
  • サイトマップはclass="sitemap"のdivタグの中に記述する。（そうしないと、floatのせいでサイトマップ以外のレイアウトが崩れます）
  • id="primaryNav"のulタグに書いたリストが階層構造になる。（もちろん入れ子OKです）
  • liタグにid="home"をつけると、その要素がルートになる。
  • aタグの要素がボックスで表示される。（つまり、liタグで階層構造を作って、aタグでノードを作っている感じ）
  • id="utilityNav"のulタグに書いたリストは階層構造にならずに独立したノードになる。ページ右上に表示される。
補足

画像ファイルを使っていますが、それらは階層構造の線のために使っています。よって画像ファイルを配置しなくても、ノードの表示や階層構造の配置は問題ありません。


最初にCSSの中身を見て、「こんなにゴリゴリやってたら表示に結構時間がかかるのでは…」と思ったのですが、実際に使ってみるとほとんど時間はかかりませんでした。
それにしてもCSSでここまでできるんですね！
ちなみに、感動した弾みで今書いています。

今回はダウンロードしたCSSをそのまま使っただけですが、次はCSSをいじって色々試してみたいです。