CSSのみを修正してデザインを更新することはどの程度まで可能でしょうか？

質問

今やHTMLファイルは文書情報のみ、デザインはCSSで定義することが常識となっています。ふと思ったのですが、この規則に厳密にのっとり、HTMLファイルをいじることなくCSSファイルの修正のみでデザインを変更することはどの程度可能でしょうか？

簡単な例を出しますと、以下のようなソースが書かれたHTMLファイルがあるとします。

<div id="top">This is top.</div>
<div id="middle">This is middle.</div>
<div id="bottom">This is bottom.</div>

これを、CSSの修正のみで上からbottom, middle, topの順にできますでしょうか？HTMLファイルを編集してdiv要素の順番を変えればすぐ解決できる問題ですが、せっかく文書とデザインを分離する手法が提唱されたので、なんとかCSSの修正のみで対応してみたいと思うのです。

なぜこんなこと考えたのかと言いますと、Webデザインのお仕事では数千ページという大規模構成のサイト更新を請け負うこともあると聞き、どういう方法がもっとも楽に更新できるだろうかと考えたからです。もちろん、CSSのみでの修正が可能だとしてもHTML文書の構造がめちゃくちゃではどうしようもありませんが、HTML文書の構造がしっかりしている（完全にValidなXHTML）場合、なんらかの効率的な手段があるんじゃないかと思いまして。

回答No.8

snowize · ベストアンサー

質問者様の意図が飲み込めましたので簡潔にまとめますと、「CSSでその方面は現在発展途上中」となります。具体的な方法もいくつか出ているので、他のやり方もほとんど似通ったものとなるため省略しますが、どの方法も一長一短だと思ってください。今後よりよい方法が提示されていくことになると思います。
CSSを扱ったテクニックについては、少し調べればマニアックなまでに追求したサイトなんかがごろごろと出てきますので、そちらを調べていただければ少しは理解が深まるかもしれません。もしかしたらJavaScriptと組み合わせるとか複雑なことをやって、ある程度理想的な方法を無理矢理実現させている例もあるかも……？
ただし「target="_blank" が非推奨だからスクリプトで別窓開くぞ！（別窓を開くように指定する行為が推奨されてないんだっつーの！）」みたいな、文法的正しさに気を取られて本質を見失うようなことは避けてくださいね。

回答No.10

DrFell

#1です。
なんか、あとだしでわけわからない否定されてとっても気分悪い。
「position:absoluteはなるべく使わないほうが良い属性」って誰が決めたの？それで、構造無視の上下変更はなるべく使ったほうがいい属性って訳？

まぁ、それはさておき、
楽にはできないが、できる。但し、私にはもうあなたに教える気はない。
300pxが400pxくらいなら、簡単。２行追加するだけ。
でも、それを教えても後出しで否定されるだけだろうなぁ

商売だそうで、人の善意を、自分の客からいくらとる気なの？
興味あるんだけど。

回答No.9

kyanasaki

もちろんスタイルシートで要素の位置を変更できますが、
それよりもマークアップが正しくできているかが基本となります。
そもそも、<h1><h2><li><p>などで正しく構造的にマークアップを行えば
検索エンジンも読みやすいサイトになるかとは思います。

確かに、ソース上部に重要なコンテンツがあるべきだと
現在のSEO対策ノウハウではありますが、
Googleなどがそのような正確な情報を発信したわけではありません。

ですので構造的に正しくマークアップすることで、
検索エンジンも読み取ってくれるはずです。

回答No.7

snowize

>>#2さん
文章の論理構造としてはA→B→Cの順番が妥当だが、クライアントさんの要望としてはデザイン的にCを最上部に持ってきたいというケースはしばしばありますよ。もっとも最初からその旨を伝えられている場合は、面倒なので論理構造に妥協してもらっちゃいますが。
あと泥臭い話ですと、論理構造としてはどちらでも構わないがSEO対策を考えると表示の順番があまりおいしくないってこともありますしね。
ただ質問者様はそこまで意図してるような感じは受けないので、あくまでも補足として。

