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

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

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

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

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

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

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

宜しくお願いします。

No.1 回答者： ORUKA1951 回答日時： 2017/03/02 18:28

プログラム書かれるなら自分で作られたら？？

そんなものありません。hTMLの仕様書に・・下記のような一文があるのをご存知ですか？？
「HTMLでページを作らずにプログラムに頼る。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
　HTMLは、Hyper Text Markup Language の略で、文字通り、文章の構造をマークアップするメタ言語--プログラム言語ではない--ですが、所詮テキストエディタでコツコツ作るのが最も効率的なのは、「HTMLなんて寝ながらでも書ける」方なら、わかっているかと・・

HTMLもCSSも人力で書くことができるように特化しています。ツールを使うよりテキストエディタのほうが楽・・HTML書かれれば、ご存知ですよね。

　CSSはCascading Style Sheetの略ですが、最も重要なカスケーディングの機能を機能を利用するためには、ツールでは不可能なことは、多少でもプログラムをかじっていれば理解されていると思います。

＞(例 <div><img><span></span></div>
　divやspanはHTML5では、原則使わない。というか２０年前のHTML4.01の時代にすでに「id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」であったのですが、HTML5では、
NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.( https://www.w3.org/TR/2014/REC-html5-20141028/gr … )
　(拙訳)著者は他に適切な要素がない時の最後の最後の手段としてのみdiv要素を使用することが強く推奨される。適切な要素を使用することで読者のアクセスビリティのみならず、メンテナンス性も向上する。

＞<画像><画像の説明>、というパーツがあった場合、
　あくまで文書を構成する要素(Element)です。
　
<section>
　<ul>
　　<li><img src="" width="" height="" alt="">
　　　　<p>画像の説明・・・</p>
　　</li>

例えば、（タブは＿に置換してある）
＿<section id="album">
＿＿<h2>A smaller heading</h2>
＿＿<p>
＿＿</p>
＿＿<ul>
＿＿＿<li><img src="./photo/001.jpg" width="256" height="192" alt="">
＿＿＿＿<ol>
＿＿＿＿＿<li>富士山の眺め</li>
＿＿＿＿＿<li>河口湖から</li>
＿＿＿＿</ol>
＿＿＿</li>
＿＿＿<li><img src="./photo/01.jpg" width="480" height="360" alt="">
＿＿＿＿<p>
＿＿＿＿＿コリークラブ
＿＿＿＿</p>
＿＿＿</li>
＿＿＿<li><img src="./photo/011.jpg" width="256" height="341" alt="">
＿＿＿＿<p>
＿＿＿＿＿あの山この山
＿＿＿＿</p>
＿＿＿</li>
＿＿</ul>
＿</section>
というHTMLがあるとします。画像サイズは様々
★HTMLやその文書構造はこのように様々
・・・適当な画像を入れてCSSなしで表示してみてから
スタイルシートを書きます。

section#album ul li{display:table-row;}
section#album ul li img{width:200px;height:auto;}
section#album ul li>*{display:table-cell;vertical-align:middle;padding:5px;}
たったこれだけで、良いかと・・

★ CSSで難しいのは、プロパティではなくカスケード( https://momdo.github.io/css2/cascade.html#cascade )
　プログラムされているとわかるように、ツールでは文書構造は理解できないので、巷にあるようにデザインしたいHTmLの要素に、意味もないidやclassをつけてしまう以外手がないでしょうね。そんなもの出来たってメンテナンスできない。もちろん、デザイン変更に対応できない。

ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
のページを代替スタイルシートに対応したIEやFirefoxで訪問して、[表示]メニューから[スタイルシート]を選択してごらんなさい。これをツールで行うことを想像してごらんなさい。