teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

修正

2019/10/20 12:16

投稿

s8_chu
s8_chu

スコア14731

answer CHANGED
@@ -7,7 +7,7 @@
7
7
 
8
8
  質問文のコードでは、恐らく `div` 要素に対して `display: inline` を設定した状態なのだと思いますが、この状態では `span` 要素と `div` 要素に **CSS としての違いはありません**。セマンティクスに関係なく、要素に装飾を適用することが出来ます。
9
9
 
10
- ここで、 CSS は装飾を行うもので、要素の性質自体を変化させるものではないことに注意する必要があります。つまり、 `div` 要素や `span` 要素は HTML として見たとき、どのような装飾が適用されていても、異なる要素になります。`div` 要素と `span` 要素は、どちらも特別な意味を持ちませんが、これらの要素では**カテゴリとコンテンツモデルが異なり**ます ([参](https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element)[考](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-span-element))。簡単に言えば、以下のようなコードは有効な HTML ではないということです。このことから、この二つは CSS としては同じ、 HTML としては異なるものだといえます。
10
+ ここで、 CSS は装飾を行うもので、**要素の性質自体を変化させるものではない**ことに注意する必要があります。つまり、 `div` 要素や `span` 要素は HTML として見たとき、どのような装飾が適用されていても、異なる要素になります。`div` 要素と `span` 要素は、どちらも特別な意味を持ちませんが、これらの要素では**カテゴリとコンテンツモデルが異なり**ます ([参](https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element)[考](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-span-element))。簡単に言えば、以下のようなコードは有効な HTML ではないということです。このことから、この二つは CSS としては同じ、 HTML としては異なるものだといえます。
11
11
 
12
12
  ```HTML
13
13
  <span style="display: block">