お叱りを受けるような質問なのですが・・・

質問

ＣＳＳをかじって１年位なのですが、ＨＰ作ってふと疑問に思うことがあるのです。
CSSは、主に文書のレイアウトやデザインの為の言語ですよね。で、その目的で使う分については、テキストの位置、画像の位置すべてposition.relativeで思うようにできると思うのですがそれでは、だめなのですか？
paddingやfloatとかdivとか使わなくても・・・と思うのですが・・・。
グループで分業してやってるわけではないから、すべてposition,relativeでレイアウトしてもいいと思うのですが、どうなんでしょう？

回答No.6

ORUKA1951 · ベストアンサー

＞ＨＴＭＬなんか特にdiv,li,tdなんかのオンパレードだし、視覚的に？読みにくいしあまりにも構造化されて何をどう定義しているのか直感的に入ってきません。

　そりゃそうです。お馬鹿な機械相手に、マークアップしてやらないと彼らは理解できないからです。人なら、何度か読めば文書の構成はわかります。小学校のとき、起承転結とか主語述語、主文とか・・
　機械に理解できるように、人が苦労しなければなりません。幼い子に何かを教えるのと同じです。そのためには、教える内容以上にはるかに深くその件について知っていなければなりません。小さな子供に電球がなぜ灯るかを教えようとしたら、電気について深く深く知ってないと教えられませんよね。直感じゃ無理です。

