- 締切済み
DWの拡張で、CSSの空を作成するもの
こんにちは。 私が、HTMLをある程度作ってからCSSを入力していくのですが。 いつもこんな感じになります。 <div id="wraper"> <div class="content"> <div class="content_detail"> </div> </div> </div> こんな感じで適当にHTMLを書いて、 「wraper」という文字をコピーして、CSSにペースト。閉じタグをつける。 ↓こんな感じです。 #wraper{ } ---------------------- いつもいつもコピして、cssでid名やclass名を設定するのが面倒です。 DWの「新規CSSルール」を押しても、何も入力していない場合は、cssに反映されません。 ボタン１つで、HTMLのID、class名がCSSで「作成される」方法はないでしょうか？ alt＋クリックしても CSS側に設定されないと、表示されませんでした。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.1です。 実際にごく簡単なHTML/CSSをあげておきます。CSSをご覧になるとわかるようにidもclassも使ってません。文書構造だけを頼りにセレクタを書いています。このようにセレクタを記述することで「どの要素にスタイルを適用するか」を指定できますが、idやclass名は無関係です。--利用することはできます。 言い換えれば、セレクタを記述してくれるソフトなんてありえないのです。これはあなたがするしかありません。class名やidは誰でも(機械--検索エンジンも含む)でもわかるものにしておけば、コピーペーストなんてしなくても良いです。私はスタイルシートを記述するときにHTMLのソースなんて見ません。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) (オプションでCSS3を選択) ※タブは、＿に置換してあるので戻すこと <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- body>*{margin:0 auto;width:70%;max-width:800px;} h1{margin-top:40px;} h2,p,ol{margin-top:0;margin-bottom:0;line-height:1.4em;} p{text-indent:1em;} h1+ol{position:absolute;top:0;} h1+ol,h1+ol li{display:block;padding:0;list-style:none;} h1+ol{margin-left:15%;text-align:center;} h1+ol li{width:20%; float:left;margin-right:5px;} h1+ol li a{display:block;width:100%;height:100%;text-decoration:none;border:solid 2px gray;} h1+ol li a[href="./product"]{background-color:yellow;} pre{background-color:silver;} code:nth-child(2n){background-color:rgb(220,220,220);} body>div{position:relative;} div>*{margin-left:200px;} div ol{width:180px;position:absolute;top:0;left:0;margin-left:0;} --> ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<ol> ＿＿<li><a href="../">Top</a></li> ＿＿<li><a href="./books">著書</a></li> ＿＿<li><a href="./product">製品</a></li> ＿＿<li><a href="./profile">プロフィール</a></li> ＿</ol> ＿<div> ＿＿<h2 id="Q">質問</h2> ＿＿<p>私が、HTMLをある程度作ってからCSSを入力していくのですが。いつもこんな感じになります。</p> ＿＿<pre><code><div id="wraper"></code> <code> <div class="content"></code> <code> <div class="content_detail"></code> <code> </div></code> <code> </div></code> <code></div></code></pre> ＿＿<p>こんな感じで適当にHTMLを書いて、「wraper」という文字をコピーして、CSSにペースト。閉じタグをつける。</p> ＿＿<p>↓こんな感じです。</p> ＿＿<pre><code>#wraper{</code> <code>}</code></pre> ＿＿<hr> ＿＿<p>いつもいつもコピして、cssでid名やclass名を設定するのが面倒です。</p> ＿＿<p>DWの「新規CSSルール」を押しても、何も入力していない場合は、cssに反映されません</p> ＿＿<h2 id="A">回答</h2> ＿＿<ol> ＿＿＿<li><a href="#Q">質問</a></li> ＿＿＿<li><a href="#A">回答</a></li> ＿＿</ol> ＿</div> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
う～ん・・多分テンプレートを作成する時点での話だと思いますが・・ そもそも、class名やidが不適切だし多いからそうなる。 私は、HTMLを作成するときには、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より の基本どおり、HTML5の「新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」を参考に <body> <div class="article" id="top"> <div class="header"> <h1>タイトル</h1> <p></p> <div class="nav"> <ol> </ol> </div> </div> <div class="section"> <h2>見出し</h2> <p> ・・・・ </p> <div class="section" id="section1"> <h3>・・・</h3> <p>・・・</p> </div> </div> <div class="footer"> </div> </div> </body> 程度しかつけません。デザインではなくあくまで文書構造をマークアップする。googleは、このような(HTML5の新要素名)class名は理解してますから。 そのうえで、文書構造にしたがって div.header div.nav{position:absolute;top:100%;width:20%;} div.section div.section{margin:left:21%;} というふうに、きちんと文書構造に従ってセレクタでデザインする要素を決めていきます。そもそも、文書を読み取って文書構造を理解してマークアップすることも、その文書構造に基づいてセレクタを記述するなんて、スーパーコンピューターを使って人工知能でも難しい作業です。こればっかしは著者でないとできません。 先のセレクタ(div.header div.nav)(div.section div.section)でも、ヘッダにあるナビゲーションは・・、本文中のサブセクションは左を開ける。・・なんて、HTMLの記述も簡単ですし、スタイルシートだっていちいちHTMLを開かなくても、空(そら)で書けます。 こんなこと、オーサリングツールに頼るべきじゃないし、頼られたって無理です。 idをセレクタ(一意セレクタ)につかうと、詳細度が高くなりすぎて全部設定しなきゃならない・・。それは、大変でしょう。そんなことしたらスタイルシートが数十倍に肥大化してしまいます。後から見ても訳がわからない。泣くのは自分です。
