divとspanの使い分け

最近ＣＳＳの勉強をし始めたのですが、要素の使い分けがいまいち理解できません。
例えば、フォントのサイズを指定したい時、要素名はh1でもdivでもspanでもいい、ということでしょうか？

No.7 ベストアンサー 回答者： noname#78418 回答日時： 2006/04/27 00:13

こんにちは。

> つまり、基本はＣＳＳで構成していったほうがいい、ということでしょうか？
デザインはCSSで、ということですね。HTML部分には画面表示に影響が出るような要素は置かないでということです。font、br、marquee、blinkなどはHTMLに書くなということです。fontで指定したいのがあるのならCSSのfont-sizeやfont-styleで指定、brで改行したいのなら意味をよく考えてあきらめる。普通製作者側で改行が必要というのはないはずです。pで段落にしておけば、UA側で勝手に改行して表示しますから。もし画面の幅で、とかある一定の文字数で、とかこだわりがあるのならp要素自体にCSSでwidth:600px;だとかwidth:100em;だとか指定すればよいです。

なお、h1はフォントのサイズを指定する要素ではありません。多くのUAが自分側のスタイルシートで勝手にh1を大きく～h6を小さく表示しているだけです。重要なことは小さく書く、という変な人がUAの開発者でしたら、h1がむしろ小さく表示されるUAがあってもおかしくありません。

CSSはHTMLと見栄えを分離するために作られた経緯がありますので、HTMLで出来ないことをCSSでやるという小ざかしいテクニックは使わないように。また、どうせCSSでレイアウトするならDTDなどもきちんと書いて、XHTMLで書いてほしいところ(これは私の意見なので別に気にしなくてもよいです)。

それでは。継続して疑問点等あれば補足下さい。

この回答へのお礼

ご丁寧にありがとうございます＾＾
なるほど、使い方というか考え方が少し見えてきました。
まずは、現在作っているサイトの見直しからします！！

お礼日時：2006/04/27 15:26

No.6 回答者： steel_gray 回答日時： 2006/04/26 23:18

#5です。

>つまり・・・ブロックの中にインラインはＯＫ、ということでしょうか？
おおむねそうですが、例えばブロックである<ul>の直下には<li>しかダメとか、もあります。

HTML-Lint
http://openlab.ring.gr.jp/k16/htmllint/htmllintl …
のように、書いた物をチェックする方法もありますので利用してみるのもいいかと思います。

この回答へのお礼

とりあえず今は、おおむねで覚えたいと思います。

こんな便利なサイトがあったとは・・・（驚）
ちなみに、７１点でした。１５７個も見直したほうがいい点がありました。

ありがとうございました＾＾

お礼日時：2006/04/27 15:23

No.5 回答者： steel_gray 回答日時： 2006/04/26 18:01

#2さんにちょっと補足。

(DIVとSPANの使い分け)

それぞれ書いていい場所書いてはいけない場所もありますのでそのあたりを意識して使い分けてください。

例えば
インラインの中にブロック
<span><h1>教えてgoo</h1><p>みんなの疑問、みんなで解決！</p></span>
こういうのとか、
インライン以外書いてはいけない場所にブロック。
<h1><div>教えて</div>goo</h1>
こういうのはダメです。

http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 …
正式な仕様書にDTDという形で書かれています。

http://www.ne.jp/asahi/minazuki/bakera/html/refe …
こっちの方がわかりやすいかも。

この回答へのお礼

アドバイスありがとうございます＾＾
つまり・・・ブロックの中にインラインはＯＫ、ということでしょうか？

お礼日時：2006/04/26 22:14

No.4 回答者： noname#78418 回答日時： 2006/04/26 15:37

連続での回答失礼します。

#3で回答した私の例ですが、インラインstyle属性を使用することはXHTML1.1では推薦されていないのでなるべくlinkで外部から読み込んでくださいね。

意味のある要素はh1のほかにblockquote等があります。たくさんありますのですべては挙げられないですが。

逆に論理的に意味を持たない要素はspanとdivくらいです。br等はブラウザ独自拡張ですが「改行する」という表示する上だけでの意味しか持たないので論理的には意味を持ちません。また、tableを段組に使用するのも本来の論理的な意味とは違う使い方をしているためマークアップ上NGです。(だからCSSが出てきて、論理マークアップをしましょうという風潮になっているんです。)

追加質問等ございましたらどうぞ補足で質問してくださいね。わかりにくいと思いますから。

この回答へのお礼

ご丁寧にありがとうございます。
つまり、基本はＣＳＳで構成していったほうがいい、ということでしょうか？

お礼日時：2006/04/26 22:13

No.3 回答者： noname#78418 回答日時： 2006/04/26 15:29

こんにちは。

論理マークアップ等の意味を再確認していただいた方がよろしいですね。
http://members.jcom.home.ne.jp/pctips/www/knowle …

h1は見出し1の要素です。見栄え上は変わらなくても
<h1 style="font-size:1.2em;">見出し１</h1>
<span style="font-size:1.2em;">見出し１</span>
上記2つは意味が異なります。音声ブラウザ等で読み上げられたときに違いが生じます。

他に何かありましたらどうぞ。

この回答へのお礼

参考サイト拝見しました。
・・・・難しいですね（汗）
アドバイスありがとうございます＾＾

お礼日時：2006/04/26 22:11

No.2 回答者： coboler 回答日時： 2006/04/26 15:24

<h1>はそのもの単体で意味を持つタグですが、

<div>、<span>は意味を持たないタグです。

また、<div>はブロック要素で<span>はインライン要素
なので、<div>を用いた場合には強制的に改行が入ります。

例)
html
<div>test11</div>test12
<span>test21</span>test22
表示
test11
test12test21test22

となります。なのでフォントサイズの指定も上記のことを
踏まえてタグの使い分けをしてはどうでしょうか。

この回答へのお礼

アドバイスありがとうございます＾＾
使い分けを理解しつつ、そのもの自体の意味も理解できるよう勉強します。

お礼日時：2006/04/26 22:09

No.1 回答者： kokorone 回答日時： 2006/04/26 15:14

たまたま、使用されたケースで、結果が同じ？だからといって、

あいまいな使い方はさけるべきです。
各要素の特徴・役割を理解された上でお使いください。

参考URL：http://www.tohoho-web.com/html/index.htm

この回答へのお礼

はい！ありがとうございます＾＾

お礼日時：2006/04/26 22:07