効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

こんにちは、@cappeeです。

HTMLでコーディングしたclassやidを毎回コピペしてCSSに貼り付けるのって面倒ですよね?

なんと!HTMLからCSSセレクタを自動生成してくれるサービスがあるんですよ。

かなり爆速でコーディングができるようになると思ったんですが結構サービスによって記述方法に差があり、最近やっと自分の書き方に合うサービスがリリースされたので、これを機にサービスのまとめと比較をしてみたいと思います。

みなさんの記述方法に適したサービスが見つかれば嬉しいです:)

すべてのサービスこちらのHTMLからCSSセレクタを自動生成しました。

<div id="contents">
<div id="main">
<p class="txt"></p>
</div>
<div id="side">
<ul>
<li class="lists"></li>
</ul>
</div>
</div>

CSS Selector Generator

 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

私が一番最初にCSSセレクタ自動生成のサービスを知ったのが「CSS Selector Generator」です。

Web業界の方なら一度は見たことがあるだろうバシャログ。を運営しているシーブレインさんがつくったサービスです。

特徴

394a2eed4073422f4a12fc740df43414 300x195 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

特徴としては下記になります。

  • 文字コードの指定ができる
  • 最初から入れておきたいセレクタを指定できる
  • 除外する要素を指定できる
  • id、class セレクタからHTMLの要素タイプ名を省略できる
  • id セレクタを複数記述しないかを選べる

一番シンプルなCSSセレクタ

「id、class セレクタからHTMLの要素タイプ名を省略」と「id セレクタを複数記述しない」にチェックして出力された一番シンプルなコードはこちらです。
個人的には基本classやid名のみで記述したかったので、こちらのサービスは残念ながら使ってませんでした;;

d38b89dfdcf8c28d8160c8a7f1db819a 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

子孫要素を記述するCSSセレクタ

何も省略せずにデフォルトの状態で出力すると下記のようにHTMLタグとclassやid名をすべて記述した形になります。
一番上にコメントで階層を表示してくれるのは嬉しいですね。
文字コードと最初から入れておきたいセレクタも記述されているので、HTMLをほぼコーディングした状態でがつっとセレクタ出力するにはよさげです。

a9e107460f492e0360eeb5d90b2dc6c0 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

OneClickCSS

 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

2013年にリリースされたばかりの「OneClickCSS」です。

特徴

OneClickCSS 300x122 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

  • LESS/SCSS/SASS に対応
  • 子孫要素を記述するか選択できる(要素を半角スペースで区切る)
  • 子要素を記述するか選択できる(要素を「>」で区切る)
  • タグ要素を記述するか選択できる

一番シンプルなCSSセレクタ

「Simple CSS」ボタンでセレクタを生成すると「タグ要素無し」にチェックをしなくても省略された状態で出力されます。
私はこの記述方法なので今後はこちらの「OneClickCSS」サービスを愛用することでしょう!
コメントを入れてくれるのも嬉しいですね:)

OneClickCSS2 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

子孫要素を記述するCSSセレクタ

子孫要素まで記述する場合は「Childrens CSS」ボタンから生成できます。(>の子要素を記述する場合は「Child CSS」ボタンで)

OneClickCSS3 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

LESS/SCSS/SASSで記述するCSSセレクタ

これがすごいですね!なんとLESS/SCSS/SASS に対応しています。
下記は「LESS/SCSS」ボタンで生成した場合のセレクタです。

OneClickCSS4 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

Primer

 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

Primer」は海外のサービスで、出力方法などは選択できません。
HTMLタグ+class,id名 という形になります。

CSSセレクタ

Primer 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

CSS Frame Generator

 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

こちらの「CSS Frame Generator」も海外のサービスで、出力方法などは選択できません。
セレクタは一行になっていて、class名にはHTMLタグがつくようです。

CSSセレクタ

Your CSS Frame XHTML to CSS Converter 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

bear css

 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

bear css」は他のサービスとは違い、HTMLファイルをアップすることでCSSセレクタが記述されたCSSファイルをダウンロードすることができます。
一気にHTMLを書いてCSSを出力したいという方にはいいかもしれませんね。

CSSセレクタ

bare css 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

それぞれ特徴があるので自分にぴったりのCSSセレクタ自動生成サービスを見つけてくださいね。

 

Pocket
article clipper 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較