箱的なものと箱的じゃないもの

箱的なものと箱的じゃないもの。
ページレイアウトを考えるのに重要なところです。まずは下の例をご覧ください。divとimgとspanを2つずつ、並べて表示してみます。

まずはdiv箱から。大きさは60px四方です。

.sbox{
	width:60px;
	height:60px;
	border:1px solid #000000;
}
1
2
サンプル
1
2

次は画像。これも大きさ60px四方。例によってまたWEBデザイナーが作った超シンプル素材集 | WEB素材 ボタン 背景画像 矢印アイコンさんからの画像です。


サンプル

最後はspan。赤文字と下線あり文字を並べてみました。一応、こいつも縦と横の長さを60pxに指定しておきます。

.red{
	color:red;
	width:60px;
	height:60px;
}
.underline{
	text-decoration:underline;
	width:60px;
	height:60px;
}
あああいいい
サンプル
あああいいい

大きさを指定した物を2つ並べて書いてみても、それぞれで違いますね。

div img span
前後の改行 あり(隣に別のものを置けない) なし(隣に別のものを置ける) なし(隣に別のものを置ける)
大きさ 指定できる 指定できる
(画像を表示させてみよう参照)
指定できない

divは1人で1行をまるまる占領します。前後に別のdiv箱があったり、画像があったり、文章があったりしても、とにかく1人でドカンと1行使います。2人で並ぶなんてことは頑張って設定しない限りは無理です。
imgやspanは仲良く1行で収まっていますね。

大きさの所でいうと、divもimgも大きさを指定することが出来ますが、spanは指定しても縦横60pxにはなっていません。

divタグのように、前後に改行が強制的に入って大きさが指定できるものをブロック要素(block)といいます。
imgタグのように、改行はないが大きさを指定できるものをインラインブロック要素(inline-block)といいます。
spanタグのように、改行はなく大きさも指定できないものをインライン要素(inline)といいます。

どのタグが3つのうちどの種類なのかを把握しておかないと、いろいろなコンテンツをページに配置する時に苦労することになります。
今一気に覚えたところでつまらないし大変なので、新しいタグに遭遇した時に実際に並べて表示させ確認したり、調べたりして1つずつ覚えていくのが良いと思います。

どうしても種類を変えたいときは

アイツがブロック要素じゃなくてインラインブロックorインライン要素だったらよかったなあ……と思う時がいずれ来ることもあると思います。
div箱を2つ並べて表示したいときです。例えばメニューを入れた箱を左に、記事を入れた箱を右に表示させたいとか。
方法は複数あるのでいずれ説明しようと思いますが、div箱を2つ並べる方法の1つに、「ブロック要素からインラインブロックorインライン要素に変えてしまう」というものがあります。

CSSのほうでdisplayという、表示方法を扱っている人がいて、その人に「block」「inline-block」「inline」と伝えると変えてくれます。

.inlineblock{
	display:inline-block;
	border:1px solid #000000;
	width:60px;
	height:60px;
}
.inline{
	display:inline;
	border:1px solid #000000;
	width:60px;
	height:60px;
}
1
2
サンプル
1
2
1
2
サンプル
1
2

div箱が先ほどのimgやspanのような表示に変わりました。
多分、インライン要素をブロック要素に変えたいってことはないよね……この方法で変えられるけど需要見当たらないし実演しません

追記:あたり判定増やすのに使うだろ!と指摘が入った。つらい。