QA@IT

CSSデザインツールを教えて下さい。

6653 PV

私はプログラミングは得意です。(もう何百万行書いてきたか覚えていません)
なのでHTMLなんて寝ながらでも書けるのですが、
CSSが苦手なのです。

例えば、<画像><画像の説明>、というパーツがあった場合、
<画像の説明>を<画像>の上下中央に配置したいけど、やり方が分からない
→ググル
→display: table-cell;でvertical-align: middle;すればいいよ
→やってみる
→崩れる
→またググル
の繰り返しです。
たったこれだけのCSS編集に1時間もかかってしまいます。

そこで、部分的なパーツをスタイリッシュにGUI操作+値指定などで、
楽に作成できるCSSデザインツールを探しています。

よくある、テンプレートを選んで中の文字や画像を差し替えて・・・、といった類のものではなく、
もう少し細かい粒度(例 の全体をターゲットとした)でパーツレベルで楽にCSSが作成できる、CSSデザインツールが良いのです。

お勧めのものを教えて下さい。
なお、無料を求めています。(が、良ければ買います)

宜しくお願いします。

回答

>私はプログラミングは得意です。(もう何百万行書いてきたか覚えていません)なのでHTMLなんて寝ながらでも書ける~

のであれば、簡単なCSSくらいは問題ないのでは?
今時<center>***</center><font color=***>***</font>とかって書かないですよね?

質問内容くらいなら、「上下中央寄せ」等で検索するだけでも充分でしょうし、ツール何て要らないし、ちょっとコード書くだけでは?

上手く行かない(崩れる)のは、その部分に充てられている元々のCSSと干渉していると思われます。

CSSについても、直書きCSSは面倒でしょうが、外部にすれば使い回せるし、よっぽど外部CSSにしない理由は無いと思います。逆にHTMLのみでのデザインって今のサイトでは難しい思うのですが。

配置デザインも担当されるのなら、WYSIWYGエディタも検討されてはどうでしょうか?
(私は使った事がないので何とも言えずスミマセン)

質問の解釈を間違っていたらゴメンなさい。

編集 履歴 (0)

IE の F12 開発者ツール、Firefox の Firebug、Chrome のディベロッパーツールなどを使ったことはありますか?

もし使ったことがなければ以下の記事(ググれば他にも参考になりそうな記事が多々ヒットします)を参考にやってみましょう。

F12 開発者ツールを使用して HTML と CSS をデバッグする
https://msdn.microsoft.com/ja-jp/library/gg699337(v=vs.85).aspx

Firebugで始めるCSSデバッグ
http://blog.webcreativepark.net/2010/07/03-202546.html

Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
http://www.buildinsider.net/web/chromedevtools/01

編集 履歴 (0)
ウォッチ

この質問への回答やコメントをメールでお知らせします。