Discordコミュニティを作りました! 参加する

フォーラム

トピックを立てる前にチェック
  1. フォーラムガイドライン」に必ず目を通してください。
  2. バージョンアップデート後に表示がおかしくなった場合は、
    「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。
  3. フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
ディレクトリ構造(ツリー表示)のリスト...
 
通知
すべてクリア

ディレクトリ構造(ツリー表示)のリストスタイルが欲しい

2 投稿
2 ユーザー
2 Likes
431 表示
His-
 His-
(@his)
投稿: 61
メンバー
Topic starter
 

お世話になります。

簡単にディレクトリ構造(ツリー)にできるリストスタイルが欲しいです。

具体的には以下のようなデザイン。

リストスタイル(ツリー)

子要素を作るだけで自動的にディレクトリアイコンをつけられるようにコード例を書いてみました。

※現在has()はFirefoxは未対応、対応ブラウザ86.93%

ul li::before {
  content: "■ ";
  color: blue;
}


li:has(ul)::before {
  content: "■ ";
  color: red;
}

ul ul li::after {
  content: "■ ";
  position:absolute;
  top: 0;
  left:-1em;
  color: green;
}

 

すでに出来ているなら自作しろと言われればそれまでですが…カスタマイズに関する記事も多くなってきたのであれば便利かなと。

ご検討よろしくお願いいたします。

お問い合わせ先▶︎https://blog-mi.com/contact/

 
投稿済 : 17/05/2023 2:00 am
momo reacted
了
 
(@loos_ryo)
投稿: 1264
メンバー Admin
 

ありがとうございます!!たしかにこれあると便利ですね...!
各li要素もブロック化されたことで、たしかにそれぞれでアイコンを切り替えるUIも実装できそうです。

一度作ってみます!

SWELL開発者です。

 
投稿済 : 17/05/2023 1:58 pm
momo reacted
共有: