質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.49%

  • div

    24questions

    HTMLの<div>タグです。<div>要素は特に意味を持っていません。ひとかたまりのコンテンツに使用されるか、(セマンティックとして)他の要素では記述できないコンテンツに使用されることが多いです。

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

受付中

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 7,318

GundamMeistar

score 14

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

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

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

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

以下は誤りというわけです
<span>
  <div></div>
</span>

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



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

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

<style type="text/css">
/* class用 */
.red{ color: red; }

/* id用 */
#myname{ font-weight: bold; }
</style>

私の名前は<span id="myname">太郎</span>です。 <!-- idは一箇所だけ -->
<span class="red">20歳</span>です。 <!-- classは複数指定できる -->
<span class="red">埼玉県</span>出身です。


最後にstyle属性ですが、
style属性は直接CSSの内容を記述するものです。
idやclassを用いた時は、styleタグなどで外から指定しますが、style属性は
直接CSSの内容を書いてしまいます。
<span style="color:red">ほげ</span>

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

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

<html>
<head>
 <link rel="stylesheet" type="text/css" href="style.css">
 <style>
   #whatscolor{ color: blue; }
 </style>
</head>
<body>
  <span id="whatscolor" style="color:red">ほげ</span>
</body>
</html>
/* style.css */
#whatscolor{
  color: green;  
}

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/03/05 17:09

    私の名前は<span id="myname">太郎</span>です。 <!-- idは一箇所だけ -->
    <span class="red">20歳</span>です。 <!-- classは複数指定できる -->
    <span class="red">埼玉県</span>出身です。
    ↑これをする事によって、どのようにホームページに表示されますか?

    キャンセル

  • 2015/03/05 17:12

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

    キャンセル

  • 2015/03/05 18:17

    idやclassを設定しても、cssでその中身を決めなければ見た目的には何も変わりません。

    なのでそれだけを記述しても

    私の名前は<span>太郎</span>です。
    <span>20歳</span>です。
    <span>埼玉県</span>出身です。

    としても見た目は同じです。

    munyaXさんが提示してくださっているように
    <style type="text/css">
    /* class用 */
    .red{ color: red; }

    /* id用 */
    #myname{ font-weight: bold; }
    </style>

    の部分も記述して初めてidやclassを設定した効果が表れます。

    キャンセル

0

html&cssの話でしょうか?
ひとことで言えばstyleは直接html内に指定するもので、idやclassはcssで別に指定するもの、です。
見え方は指定した内容によります。

HTMLクイックリファレンス等を見られるといいかと思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

関連した質問

同じタグがついた質問を見る

  • div

    24questions

    HTMLの<div>タグです。<div>要素は特に意味を持っていません。ひとかたまりのコンテンツに使用されるか、(セマンティックとして)他の要素では記述できないコンテンツに使用されることが多いです。