やってみる

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

SemanticUIでファイルツリーを記述してみたらdivタグ地獄だった

HTML的にまったくセマンティックでない。

参考

表示

f:id:ytyaru:20170511190608p:plain

ソースコード

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <title>Semantic UI CDN</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css"/>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script>
</head>
<body>

<div class="ui list">
    <div class="item">
        <i class="folder icon"></i>
        <div class="content">
            <div class="header">src</div>
                <div class="list">
                    <div class="item">
                        <i class="file icon"></i>
                        <div class="content">
                          <div class="header">test.asc</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

わかりやすくするため最小限にした。しかし膨大なタグ。

失望した点

  • <ul>,<li>タグを使っていない
  • <div>タグ多すぎ
    • ui list, item, content, header, list, item
      • CSSをセマンティックにしたらしいが、これ見て分かるか?

理想

こんな感じのを期待していたのに。

test.html

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

AsciiDocでは以下のように書けたらいいな。

test.asc

[file]
* root
** test.asc

または以下。

[file]
----
root
    test.asc
---- 

所感

HTML4.1時代に戻ったよう。こんなコードは書きたくない。