便利なのが登場! これ一つでWeb制作に役立つ機能がたくさん使用できるChromeの拡張機能 -SuperDev

Web制作に役立つ機能、ルーラー・ガイドを表示したり、ボックスモデルを視覚化したり、カラーピッカーやカラーパレットを取得、気になった要素のHTMLとCSSをCodePenに表示させたりなど、たくさん用意されているChromeの便利な機能拡張を紹介します。

Web制作に役立つ機能がたくさん用意されているChromeの便利な拡張機能 -SuperDev

SuperDevはオープンソースで開発されており、SuperDev -GitHubでコードも公開されています。2022年現在、ChromeとEdgeとBraveの機能拡張として利用できます。

SuperDevをChromeで利用する場合は他の機能拡張と同様に、Chrome ウェブストアからインストールできます。

サイトのキャプチャ

SuperDev -Chrome ウェブストア

上部の「Chromeに追加」をクリックするだけで、インストールできます。

というわけで、インストールしてさっそく使用してみました。

SuperDev

SuperDevを起動したところ

SuperDevには、Web制作に役立つ機能がたくさん用意されています。

SuperDev

SuperDevのパネル

  • Text Editor: Webページのテキストを編集
  • Page Ruler: 2点間の距離をピクセル単位で測定
  • Color Picker: Webページ上のあらゆる箇所(画像も)からカラーを抽出
  • Color Palette: 1クリックでWebページのカラーパレットを取得
  • Page Guideline: ガイドラインでリアルタイムに位置合わせを確認
  • Page Highlight: CSSのボックスモデルをハイライトで視覚化
  • Move Element: Webページ上の任意の要素を移動
  • Delete Element: Webページ上の任意の要素を削除
  • Export Element: 任意の要素のHTML+CSSをエクスポート
  • Take Screenshot: Webページのスクリーンショットを撮影
  • Go Incognito: アクティブなタブをシークレットモードで開く
  • Clear All Cache: キャッシュをクリア

たとえば、「Page Highlight」をクリックすると、下記のようにCSSのボックスモデルをハイライトで視覚化します。

SuperDev

「Page Highlight」をクリック

「Page Guideline」をクリックすると、カーソルに合わせてリアルタイムにガイドラインを表示します。

SuperDev

「Page Guideline」をクリック

ピクセルを測定したいときは、「Page Ruler」をクリック。

SuperDev

「Page Ruler」をクリック

Webページのカラーパレットも1クリックで簡単に生成できます。

SuperDev

「Color Palette」をクリック

その要素がどのように実装されているのかCodePenにHTMLとCSSを持っていくこともできます。

SuperDev

「Export Element」をクリック

任意の要素を移動(Move)したり、削除(Delete)することもできます。

SuperDev

「Move Element」をクリック

sponsors

top of page

©2024 coliss