CSSによるデザインの切り替えに際して

質問

HTML、CSSについて勉強中の者です。

HTMLで文書構造を書き、複数のCSSでデザインを切り替える、ということを勉強しているのですが、例えばあるCSSではnav要素とarticle要素（更新情報のお知らせ欄）をheader要素に入れるのに対し、別のCSSではnav要素のみをheader要素に入れ、article要素はsection要素内に表示させたい、となった場合、同じHTMLを使用することは難しいのでしょうか。

CSSである要素にある要素を入れるということはできるのか、できない場合は諦めてそれぞれHTMLを作成するべきなのか悩んでいます。
HTML側で全要素をそれぞれdiv要素にしてしまえばできるのかも？と思うのですが、それでは正しい文書構造にはならないと思いますので、あまり考えてはいません。

お詳しい方がいらっしゃれば、教えていただきたいです。

回答No.3

ORUKA1951

発想が間違っている---厳しくて申し訳ない。でも大事なことなので
HTMLには文書構造、プレゼンテーションはスタイルシートで行います。

＞例えばあるCSSではnav要素とarticle要素（更新情報のお知らせ欄）をheader要素に入れる
＞のに対し、別のCSSではnav要素のみをheader要素に入れ、article要素はsection要素内に
＞表示させたい、となった場合、同じHTMLを使用することは難しいのでしょうか。

　本来、ヘッダの一部であるナビゲーションを本文ブロックに入れる--文書構造を変える。あるいは、ナビゲーション自体が本文の主たるコンテンツであるのにヘッダーに入れるという発想は正しくありません。

　また、articleはこの場面ではおかしいですね。articleは内部にheader,section,footerを持つと期待される完結した記事(article)です。完結しているのですからその内容が外に出て行くのはおかしい。

　ナビゲーションのプレゼンテーションを変更するふたつの方法を示しておきます。

★サイト全体のナビゲーションであり、それが、そのページの主たるコンテンツでない場合はHTMLは
<header>
　<nav></nav>
</header>
<section>
　本文
</section>
　とマークアップされているはずです。
　headerをプレゼンテーションしているブロック内にこれを配置する方法は、今さらですので省きます。
　これを、本文(section)の右脇に表示したい場合は
header{
　　position:relative;/* static以外 */
}
header nav{
　　position:absolute;
　　width:160px;
　　top:100%;
　　right:0;
}
で、headerの下、右に配置されます。

★サイト全体のナビゲーションであるが、それが、そのページの主たるコンテンツの場合
　例えばそのサイトのトップページなどです。その場合は
<header>
</header>
<section>
　本文
　<nav></nav>
</section>
　ですので、
これをheaderの上に・・
header{
　　padding-top:40px;
}
section[
　　position:static;
}
section nav{
　　position:absolute;
　　top:0;left:0;
　　width:100%;
}

headerの下なら
section{
　margin-top:40px;
　position:relative;
}
section nav{
　position:absolute;
　top:-40px;
}

　文書構造とプレゼンテーションは分けなければならないが、文書構造に反したプレゼンテーションになるのは、HTMLに問題があります。article内のnavが、無関係の外に出て行くはずがない。articleではなくdivなりでマークアップすべきでしょう。
　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
　にサンプルがある

お礼

うーん…いつもご回答いただいてありがたいのですが、どうもあまり話が噛み合ない気が…。
私の理解力が追いついていない…というよりも、あなたの回答は為になりますが、概ね言葉が厳しすぎて何度も読んでると心が折れるので、きちんと読み込めていません。すみません。
理解力のない、発想がずれている私に苛立ちを感じていらっしゃるのかもですが、何より私自身が理解できないこと、躓いていることに苛立ちを感じてます。回答の度に意欲を削ぐような言葉を繰り返し仰るのは控えていただきたいです。すみません。

あなたがどういうWebサイトを想定していらっしゃるのかわからないのですが、例えば会員制のサイトなどで、トップページには、タイトル、ニュースフィールド、プライバシーポリシーや利用規約などのナビゲーションとログイン用のID/PW入力画面のみが表示されているとします。
ログインをすると、トップページの画面の下にマイページ、ご利用明細などのナビゲーションが表示され、本文が表示されるような作りになっていると仮定します。

あなたのソースを引用すると、ログインした状態では
<header>
　<nav></nav>
</header>
<section>
　本文
　<nav></nav>
</section>
となるかと思います。

このHTMLを、header内に含まれるnav要素をfooterに含みたい、となった場合、どうなるのかということが知りたいのです。

あなたの仰っている中で、
＞そのページの主たるコンテンツ
この定義がいまいちわかりません。

リンク先のサイトは何回見たかわからないほど見ていますが、このサイトの中で私が言っているナビゲーションはdivで囲まれており、nav要素にはなっていません。
以前の質問で、外部へのリンクやサイトマップなどの案内役はnavとなる、と仰っていたと思うのですが、こちらのサイトを見る限りはasideとなっていますし…。

ちなみに、余談ですが、
＞section[
＞　　position:static;
＞}
＞section nav{
＞　　position:absolute;
＞　　top:0;left:0;
＞　　width:100%;
＞}
あえてposition: staticを記述されているのはなぜでしょうか。

回答No.2

t_ohta

DOMの構造を変えることはデザインの変更では無いのでCSSでは出来ません。
構造を変えずに表示位置を変えるといったことはCSSで可能です。

構造を変えないといけない時点で、設計上正しい文章構造になっていないと言うことになります。
デザイン上の要件を満たせるような構造に設計しなおす必要があるのではないでしょうか。

お礼

＞デザイン上の要件を満たせるような構造に設計しなおす
それだと、デザインありきのHTMLになり、本末転倒ではありませんか？

音声でWebを閲覧する方にとっては、ここからここまではヘッダーで、ここがナビゲーション、記事１の見出しがここで本文がここ、記事２はこちら…というように明確に文章が構造化されていないと、「？？」となりますよね。

回答No.1

askaaska

むしろそれこそがＣＳＳが別ファイルに記述できる理由だと思うわ

どのようにデザインを切り替えるのかはともかく
考え方は間違っていないと思うの

お礼

できれば、どのようにデザインを切り替えるべきか、を教えていただけるとありがたいです。

現段階ですと、
<div class="nav">・・・</div>
<div class="article">・・・</div>
のように各要素をdivで囲んで個別にデザインを設定するしかアイデアが浮かばないのです。

できればCSS単位で、どこがheaderでどこがsectionなのか、ということがきちんと区別できるようにしたいのですが、無理なのでしょうか…。