HTML的にまったくセマンティックでない。
参考
- https://semantic-ui.com/introduction/getting-started.html
- http://stackoverflow.com/questions/30281258/how-to-use-semantic-ui-cdn
- https://cdnjs.com/libraries/semantic-ui/
- https://code.jquery.com/jquery-3.1.1.min.js
表示
ソースコード
<!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時代に戻ったよう。こんなコードは書きたくない。