• ベストアンサー

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

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

質問者が選んだベストアンサー

  • ベストアンサー
回答No.3

HTMLの要素は、大きく分けて「ブロック要素」と「インライン要素」の二つに分かれます。 きちんとした説明は、書籍等でご確認ください。わかりやすい(?)イメージのみお伝えいたします。 文章の単位に 「段落」「文(。から。まで」「文節」「単語」 と分かれますよね。 大雑把に言って、「段落」レベルがブロック要素。「文」以下がインライン要素といった感じでしょうか。 ブロック要素は、基本的に改行を伴いますが、インライン要素は改行しません(span要素も、spanを使ったからといって改行しませんよね?ですが、似たような要素のdiv要素だと改行されてしまいます。つまり、div要素はブロック要素です。) イメージはこんな感じです。 使用上の注意としては、ブロック要素の中にインライン要素が入るのはいいのですが、インライン要素の中にブロック要素を入れてはいけないということです。 ○:<p>abcde<span>fgh</span>ijklmn</p> ×:<span>abcde<p>fgh</p>ijklmn</span> (属性が入っていないなどの突っ込みは別にして) このようなかんじですね。 ただ、実際にはブラウザはどちらでも同じように表示されるようです。ですが、きちんとした使い方をされるほうがもちろんいいですね。

muku101681
質問者

お礼

すごく良く解りました。注意点も教えていただいて、すごく感謝です!

すると、全ての回答が全文表示されます。

その他の回答 (4)

noname#19206
noname#19206
回答No.5

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

muku101681
質問者

お礼

サイトの方拝見いたしました。参考になりそうです。他の方どうようご意見をあわせて考えてみるとイメージがなんとなく解りました。 イメージを持ちつつ勉強するのと漠然と勉強するのでは、全然違うので感謝です。ありがとうございました。

すると、全ての回答が全文表示されます。
noname#20633
noname#20633
回答No.4

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

参考URL:
http://www.game-writer.com/kodomo/web/index.html
muku101681
質問者

お礼

さすが子供向けに作られてるサイトだけあって、わかりやすかったです。

すると、全ての回答が全文表示されます。
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.2

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

muku101681
質問者

お礼

なんと、、なくですが、イメージが解りました。ありがとうございます!

すると、全ての回答が全文表示されます。
noname#20377
noname#20377
回答No.1

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

muku101681
質問者

お礼

文章が昔風になってて読めなかったりするのですが、それとは逆に内容はわかりやすく早速お気に入りにいれさせていただきました。 今勉強してるサイトが終わったら、全部読みたいですね。 各要素についてもなんとなく理解できました。 ありがとうございます。

すると、全ての回答が全文表示されます。

関連するQ&A