お礼

フォローありがとうございます。
僕がこのようなちょっと無理矢理な質問をしたのは、クライアントの要望により実装方法の制限を受けてしまった場合、どうしようかと考えたからです。結局のところ仮の話に過ぎませんが、そのような場合どのような解決法があるのか、単純に興味がありました。SEOの問題も絡んでくるのですね。仰るとおり、そこまでは意図していませんでしたが、貴重な収穫になりました。

回答No.6

nori_007

#No2 です。

何だか文章の上下入れ替えに拘っているようですが、文章の理論構造出来ていれば、文章が上下入れ替わる事はないと思います。どう思われますか。

なぜ、文章の上下入れ替えに拘るのでしょうか？

また現実的に position:absolute も使いますし、ネガティブマージンも使います。

>position:absoluteは前後の情報量の増減による上下位置の変化に対応できないので使えません。

そうですか？デザインを変える際に、文章の情報量が変わると言う事ですか、ご質問の前提は今有るデザインで、CSS のみで違うデザインが実現出来るのか、その際文章の上下入れ替えが可能か言う事ですよね。文章の情報量は変わらないのが前提では有りませんか。
CSS でデザインが変わっても文章の情報量は変わりませんので、なんら問題はないと思います。
もし、フォントサイズを変更し、情報量が変わると言うのであれば、overflow を指定するのも有りだと思います。

再度申しますが文章の構造化が出来ていれば、文章の上下が入れ替わる事がないと言う事です。ご紹介したサイトでも文章の構造化が前提になりますので、文章の上下が入れ替わることが無いのが前提になっていると思います。

文章の構造化を良く考えてみてください。文章の上下を入れ替えるのなら、文章の構造が変わる事になりますので、CSS のみで文章の上下入れ替えが可能で有っても厳密には、文書構造が変わりますので、本来は XHTML(HTML)で修正するのが筋だと思います。

お礼

確かに、文章の上下が入れ替わることは普通はありえないと思います。が、「仮の話」でもしもそういうことがあった場合、どうすれば良いのか、CSSの修正だけで実現できるのかということが僕の疑問です。

文書の情報量についてですが、「今有るデザイン」もそうですが、デザインを更新したあとそのCSSを利用する新しいページが作られたときにデザインが崩れないようにしたいのです。たとえば、今あるページのうち最大の情報量が縦300px相当になるので縦300pxのボックスを用意したが、その後新たに作られたページが更に多量の情報量を含んでおり、縦400px相当になった場合はどうでしょうか。前後の要素の位置に全く依存しないposition:absoluteで対応できるでしょうか？ネガティブマージンは依存するので、問題ないと思います。

＞本来は XHTML(HTML)で修正するのが筋だと思います。
仰るとおりですが、重ね重ねになりますが「文書内容はHTML、デザインはCSS」というルールに厳密に則った場合の話なのです。上下入れ替えが可能なのか不可能なのか、可能である場合、自分では実現方法が思い浮かばないので例を示していただきたい、ということです。

回答No.5

ORUKA1951

例に挙げられたHTMLだと、確実な方法はありません。
これは極端で、たとえ方法があったとしてもパズルの域を出ませんから、それは遊びとして他の方に任せるとして。
大量のHTMLがきちんと文書構造とそのような配置変更も可能なようにマークアップができていれば可能でしょう。
そんな小細工をするより、テキストエディタなり、Perlのようなスクリプト、あるいはSEDのようなツールを使ってHTMLを書き直すほうが速いでしょう。
「Webデザインのお仕事では数千ページという大規模構成のサイト更新を請け負うこともある」の時点で、あらかじめそのようなマークアップがされていない場合は、それなりの費用を言えば済むことです。現実的に数千ページにも及ぶサイトが、HTMLでできていることはないのでは？
「HTML文書の構造がしっかりしている（完全にValidなXHTML）場合」なら、XMLですから、XSLTをサーバーサイドで書き直せばよいのでは？

