やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

📌 ？
トップ > WindowsXP > HTMLのulタグに画像を使うCSSを書いた

HTMLのulタグに画像を使うCSSを書いた

WindowsXP

ファイルツリーを表現するために。

成果物

GitHubHTML.List.Icon.201705112120

前回まで

semantic.uiが全然セマンティックでなかった。

参考

感謝。

Pyalground

See the Pen HTML.List.Icon.201705112120 by ytyaru (@ytyaru) on CodePen.

http://jsdo.it/ytyaru/UbHy/

ソースコード

ul.html

<html>
<head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="ul.css">
<!--
    http://webshufu.com/how-to-cope-with-corruption-of-text-in-content-of-before-pseudo-element/
-->
</head>
<body>

<h2>最小限</h2>

<ul>
    <li class="folder"><span>root</span>
    <ul>
        <li class="file"><span>test.asc</span></li>
    </ul>
    </li>
</ul>

<h2>黒</h2>

<ul>
    <li class="folder"><span>root</span>
        <ul>
            <li class="folder"><span>parent</span>
            <ul>
                <li class="file"><span>test.asc</span></li>
            </ul>
        </ul>
        <li class="file"><span>test.asc</span></li>
    </li>
</ul>

<h2>白</h2>

<ul>
    <li class="folder-o"><span>root</span>
        <ul>
            <li class="folder-o"><span>parent</span>
            <ul>
                <li class="file-o"><span>test.asc</span></li>
            </ul>
        </ul>
        <li class="file-o"><span>test.asc</span></li>
    </li>
</ul>

<h2>マウスオーバー</h2>

<ul>
    <li class="folder-s"><span>root</span>
        <ul>
            <li class="folder-s"><span>parent</span>
            <ul>
                <li class="file-s"><span>test.asc</span></li>
            </ul>
        </ul>
        <li class="file-s"><span>test.asc</span></li>
    </li>
</ul>

</body>
</html>

ul.css

@charset "UTF-8"; 
ul {
    list-style: none;
    margin: 0px;
    padding: 0em;
    padding-left: 1em;
}
ul li.folder:before {
    content: "\f07b";
    font-family: FontAwesome;
    margin-left:-1em;
    vertical-align:middle;
}
ul li.file:before {
    content: "\f15b";
    font-family: FontAwesome;
    margin-left:-1em;
    vertical-align:middle;
}
ul li span {
    padding-left: 0.25em;
}

ul li.folder-o:before {
    content: "\f114";
    font-family: FontAwesome;
    margin-left:-1em;
    vertical-align:middle;
}
ul li.file-o:before {
    content: "\f016";
    font-family: FontAwesome;
    margin-left:-1em;
    vertical-align:middle;
}

ul li.folder-s:before {
    content: "\f114";
    font-family: FontAwesome;
    margin-left:-1em;
    vertical-align:middle;
}
ul li.folder-s:hover:before {
    content: "\f07b";
    font-family: FontAwesome;
    margin-left:-1em;
    vertical-align:middle;
}
ul li.file-s:before {
    content: "\f016";
    font-family: FontAwesome;
    margin-left:-1em;
    vertical-align:middle;
}
ul li.file-s:hover:before {
    content: "\f15b";
    font-family: FontAwesome;
    margin-left:-1em;
    vertical-align:middle;
}

https://developer.mozilla.org/ja/docs/Web/CSS/@charset

所感

下手に膨大なCSSフレームワークを使うより、欲しい機能だけ自分で書いたほうがマシか。