CSSをWebで簡単に整形、確認チェックするならLiveweaveとCSSテスター

CSSをWebで簡単に整形、確認チェックするならLiveweaveとCSSテスター HTML/CSS

こんにちは、mickです。

WordPressに使う部分的なCSSの動作チェックを簡単にしたい
CSSの確認のために環境をつくりたくない
会員登録なしに簡単にできるサービスを知りたい
CSSで書いたコードを整形したい

こんな要望に応えてたいと思います。

ここでは、私が使っているWebサイト(オンライン)でCSSの動作チェックできる2つのWebサイトを紹介します。

CSSの(見栄えの)動作チェックをするのは「CSSテスター」
CSSの整形とコーディングエラーを見つけるのは「Liveweave」

CSSをオンライン(Webブラウザ)で動作チェックする

CSSをブラウザで動作チェックできたら便利です。

理由は、WordPressやWebサイトを作っているときは、オンラインでいるケースが多いと考えられるから。

実際、私はWordPressの設定や編集をするときは、ネットが繋がるところで作業します。

自分のパソコンにWordPressの環境を構築してない限りは、だいたいみんな同じだと思います。

CSSの動作チェックで確認したいことは2つ。

  1. CSSを使った結果、見栄えはOKか。
  2. CSSのコーディングにエラーはないか。

私は2つのWebサイトを使い分けてCSS書いてます。

CSSテスターと「Liveweave」です。

2021年2月15日現在、CSSテスターはアクセス不可になってました。

CSSによるステータスが見やすくて軽量な「CSSテスター」

CSSの動作チェックができるCSSテスター
CSSの動作チェックができるCSSテスター

CSSの(見栄えの)動作チェックをするなら「CSSテスター」がオススメ。

⇒ CSSテスター

2021年2月15日現在、CSSテスターはアクセス不可になってました。

このサイトがいい点は、とにかく動作が軽いことです。

変なひっかかりもないのでストレスなく利用でます。

CSSの結果をマウスで触った部分の設定状況が見える

CSSテスターの面白い機能は、画面右のCSSの動作結果をマウスで触った(マウスオーバーした)部分を、細かい設定状況をビジュアルで見せてくれる点です。

具体的には、親要素やpositionの設定、marginやpaddingの設定を視覚的に教えてくれます。

結果ウィンドウをマウスで触ると詳細を確認できる
結果ウィンドウをマウスで触ると詳細を確認できる

シンプル過ぎて保存機能やハイライト機能はない

CSSテスターには、保存機能やソースコードのハイライト機能がありません。

これはCSSテスターが軽量なので仕方ない部分だと思ってます。

Googleの検索結果で出てきたCSSテスター

私は、CSSテスターをGoogleの検索結果でみつけました。

CSSテスターは、「株式会社ジェイマックソフト」が運営していること以外のドキュメントがありません。
知名度がないだけなのか、未発表なWebサイトなのか、正直謎です。

CSSのコーディングエラーを教えてくれる「Liveweave」

CSSのコーディングエラーを教えてくれる多機能なCSSの動作チェックWebサイトが「Liveweave」です。

⇒ Liveweave

CSSだけでなく、HTMLやJavaScriptの動作チェックを総合的にすることができます。

機能は豊富で保存機能や共有機能、ユーザー間のチャット機能もあります。
このほか、色味本やSVG編集、マウス操作によるCSSの動作確認などWebサイトの開発の基礎ツールがそろっています。

CSSのコーディングエラーを教えてくれる

Liveweaveは、CSSのコーディングエラーを教えてくれます。

表記は英語ですが、短い文なので簡単です。
それでもわからないときはGoogle翻訳が助けてくれます。

次の画像では、「vertical-align can’t be used with display:block;」と「vertical-alignはdisplay:block;では使うことができない」と教えてくれています。

CSSのコーディングエラーを教えてくれるLiveweave
CSSのコーディングエラーを教えてくれるLiveweave

画面のスクロールに引っかかりがある

長いコーディングをしたとき、スクロールに引っかかりを感じることがあります。
これは、FirefoxとChromeで確認しています。

もしかしたら私の環境だけかも知れません。

ユーザー登録すると複数のCSSをオンラインに保存できる

Liveweaveはユーザー登録をすると複数のCSSをオンラインに保存できるようになります。

また、外出先からも続きが編集できるようになります。

ユーザー登録なしで1つのCSSならオンラインに保存できる

ユーザー登録なしでも1つならCSSをオンラインに保存できます。

オンラインに保存するとIDが発行されます。

LiveweaveのID(ユーザー登録なし)
LiveweaveのID(ユーザー登録なし)

このIDは共有可能。
つまりIDを知っている人なら誰でも閲覧や編集ができます。

オンラインに保存するならユーザー登録した方がいいでしょう。

私はコーディングエラーの確認と整形ができればいいのです。
だからいまのところは、ユーザー登録はしていません。

まとめ。

私が使っているオンラインでCSSの動作チェックできる2つのWebサイトを紹介しました。

CSSの(見栄えの)動作チェックをするのは「CSSテスター」
CSSの整形とコーディングエラーを見つけるのは「Liveweave」

ひとつのツールを使い続けるというよりは、いったりきたりして使います。

  1. CSSテスターでCSSを試す
  2. Liveweaveでコーディングエラーを消して整形する
  3. WordPressに組み込む

この1から3をぐるぐる回ってます。

ひとつの環境で収まると助かるんですけどね。

それでも私は、CSSテスターとLiveweaveで役割分担ができてて気に入ってます。

以上、みなさまの助けなれば幸いです。

初稿 2020/09/29

タイトルとURLをコピーしました