CSSのスタイリング調整に使えるWebデザインツールや方法を教えてください

Question

フロントエンドのUIをJSやCSSで作っている時に，いつも，styleを直打ちしたり，ChromeのデベロッパーツールのStylesから微修正を行っているのですが，Webデザインについて独学であり，エディタ以外のツールなどを使わず作成しているため，自分がやっている方法よりもっと効率のいいやり方やWebデザインのツールがあるのではないかと思っています。

bootstrapやsweetalertや,smartadminなどjsのライブラリを使ってレイアウトをある程度テンプレートのように扱う方法等ではなく，それらを利用してそこから思い通りの配置にするためにstyleを調整していくための方法論やツールなどがあれば教えていただきたいです。

また，それらの技術について勉強できる書籍などがあれば教えていただきたいです。よろしくお願いいたします。

Answer 1

長年コーダーやってますが、
CSSの調整は結局エディタで直打ちしてますねぇ。
タイピングが面倒、という問題であればエディタの入力補完機能や
Emmetなどのツールを活用することで、最小限のタイピングで済みますし、
同じ記述を何度も書かなくてはならなくて非効率だとか
そういうCSS言語の貧弱さ自体が気になるのであれば
Sassなどのプリプロセッサを活用すれば
使い回しも後からの一括変更も自由度は格段に増しますので、
そういう方向性で全体を効率化する方が良いのではないかという気がします。

例えばDreamweaverには「CSSデザイナー」という名前の、
パネルから数値を調整することで直感的にCSSを編集できる機能がありますが、
CSS自体不自由なく書ける人間にとっては逆に不便だと思うんですよね。。。
ツールに頼らなくては書けないような複雑なコードになりそうなのであれば
PSDから直接CSSコピーしたり、各種ジェネレーターツールを活用した方が
手っ取り早いですしね。

あくまで個人的な意見ですが。。。

Comments

[退会済みユーザー]

お答えいただきありがとうございます。
Sassはいい解決手段ですよね。規模が大きくなりそうなプロダクトには僕も使っています。
スタンドアローンのフォームアプリケーション開発をやっていた時にドラッグアンドドロップでUI配置が出来るようなものがあったので，ドラッグアンドドロップイベントがjsで取れるのにそういう開発ツールがhtmlに存在しないのかが疑問でした。
CSSデザイナーというのはchromeデベロッパーツールのものと同じようなものですよね。ある程度予想で直打ちできるのですが，微調整に使ったりしています。

追記

調べてみたらドラッグアンドドロップで配置できるツールありました。ただ，よく考えてみたら，ドラックアンドドロップで評価できないスタイル(table,inline,float等)は結局自分でスタイリングしないといけないので，あんまり有益ではないかもしれないですね。CSSは結局べた書きでも対応できることが重要なのかもしれないですね。

Emmetいいですね。初めて知りました。
rails開発の時はhaml使ったりすることもあるのですが，これはいいツール知れました。

PSDでフォトショのデータのことですか。フォトショ使ったことがないのですが，CSS抽出できるんですね。これも機会あったら使ってみようと思います。ありがとうございました。

Answer 2

Google ChromeのDevツールでやっています。

Devツールの編集をファイルに直接反映する方法
Devツールで編集した内容を該当ファイルに即反映する方法が記載されています。

PerfectPixel
任意の画像をWebページ上に重ねることができるChromeのプラグインです。
デザインカンプなどを重ねて確認できます。

Comments

[退会済みユーザー]

PerfectPixelいいですね。
Chromeって高機能なツール結構揃ってるんですね。勉強になりました。
こういうツールを探していたので,ベストアンサーにさせていただきます。