　もともとHTMLは、SGML ( http://ja.wikipedia.org/wiki/SGML )を参考に、より人が扱いやすいように工夫されたものです。SGMLなんて人が扱える代物じゃない。

　先の回答で例示した「「非スクロールのサイドバー( http://okwave.jp/qa/q7521059.html )」」のHTMLなんて、そんなにとっつきにくいものではないはずです。小学校の国語の時間に戻って、文章を読み解き、タグを使って、足りなきゃdivやspanにclass名を組み合わせて、お馬鹿な機械にわかるようにマークアップすればよいのですよ。---最初にデザインなんて余計なことを考えるから難しくなるのです。class名は、HTML5の「新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」名を参考にすればよい。

　問題を複雑にしているのは、デザインのためにHTMLを書こうとしているからですよ。

お礼

何度もご丁寧な回答、本当にありがとうございます。
なるほど、デザインの為のＨＴＭＬを書こうとしているから、難しく思えたのですね。
考え方というか、Ｗｅｂページの作成の仕方の要領が少し掴めた気がします。
次回ＨＰを作る時にはそういった感じでやってみます。ありがとうございました。
他のたくさんの回答者の方も本当にありがとうございました。

回答No.5

神崎 渉瑠（@taloo）

目的によります。

positionにはpositionのメリット、デメリットがありますし、
floatにはfloatのメリット、デメリットがあります。

お礼

回答いただきありがとうございます。たくさんの方からご回答いただき感謝してます。
floatのデメリットはレイアウトがくずれやすい？とかどこかで見たような...。まあ、腕によるんでしょうけど。
親boxにrelative指定して子boxにabsoluteで位置指定を多用してます。ピクセル単位での位置調整も画像を重ねる事も気ままに…。
でもデメリットが見えてきたような…。

回答No.4

mitoneko

ダメじゃないですよ。
　ちゃんと思い通りに表示できれば、ＯＫです。
　その意味では、paddingもfloatも何にもいりません。
　しかも、多分、どんなレイアウトでも、それで書けます。

　簡単なページなら、それで良いです。
　そうですね。
　その方法で、例えば、www.yahoo.co.jpを作ってみてください。
　絵や、内容はどうでも良いです。適当な物を埋め草にしておけば。（ついでに言うと、このページは本当は、動的に生成されています。でも、そんなことは考えなくて良いですからね。あくまで、今表示した画面のレイアウトが再現できれば良いです。）
　作って欲しいのは、レイアウトです。

　もし、出来てしまったら、次は、どこかのコンテンツの枠が、例えば真ん中の列から右の列にする必要が出てきたと言うことで、移動してみてください。

　とてもじゃないけど、作業していられません。
　私の根気なら、一つ目の作業を１時間もやったら、さじを宇宙まで放り投げます。
　ましてや、二つ目の作業を複数回やらされたら、端末こわします（笑）

　普通、どんなに複雑なページレイアウトでも、ある一定の規則があります。
　この規則を書くのが、本来のＣＳＳの書き方です。
　文書の構造が、ちゃんとHTML文書に表現されていれば、自ずと、ＣＳＳもその構造を反映した物になっていくのが普通ですし、そうしないと、莫大なレイアウト指定を延々と書く羽目に陥ります。

　文書と、レイアウトの構造を、きちんと構造化して表現すれば、１で済む作業が、一つ一つのパラグラフを全部position,relativeで表現なんてことをしたら、１０にも１００にもふくれあがり・・・しかも、大半は、同じ事をひたすら指定する羽目に陥ります。

　HTMLとCSSの基本的な書き方は、すでに一通り勉強されたのだと思いますので、例えば次のような書籍をおすすめします。

http://www.amazon.co.jp/Web%E6%A8%99%E6%BA%96%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8%E2%80%95XHTML%E3%81%A8CSS%E3%81%A7%E3%81%A4%E3%81%8F%E3%82%8B%E2%80%9C%E6%AD%A3%E3%81%97%E3%81%84%E2%80%9DWeb%E3%82%B5%E3%82%A4%E3%83%88-%E7%9B%8A%E5%AD%90-%E8%B2%B4%E5%AF%9B/dp/4798010928

　ちなみに、この本のメインテーマは、「何故、あなたの思うような書き方をしてはいけないのか？」です。
　残念なことに、少々古い本で、現在の最新の内容までは網羅されていません。XHTMLとＣＳＳ２までです。新しい構文や、タグの使い方は別途リファレンスが必要です。（しかも書いてある範囲内ですら、リファレンスとして使うには、とっても不向きです。）
　この本から読み取って欲しいのは、「わかりやすく・書きやすく・後で直しやすい」ページを書くためには、HTML文書とＣＳＳをどのように「利用」すれば良いかです。
　その意味においては、今でも充分に通用する書籍だと思います。

お礼

丁寧なやさしいご回答、感謝いたします。
>しかも、多分、どんなレイアウトでも、それで書けます。
ですよね。たぶんそうなんじゃないかと思ってました。
回答いただいて思ったことは、「あぁ、修正する時、大変なんだ」って事です。
もう少し、ＣＳＳを熟知して使いこなせるようなってその便利さを実感できたらなと思います。頑張りますのでこれからも宜しくお願いします。ありがとうございました。

回答No.3

ORUKA1951

まったくそのとおりです。という部分と、根本的に間違っています。
のふたつが言えますね。
　まず誤解されているようですが、positionはCSSのプロパティであり、divはHTMLの要素です。divやspanの目的はデザインのためではありません。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』ためのものです。
　説明すると、HTMLは文書をそれを構成する要素に分解して、それぞれの要素をマークアップするものですね。見出しは<h1></h1>で囲んだり、重要な語句は<strong></strong>で囲んだり・・それだけでは文書構造を示すには足りないので<div class="header"><span class="mark">のように、divやspanと、idやclassと組み合わせます。
★divやspanとid,classをデザインのためだと思っていたら間違いです。
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
　先ほど回答した
「非スクロールのサイドバー( http://okwave.jp/qa/q7521059.html )」
　で示したHTML/CSSは、divとidやclassの使い方と、【それで示される文書構造を使ったデザイン】のサンプルになるでしょう。

＞CSSは、主に文書のレイアウトやデザインの為の言語ですよね。
　いえ、プレゼンテーションのためです。主にじゃありません。
　さらに、HTMLからプレゼンテーションの負担を開放します。HTMLの作成がきわめて簡単になります。
　上記サンプルHTMLを参照してください。--プレゼンテーションに関する要素や属性は一切使われていません。
＞paddingやfloatとかdivとか使わなくても
　それらをスタイルシートに任せることで・・

　文書構造とプレゼンテーションを完全に分離することで、先でどのようにもプレゼンテーションを変更できるのです。たとえば目次は横並びのボタンにしようと思ってもHTMLを書き直さなくても済む。

お礼

先ほどの質問とあわせ、再び回答頂きありがとうございます。
文書構造を定義するＨＴＭＬとプレゼンテーションを記すＣＳＳの役割、よく理解できました。ありがとうございます。
でも、これもお叱りをうけそうなのですが、どうも私はＨＴＭＬ，ＣＳＳが好きになれません。それは他のプログラム言語と違って見ててもつまらないからです。ＨＴＭＬなんか特にdiv,li,tdなんかのオンパレードだし、視覚的に？読みにくいしあまりにも構造化されて何をどう定義しているのか直感的に入ってきません。経験が浅いからでしょうね。独り言として聞き流してください。ありがとうございました。

回答No.2

OKWavex

べつにそうしたかったらしていいよ

お礼

回答頂きありがとうございます。
で、ですよね。小さいＨＰだし、仕事でもないし・・・。
でもなんだかそんなＨＰのソース見た事ないし、なんだか恐怖観念にかられて・・・。

回答No.1

mohumohu23

それ普通にめんどくさくね？

お礼

回答頂きありがとうございます。
たぶん、経験が浅いのでこれが手っ取りばやい気がするのですが・・・。