インライン要素ってなんですか？

Question

最近ＣＳＳを勉強し始めたばかりなのですが、その中で
span要素は汎用性の高いインライン要素と説明があったのですが、
そのインライン要素というのはどうゆう意味なのでしょうか？そのサイトにも説明はしてあったのですが、いまいち理解できませんでした。
解りやすく説明していただけるとありがたいです。

よろしくお願いいたします。

komayam324 · Accepted Answer

ＨＴＭＬの要素は、大きく分けて「ブロック要素」と「インライン要素」の二つに分かれます。

きちんとした説明は、書籍等でご確認ください。わかりやすい(？)イメージのみお伝えいたします。

文章の単位に
「段落」「文（。から。まで」「文節」「単語」
と分かれますよね。

大雑把に言って、「段落」レベルがブロック要素。「文」以下がインライン要素といった感じでしょうか。

ブロック要素は、基本的に改行を伴いますが、インライン要素は改行しません（span要素も、spanを使ったからといって改行しませんよね？ですが、似たような要素のdiv要素だと改行されてしまいます。つまり、div要素はブロック要素です。）

イメージはこんな感じです。

使用上の注意としては、ブロック要素の中にインライン要素が入るのはいいのですが、インライン要素の中にブロック要素を入れてはいけないということです。

○：abcdefghijklmn
×：abcdefghijklmn
（属性が入っていないなどの突っ込みは別にして）

このようなかんじですね。
ただ、実際にはブラウザはどちらでも同じように表示されるようです。ですが、きちんとした使い方をされるほうがもちろんいいですね。

abcdefghijklmn

×：abcde

fgh

ijklmn （属性が入っていないなどの突っ込みは別にして）このようなかんじですね。ただ、実際にはブラウザはどちらでも同じように表示されるようです。ですが、きちんとした使い方をされるほうがもちろんいいですね。

noname#19206 · Answer

ここら辺が参考にならないかなぁ…？
http://www.mozilla.gr.jp/standards/webtips0015.html
http://www.mozilla.gr.jp/standards/webtips/webtips0030.html

ブロック要素は指定された複数の行を囲む四角い箱のイメージ、
インライン要素は文字にマーカーペンで線を引くようなイメージ…かな？

あぁ、あまり当てにしすぎないでくださいね。
端的にあらわそうと思ってとっさに考えた表現ですから。

noname#20633 · Answer

参考は、子ども向けのスタイルシートのページです。

端的なわかりやすい説明があります。

参考URL：http://www.game-writer.com/kodomo/web/index.html

BLUEPIXY · Answer

インライン要素は、喩えて言うなら、１次元の直線みたいなもので文字列のような１つの行に連なるような横の拡がりを持つもので
ブロック要素は、インライン要素やブロック要素を含むような、２次元の縦と横の拡がりがあるようなもの
って感じでしょうか

noname#20377 · Answer

ブロックレベル要素とインライン要素
http://kaz.topaz.ne.jp/well/www/isohtml/basic5.html

もし曖昧なところがあるなら最初から読むことをお勧めするよ♪
http://kaz.topaz.ne.jp/well/www/isohtml/

インライン要素ってなんですか？

ＨＴＭＬの要素は、大きく分けて「ブロック要素」と「インライン要素」の二つに分かれます。

ここら辺が参考にならないかなぁ…？

参考は、子ども向けのスタイルシートのページです。

インライン要素は、喩えて言うなら、１次元の直線みたいなもので文字列のような１つの行に連なるような横の拡がりを持つもので

ブロックレベル要素とインライン要素

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング