div id と div styleの違い span classとspan styleの違い

div idとspan classの使い方が分かりません。これらを入力するとどのように表示されるのか見本を見せて下さい。宜しくお願いします。
また、div id div styleとspan classとspan styleの違いを教えてください。宜しくお願いします。

行動規範の内容に同意します

回答2件

まずdivはブロックレベル要素、spanはインライン要素と呼ばれます。

HTMLのタグはブロックレベル要素とインライン要素に別れており、かなりざっくり言うと
・ブロックレベル要素はタグの中に別のタグを含むことができる
・インライン要素はできない
※厳密にはブロック要素を内包することができない(インライン要素は可)
という物です。
（少し嘘をついていますが、大雑把にはそんなイメージです）

つまり以下のような書き方は許容されますが、

lang
1 <div>
2   <span></span>
3 </div>

以下は誤りというわけです

lang
1<span>
2  <div></div>
3</span>

■ブロックレベル要素とインライン要素
http://www.kanzaki.com/docs/html/element-level.html

ブロックレベル要素は見出し、段落など文書を構成する基本要素となるものです。ブロックレベル要素の内容モデルには、別のブロック要素やインライン要素を含むことができますが、逆にインライン要素の中にブロックレベル要素を置くことはできません。
インライン要素は、主としてブロックレベル要素の内容として用いられるもので、文書の構造を構成するというより、ブロックレベル要素内の特定の部分になんらかの役割や機能を持たせる要素です。たとえば、ある語句に対してハイパーリンク機能を与えるアンカー要素、特定の語句を強調する要素などです。

次にid属性とclass属性についてですが、
id属性はその文書中で同じものを指定してはいけない決まりになっています。
つまり、文書中で唯一の箇所を特定する際に用います。

class属性はidの逆で、同じ物を同じ文書中で指定してもよく、
まとめて複数箇所に対して指定をする際に用います。

lang
1<style type="text/css">
2/* class用 */
3.red{ color: red; }
4
5/* id用 */
6#myname{ font-weight: bold; }
7</style>
8
9私の名前は<span id="myname">太郎</span>です。 <!-- idは一箇所だけ -->
10<span class="red">20歳</span>です。 <!-- classは複数指定できる -->
11<span class="red">埼玉県</span>出身です。

最後にstyle属性ですが、
style属性は直接CSSの内容を記述するものです。
idやclassを用いた時は、styleタグなどで外から指定しますが、style属性は
直接CSSの内容を書いてしまいます。

lang
1<span style="color:red">ほげ</span>

何が違うかというと、同一箇所に対して、
1.外部のCSSファイル
2.同一ファイル内のstyleタグ
3.style属性
上記から同時に指定されていた場合、3が一番強く効力を発揮します。

つまり上記がわかれば、下記のようなソースに出会った場合、

lang
1<html>
2<head>
3 <link rel="stylesheet" type="text/css" href="style.css">
4 <style>
5   #whatscolor{ color: blue; }
6 </style>
7</head>
8<body>
9  <span id="whatscolor" style="color:red">ほげ</span>
10</body>
11</html>

lang
1/* style.css */
2#whatscolor{
3  color: green;  
4}

最終的に「ほげ」が何色になるかわかると思います。

投稿2015/03/05 07:37

編集2015/03/05 07:44

munyaX

総合スコア783

GundamMeistar

2015/03/05 08:09

私の名前は太郎です。  20歳です。  埼玉県出身です。 ↑これをする事によって、どのようにホームページに表示されますか?

munyaX

2015/03/05 08:12

ここで説明するよりも、実際にコピペして、ファイルに保存(test.htmlなどと名前をつけ)、ブラウザで開かれると一瞬で理解できると思いますよ。

ao_love

2015/03/05 09:17

idやclassを設定しても、cssでその中身を決めなければ見た目的には何も変わりません。なのでそれだけを記述しても私の名前は太郎です。 20歳です。 埼玉県出身です。としても見た目は同じです。 munyaXさんが提示してくださっているように <style type="text/css"> /* class用 */ .red{ color: red; } /* id用 */ #myname{ font-weight: bold; } </style> の部分も記述して初めてidやclassを設定した効果が表れます。

行動規範の内容に同意します