< 2025年05月 >
S M T W T F S
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
プロフィール
ajasan
ajasan
アクセスカウンタ
QRコード
QRCODE
新規投稿

新規投稿するにはログインする必要があります。会員IDをお持ちでない方はIDを取得された後に投稿できるようになります。
ホームIT日記 デザイン Webデザイン > CSSの調整に便利なツール♪

CSSの調整に便利なツール♪


一応、WEBデザインに携わっている私でございますが・・・。

本日は、CSSの調整やテストをする時に便利なツールをご紹介♪

それは、Google Chromeの拡張機能「karthikv/my-style」です。

普段WEBデザインする時に、CSSの微調整は

「firebug」とか「chromeの要素の検証」を利用しているのですが、

間違ってリロードして、元に戻ったり、

CSSを追加するのが面倒だったりするんですよね。。。


でも、「karthikv/my-style」は自動的に保存してくれるし、

リアルタイムに変更できるし、

書くのも簡単♪


たとえば・・・

CSSの調整に便利なツール♪


てぃーだのログインページを変更してみましょう♪


ctrl+mで下のような画面が表示されます。

CSSの調整に便利なツール♪


右側に白いメモスペース見たいのが出てきました。

ここにCSSを記述します♪

たとえば・・・・


CSSの調整に便利なツール♪


ロゴだけのシンプルなページ♪

これがCSSを書き加えていくだけで、リアルタイムに変更されていきます。



で、一度作っておけば・・・・

CSSの調整に便利なツール♪


訪れるたびにご覧のとおり♪

残っててくれると再度デザインを確認したいときに便利(>_<)

戻したい時は、書いたCSSを消すだけです♪


これは、デザインの調整で便利だーと思ったら・・・

うまく使えば、自分だけのオリジナルページに作り替えられますね♪


見にくい商品リストを自分好みに見やすくアレンジしたり、

邪魔な広告を消したり♪


いろんな使い道がありそう。

ちょっといろいろ遊んでみたいと思います。


WEBデザインが興味あったり、

少し遊んでみたいという方は是非お試しあれ♪


karthikv/my-style
https://github.com/karthikv/my-style
zipファイルをダウンロードして、拡張機能に追加するだけです♪



同じカテゴリー(IT日記)の記事

 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。