jiichan.com

PROGRAMMING

CSS
javascript
PHP
Java

フォルダ構成をCSSで見やすくする

プログラミングのページを作っていると、たまにフォルダ構成を掲載する必要がでてきます。
コードなどはPrismで見やすくできますが、フォルダの構成をきれいに見やすくする方法が思いつきません。
そんな時にCSSを使って組織図を表現しているサイトを偶然見つけました。一部を利用させていただいて作ってみました。

CSSにより出来上がったフォルダ構成図

  • 第１階層
    • 第２階層
      • 第３階層
        • 第４階層
        • 第４階層
        • 第４階層
      • 第３階層
      • 第３階層
    • 第２階層
      • 第３階層
        • 第４階層
        • 第４階層
        • 第４階層
      • 第３階層
    • 第２階層

フォルダ構成のHTML

階層を見やすくするためにulと子要素のliを揃えました。
フォルダはfd、ファイルはflとクラス名を付けてそれぞれの画像を表示させています。

<ul class="tree">
	<li class="fd">第１階層
		<ul>
			<li class="fd">第２階層
				<ul>
					<li class="fd">第３階層
						<ul>
							<li class="fl">第４階層</li>
							<li class="fl">第４階層</li>
							<li class="fl">第４階層</li>
						</ul>
					</li>
					<li class="fl">第３階層</li>
					<li class="fl">第３階層</li>
				</ul>
			</li>
			<li class="fd">第２階層
				<ul>
					<li class="fd">第３階層
						<ul>
							<li class="fl">第４階層</li>
							<li class="fl">第４階層</li>
							<li class="fl">第４階層</li>
						</ul>
					</li>
					<li class="fl">第３階層</li>
				</ul>
			</li>
			<li class="fl">第２階層</li>
		</ul>
	</li>
</ul>

フォルダ構成のCSS

線、フォルダ名、ファイル名の位置など、好みの問題以外は、基本的に各階層ごとのセレクタを記載する必要はありません。 

/* フォルダの画像 */
.fd {
	background-image: url(../image/folder.png);
	background-repeat: no-repeat;
	background-size: 16px 16px;
	background-position: 1.4em 0.1em;
}
/* ファイルの画像 */
.fl {
	background-image: url(../image/file.png);
	background-repeat: no-repeat;
	background-size: 16px 16px;
	background-position: 1.4em 0.2em;
}

/* 第１階層（ルート） */
.tree {
	line-height: 1.8;	/* 各行の幅 */
	padding:0;
	margin-left: 40px;
}

/* 第２階層以降の各階層の位置 */
.tree ul {
	position:relative;
	margin:0;
	margin-left: 0.3em;
	padding:0;
}

/* すべてのフォルダ名・ファイル名の位置 */
.tree li {
	list-style-type:none;
	position: relative;
	padding-left: 3em;
}

/* すべての縦線 */
.tree ul::before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	height:100%;
	border-left: 1px solid #333;
}
	
/* すべての横線 */
.tree ul li::before {
	content:"";
	position: absolute;
	top:0.7em;
	left:0;
	width: 1em;
	border-top: 1px solid #333;
}

/* 各階層liの最初の文字と画像の位置 */
.tree ul li:first-child {
	padding: 0.3em 0 0 3em;
	background-position: 1.4em 0.4em;
}

/* 各階層liの最初の横線の上下位置 */
.tree ul li:first-child::before {
	top: 1em;
}

/* 各階層liの最後の縦線を └ に */
.tree ul li:last-child::before {
	height:100%;
	background-color: #FFF;
}

これでフォルダ構成が見やすくなりました。是非試して見てください。