こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

DWでhtml5で記述するとCSSが反応しな

Dreamweaver CS6を使ってますが、なぜか、html5で記述すると、CSSが反応しません。

例えば、今までの、XHTML+cssですと、


<div id="header">
<div class="abc">

中身

</div></div>


だと、CSSパネルで、

#header .abc

で、記述したら、もちろんデザインビューに反映してたのですが、



HTML5の記述で、例えば、

<haader id="header">
<section class="abc">

中身

</section>
</header>

だと、CSSパネルで、

#header .abc

と、しても反映されません。


ライブビューや、ブラウザでは、反映されている様です。

(しかし、一回一回、ライブビューに切り替えたり、ブラウザで確認しないとならないのは、非常に不便です。)


■Dreamweaverのデザインビューでは、HTML5は、対応してないのでしょうか?

■Dreamweaverで、HTML5を使う、何かのプラグインなどあるのでしょうか?

■その他、何が間違っているのでしょうか?


お詳しい方、お教え頂けますでしょうか。

宜しくお願い致します。

投稿日時 - 2013-05-13 12:34:09

QNo.8085749

すぐに回答ほしいです

質問者が選んだベストアンサー

<haader id="header">
??? <header id="">
   ↑
 文法チェックはしましたか?
 ⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )

#header .abc的な書き方はCSS1の名残です。#(一意セレクタ)に関してはそれでも良いですが、CSS2以降は基点セレクタを書くルールですから、書かれてないと*全称セレクタがあるとみなしてはくれますが、それでも書いたほうが無難です。
#header section.sectionとか

★質問とは関係ないですが!!!
<header>
 <section>
は、HTMLの仕様上、考えられません。!!!
記事には、
<header>文書のヘッダ</header>
<section>本文</section>
<footer>フッタ</section>
とheaderとsection,footerは並列な存在です。header内にsectionは入りません。
 全体を<article>で括ることはあります。srticleとはheader,section,footerを持ちうる完結した記事

また、いちいち#やidは付けません。これはオーサリングツールを使うとき最も気をつけなければなりません。
<body>
 <header>
  <nav></nav>
 </header>
 <section>
  <section>
  </section>
  <nav>
  </nav>
 </section>
 <footer>
 </footer>
</body>
などが簡単な基本構造になり、デザインするときは
header nav {}
section nav{}
という風に、文書構造で指定していきます。これで詳細度0 0 0 3になります。
 デザイン(スタイルシート)のためにidやclassを付けることは、基本的にありません。

 文書の内容を読み取り、理解して最適なタグを用意することはDWは無論、高度なプログラムでも無理です。ましてや、その文書構造を読み取ってセレクタを書くことはツールでは原理的に不可能です。
 しかし、書かれたセレクタから対象を見つけることは出来ます。

投稿日時 - 2013-05-15 23:22:42

補足

お詳しいご説明をどうもありがとうございました。
また、ご返事遅くなり申し訳ございません。

<header>
 <section> が間違いなのは、理解しました。

<section>の代わりに、<hgroup>を使いました。

しかし、私の買ったHTML5+CSS3の勉強本では、


<haader id="header">
中身
</header>

<section class="abc">
中身
</section>

で、CSSパネルでは、

#header .abc

という説明がされていました。

しかし、DWのデザインビューでは、レイアウトが崩れてしまいます。

一回一回、ブラウザで確認しなければなりません。

ご説明の通り、

<header>文書のヘッダ</header>
<section>本文</section>
<footer>フッタ</section>

が、HTML5+CSS3の基本構造である事は理解しました。

しかし、これだと、中身の細かい設定を、再び、

<div id=""> や <div class"">などを、多用しなければならない気がしております。

いずれにしても、

XHTML+CSSだと、DWのデザインビューで、崩れなかったのに、

HTML5+CSS3だと、
DWのデザインビューで、レイアウトが崩れてしまうのが、
作業しづらく感じております。

それとも、キッチリと、間違いなくHTML5+CSS3で記述できれば、
崩れないのでしょうか・・・。


もうちょっと、勉強してみます。

大変、貴重なアドバイスをありがとうございました。

投稿日時 - 2013-05-25 15:28:52

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.2

大変失礼いたしました、一つ前の回答ですが、完全に質問を読み間違えておりました。
削除ができませんので、無視してください。・゜・(ノД`)・゜・。

投稿日時 - 2013-05-13 14:57:07

ANo.1

書いていただいているのは、打ち間違いでしょうか。

<haader id="header">

多分これのせいではないかと

投稿日時 - 2013-05-13 14:45:39

あなたにオススメの質問