2019年04月4日(木)
CSSでフォルダツリーを作る
Result
See the Pen File Tree CSS by kachibito
(@kachibito) on CodePen.
こういうの。まぁ特別なものでもないんですがコードがすっきりしてたのでメモ
CMSの管理画面なんかで複雑化したページを階層表示する、とかWebサイトのサイトマップとかいろいろ用途はありそうですcss
.tree {/*親要素*/ position: relative; background: white; margin-top: 20px; padding: 30px; font-size: .85rem; font-weight: 400; line-height: 1.5; color: #212529; } .tree ul {/*親フォルダ*/ padding-left: 5px; list-style: none; } .tree ul li {/*ファイル名部分*/ position: relative; padding-top: 5px; padding-bottom: 5px; padding-left: 15p...
0
0
15
37author:
かちびと.net
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ
Ads
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『CSSでフォルダツリーを作る』についてまとめています。
この記事は特にLINE・Webサービスについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
