2019年09月12日(木)
CSSデバッグを少し手伝ってくれる小さなスクリプト・「debugCSS.js」
debugCSS.js
debugCSS.jsはCSSのデバッグ作業を少しだけ手伝ってくれる小さなスクリプトです。サイズは非圧縮でも1kb、圧縮版は600バイトほどです。何をしてくれるかは上サンプルの通り、要素にアウトラインを引くだけです。色はランダムです。
オプションで指定した要素を対象外にする事が出来ます。まぁこれだけなんですが。
コード
var selector = document.querySelectorAll("*");セレクタはデフォルトでは全部指定されています
else if (typeof options.selector === "undefined") { var selector = document.querySelectorAll(`*:not(${options.not}) > *`); }オプション設定されたときは:notを付けて対象外にする
function randomColor() { var letters = '0123456789ABCDEF'.split(''); var color = "#"; for (var i = ...
author:
かちびと.net
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ
‹ PREV
かなり便利!VS CodeでCSSを書きながらFlexboxのチートシートを利用できる -CSS Flexbox Cheatsheet
NEXT ›
新米デザイナーが組織で活躍する方法とは!
関連記事
Ads
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『CSSデバッグを少し手伝ってくれる小さなスクリプト・「debugCSS.js」』についてまとめています。
この記事は特にjavascript・LINEについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。