コーディング

CSS などのカラーコードをわかりやすく表示するAtomパッケージ「pigments」

2016.09.08

2017.09.07

絵具のパレット

スタイルシートを記述する際に、色を16進数のカラーコードで指定するのは一般的です。ですが数字の文字列ではどのような色なのか後からわかりにくいことがあります。
エディタがatomであれば「pigments」というパッケージを利用する事でカラーコード入力時にその色を表示させることができ、指定した色がどんな色か視認できるようになります。

色情報に関する様々な機能を持つpigments

パッケージをアクティブにするとCSSやscssなどでカラーコードの記述箇所にその色が表示されるようになります。

表示を方法を枠線や下線に変更することもできます。

便利なオプションコマンド

Pigments: Show Palette

プロジェクト内でPigmentsが認識した色の変数をパレットとして表示してくれます。
各所の色定義を一覧で確認できるので、cssだけでなくsassで複数のファイルにまたがって色設定を行っている場合などに便利です。

Pigments: Find Colors

色の変数だけでなくカラーコードで直接設定されているものなど、Pigmentsが認識できる色のデータ全てを表示するコマンドです。

Pigments: Convert To Hexadecimal/Pigments: Convert to RGBA

色コードの形式をRGBaに変換してくれるコマンドです。右クリックから行えます

制作中のプロジェクトを視覚的に捉えられるのはコーディング作業を便利にしますし、モチベーションアップにも繋がります。
設定項目も多いので好みのカスタマイズで利用してみてください。

SHARE

この記事の筆者

Web&Soundクリエイター 田村 培修

Web&Soundクリエイター 田村 培修

楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。