お礼

＞現実的に数千ページにも及ぶサイトが、HTMLでできていることはないのでは？
これ、気になりました。では、何で出来ているのですか？

＞「HTML文書の構造がしっかりしている（完全にValidなXHTML）場合」なら、XMLですから、XSLTをサーバーサイドで書き直せばよいのでは？
これが先の質問の答えでしょうか？でもこれは面倒ではありませんか？HTMLファイルにHTMLタグが書かれているのに、特定の要素を抽出して順番を並び替え、またXSLファイルにHTMLタグを書かなければなりませんよね？さすがにこれならテキストエディタで正規表現使ってHTMLファイルを編集する方法を選びます。

回答No.4

yambejp

HTMLが構造である以上、表示される順番を換える事は構造をかえることです
構造を変えるのであれば、できるできないはともかく、cssでやるべきことではなく、HTML側できちんと処理をしておかないと、整合性がとれなくなるでしょう。

で、実際問題としては、そういうのは静的なHTMLではなく、サーバーサイドの
プログラムで動的に構造を変更してやれば済む問題ですので、
きちんと構造化を図っていればなんとかなる場合が多いです

回答No.3

snowize

#2の方のおっしゃるように、「意味はHTML、デザインはCSS」となっているので、HTMLが厳密に書かれているのならばなんのこっちゃありません。
しかし「文法的に正しくてもブラウザが対応していない場合がある」という点をご考慮いただき、Webデザインのお仕事では「より簡単に」よりも「古いバージョンを含めた、より多くのブラウザで表示できるように」という観点が正道だろうなあと思います。

お礼

ブラウザの対応問題は常々頭を悩ませていました。
正道については納得ですが、これについては対応済みという状況下での質問、という意図でした。説明不足ですみませんでした。

回答No.2

nori_007

はい可能です。100% 別のデザインにする事が出来ます。
ただし、前提として XHTML(HTML)が問題なく、文章構造が理論的に出来ているのが前提になります。文章の理論構造が出来ていない場合は、結果ぐちゃぐちゃになってしまうと思います。まずは文章構造ありきです。

質問は例と思いますが、実際は id に直接位置を示すような名称は付けず役割が判る名称を付けます。

実際に css を組んでみれば直ぐに判ります。
項目をブロックとして、左右、天地自由に配置出来ます。

こんなのも有りました。
画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会
http://www.jam-graffiti.com/non-pic-css/

以下のサイトは有名です。
css Zen Garden：CSS デザインの美
http://www.csszengarden.com/tr/japanese/

あと、以下のはてなの質問が参考になると思います。
http://q.hatena.ne.jp/1209050372

ご参考にしてみてください。

お礼

参考サイトを見させていただきましたが、やはり上下の項目を入れ替えるのは分かりません。No.1の方への補足にも書いたように、position:absoluteは前後の情報量の増減による上下位置の変化に対応できないので使えません。もしよろしければ、例として出したソースコードをCSSで整形してみていただけませんでしょうか？

回答No.1

DrFell

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML lang=ja><HEAD><TITLE>test</TITLE>
<STYLE type=text/css>
#top{position:absolute;bottom:0;}
#middle{margin-top:100px;}
#bottom{position:absolute;top:0;}</STYLE>
</HEAD>
<body>
<div id="top">This is top.</div>
<div id="middle">This is middle.</div>
<div id="bottom">This is bottom.</div>
</body></html>

もっともらしいこと考える前に、基本を勉強すれば？
考えるような難しい話ではないような気がしますが？？？？

補足

position:absoluteはなるべく使わないほうが良い属性なのではないですか？前後のDIV要素内の情報（テキストや画像）で縦幅が伸びた場合に対応できないと思いますが。