divとspanの使い分け

質問

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

回答No.7

noname#78418 · ベストアンサー

こんにちは。

> つまり、基本はＣＳＳで構成していったほうがいい、ということでしょうか？
デザインは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で書いてほしいところ(これは私の意見なので別に気にしなくてもよいです)。

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

参考URL：

,,

お礼

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

回答No.6

steel_gray

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

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

お礼

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

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

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

回答No.5

steel_gray

#2さんにちょっと補足。(DIVとSPANの使い分け)

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

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

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

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

お礼

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

回答No.4

noname#78418

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

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

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

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

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

お礼

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

回答No.3

noname#78418

こんにちは。

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

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

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

お礼

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

回答No.2

coboler

<h1>はそのもの単体で意味を持つタグですが、
<div>、<span>は意味を持たないタグです。

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

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

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

お礼

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

回答No.1

kokorone

たまたま、使用されたケースで、結果が同じ？だからといって、
あいまいな使い方はさけるべきです。
各要素の特徴・役割を理解された上でお使いください。

参考URL：

http://www.tohoho-web.com/html/index.htm

お礼

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