サイトマップの実装で面倒な階層を繋ぐラインも簡単に実装できるサイトマップ用スタイルシート -Slickmap CSS

Flexboxで実装された美しいサイトマップを簡単に実装できるビジュアル サイトマップ ツールを紹介します。サイトマップはレスポンシブ対応で、第4階層までのコンテンツに対応しています。

階層を繋ぐラインなど、実装が面倒な要素も簡単に利用できます。

Slickmap CSS
Slickmap CSS -GitHub

• Slickmap CSSのデモ
• Slickmap CSSの使い方

Slickmap CSSのデモ

デモは、下記ページ下部の「View Demo」から。

Slickmap CSS

サイトマップは第4階層までのコンテンツに対応しており、画像は一切使用されていません。レスポンシブ対応で、スクリーンサイズに応じて、レイアウトが最適化されます。

デモページ

Slickmap CSSの使い方

Step 1: HTML

コンテンツの構造をリスト要素で実装します。

ホームページは最初のアイテムに記述し、idをhomeにします。これにより第2階層へのツリーが設定できます。

Step 2: 外部ファイル

当スタイルシートを外部ファイルとして記述します。

slickmap.cssの最後にレスポンシブ対応のスタイルシートが記述されており、必要な列数を超えるクエリを削除またはコメントアウトして使用します。