colopixie Webデザイン、CSSのテクニック、Webで使える素材を紹介していきます。

HTMLソースからCSSセレクターを吐き出してくれるウェブサービス


膨大なHTMLをZen-Codingでbody#body>div#container>(div#header>h1#sitetitle+div#headermenu>ul>li*5>a)+(div#contents>(div#content>div.entrylist*5>(h2.entrytitle>a)+span.date+p.entrytext+span.entryfooter)+(div#aside>div.side*5>h3.sidetitle+p))+(div#footer>(ul.footermenu>li*5>a)+p.copyright+span.pagetop>a)みたいなのを書いてCmd+Eで展開したのはいいけど、CSSのセレクターを書くのが面倒になってしまったときは下で紹介するサービスが便利ですよ。
2つサービスがあるのですが、ちょっと仕様が異なるので用途によって分けるといいと思います。
サンプルにてヘッダーだけを生成して見ました。

1
2
3
4
5
6
7
8
9
10
11
12
<div id="header">
<h1 id="sitetitle"></h1>
<div id="headermenu">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
</div>

CSS Selector Generator | CSS のセレクタ一覧を一発で自動生成！

CSS Selector Generator | CSS のセレクタ一覧を一発で自動生成！
さっきのZen-codingしたやつをしてみると

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
@charset "UTF-8";
 
/* ///////////////////////////////////////////////////////////////////
 
[header]
[headermenu]
 
/////////////////////////////////////////////////////////////////// */
 
a:link {
}
a:visited {
}
a:hover {
}
a:active {
}
 
/* =========================================================
header
========================================================= */
div#header {
}
 
div#header h1#sitetitle {
}
 
/* =========================================================
headermenu
========================================================= */
div#header div#headermenu {
}
 
div#header div#headermenu ul {
}
 
div#header div#headermenu ul li {
}
 
div#header div#headermenu ul li a {
}

PrimerCSS

PrimerCSS

さっきのZen-codingしたやつをしてみると

1
2
3
4
5
6
7
8
9
10
11
12
13
/* CSS Generated by Primer - primercss.com */
 
div#header {
}
 
h1#sitetitle {
}
 
div#headermenu {
}

ID,CASSSをつけてくれないのとつけてくれないっていう違いが大きですね。
CSS Selector Generatorhはオプションが選べたり。
ただシンプルにID,CLASSだけのセレクターを生成したければ、PrimerCSSでいいと思います。

ちなみに全部展開したHTMLはこちら

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<body id="body">
<div id="container">
<div id="header">
<h1 id="sitetitle"></h1>
<div id="headermenu">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
</div>
<div id="contents">
<div id="content">
<div class="entrylist">
<h2 class="entrytitle"><a href=""></a></h2>
<span class="date"></span>
<p class="entrytext"></p>
<span class="entryfooter"></span>
</div>
<div class="entrylist">
<h2 class="entrytitle"><a href=""></a></h2>
<span class="date"></span>
<p class="entrytext"></p>
<span class="entryfooter"></span>
</div>
<div class="entrylist">
<h2 class="entrytitle"><a href=""></a></h2>
<span class="date"></span>
<p class="entrytext"></p>
<span class="entryfooter"></span>
</div>
<div class="entrylist">
<h2 class="entrytitle"><a href=""></a></h2>
<span class="date"></span>
<p class="entrytext"></p>
<span class="entryfooter"></span>
</div>
<div class="entrylist">
<h2 class="entrytitle"><a href=""></a></h2>
<span class="date"></span>
<p class="entrytext"></p>
<span class="entryfooter"></span>
</div>
</div>
<div id="aside">
<div class="side">
<h3 class="sidetitle"></h3>
<p></p>
</div>
<div class="side">
<h3 class="sidetitle"></h3>
<p></p>
</div>
<div class="side">
<h3 class="sidetitle"></h3>
<p></p>
</div>
<div class="side">
<h3 class="sidetitle"></h3>
<p></p>
</div>
<div class="side">
<h3 class="sidetitle"></h3>
<p></p>
</div>
</div>
</div>
<div id="footer">
<ul class="footermenu">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
<p class="copyright"></p>
<span class="pagetop"><a href=""></a></span>
</div>
</div>
</body>

紹介したもの

CSS Selector Generator | CSS のセレクタ一覧を一発で自動生成！

PrimerCSS

* Comment : 0 * Category-HTML/CSS

コメントを残す