CSSデザインツールを教えて下さい。
私はプログラミングは得意です。(もう何百万行書いてきたか覚えていません)
なのでHTMLなんて寝ながらでも書けるのですが、
CSSが苦手なのです。
例えば、<画像><画像の説明>、というパーツがあった場合、
<画像の説明>を<画像>の上下中央に配置したいけど、やり方が分からない
→ググル
→display: table-cell;でvertical-align: middle;すればいいよ
→やってみる
→崩れる
→またググル
の繰り返しです。
たったこれだけのCSS編集に1時間もかかってしまいます。
そこで、部分的なパーツをスタイリッシュにGUI操作+値指定などで、
楽に作成できるCSSデザインツールを探しています。
よくある、テンプレートを選んで中の文字や画像を差し替えて・・・、といった類のものではなく、
もう少し細かい粒度(例 <div><img><span></span></div>の全体をターゲットとした)でパーツレベルで楽にCSSが作成できる、CSSデザインツールが良いのです。
お勧めのものを教えて下さい。
なお、無料を求めています。(が、良ければ買います)
宜しくお願いします。
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
プログラム書かれるなら自分で作られたら??
そんなものありません。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では、原則使わない。というか20年前の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で訪問して、[表示]メニューから[スタイルシート]を選択してごらんなさい。これをツールで行うことを想像してごらんなさい。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS 分数が正常に表示されない。 6 2022/05/09 18:53
- その他(ブログ) シーサーブログのタイトル文字位置とブログ説明文字位置の変更方法 2 2022/09/22 20:55
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- JavaScript htmlとcssに関する質問です 3 2022/12/06 05:36
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像にリンクを張ると画像がず...
-
ポップアップメニューを表のよ...
-
リストの数字のフォントサイズ...
-
ポップアップメニューの作成方...
-
HTMLで組織図を作成する方法
-
<li>でドロップダウンボタンを...
-
<table>の高さ固定。情報増加時...
-
html <ul></ul>の並びで一行空...
-
「olタグ」内に「hタグ要素」...
-
リンク文字同士の間隔を開ける...
-
バーナーヘッダーを固定する方法
-
罫線の長さが可変するテキスト...
-
タイトルの横にサブタイトルが並ぶ
-
css 横並びのナビゲーションバ...
-
ol、liをスタイルシートで中央寄せ
-
画像横のテキストをセンターに...
-
HTMLで語の先頭をそろえるには?
-
テーブル内のプルダウンの下に...
-
「・」(黒い点)を非表示にした...
-
CSSでリスト[li]の表示がズレる
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
番号付きリスト(<Ol><Li>・・...
-
liタグの中に<p>タグやら<dl>を...
-
レスポンシブWebデザインでリン...
-
<table>の高さ固定。情報増加時...
-
<ul><li></li></ul>にするメリ...
-
リストの数字のフォントサイズ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
divタグ内のコンテンツが重なっ...
-
画像にリンクを張ると画像がず...
-
複数行にまたがる括弧を表示し...
-
ページを開いているときのリン...
-
html <ul></ul>の並びで一行空...
-
html/cssの、navを2段にする...
-
HTML5のfooterに見出しを付けて...
-
<ul>~</ul>が二つ続くと間に改...
-
htmlの<ol>タグで、数字などを...
-
リンク文字同士の間隔を開ける...
-
CSSでつくったメニューのアニメ...
おすすめ情報