【css】css入門 ～インライン要素・ブロックレベル要素とレイアウトの左詰め～

【今回の紹介】

はじめてのcss入門くらいの内容です。

自分はなんとなくで、レイアウトを並べたいときにcssに

float:left

を使っていました。

いったん、cssについてしっかり学習したいなと感じたので、

入門の入門くらいまで遡って学習を行ったので

そのメモを紹介します。

【今回の内容】

内容としては、

①インライン要素とブロック要素

・ブロック要素とは

・インライン要素とは

②レイアウトを横並びにする方法

・display:inline

・float:left

③marginとpadding

④divタグ内のmarginとpadding

今回は、

①インライン要素とブロック要素

②レイアウトを横並びにする方法

について紹介します。

①インライン要素とブロック要素

参考：http://www.xml.vc/html/block-inline.html

htmlで生成するタグ要素には,主にブロック要素とインライン要素の2種類ある。

■ブロック要素とは

ブロック要素とは、htnlタグの中でも、文章の基本構成をなすものとされている。

たとえば、divタグ・tableタグ・h1～h6などでこのブロック要素が入った場合は、

改行が行われる。

名称通りブロック単位の要素が生成されるというイメージで、生成後と前後に改行が

入ったブロックとして

扱われる。

　したがって、ブロック要素を二つ追加した並べた場合は、一個目のブロックの下に

　二個目のブロックがつく

<div id="div_1">
	<p>div1</p>
</div>
<div id="div_2">
	<p>div2</p>
</div>

#div_1{

	background-color:red;

}

#div_2{

	background-color:#F0F8FF;

}

■インライン要素とは

インライン要素とは、ブロックレベル要素の中に含まれ、ブロックレベル要素の特定の部分に対し、

何らかの影響を与える。リンクをつけたり、強調表示したりなど。

インライン要素に該当するのは、imgタグ spanタグ aタグなど

インライン要素は、ブロックレベル要素と異なり改行が行われない。

<div id="div_2">
	<a haref="">これはリンクですよよ</a>
	<input type="button" value="button1">
	<input type="button" value="button2">
</div>

②レイアウトを横並びにする方法

htmlのレイアウトを考えていくときに、既存のレイアウトを

横並びに変更したいという事が出てくると思います。

その紹介です。

参考：http://www.halawata.net/2011/10/css-float-display-box/

■float:leftでブロックを要素をスライドさせる

　
　 float:leftをブロック要素に設定することにより、
　
　 要素を浮かし、左詰めにすることできます。
　
　

■display:inlineでブロック要素をインライン要素とする

display:inlineにより、ブロック要素をインライン要素として、

改行なしで要素を並べることができます。

※display:blockによりインライン要素をブロック要素とすることも可能。

　ちなみにdisplay: inline-blockという方法もある

<div class="div_b">
	<p>div1</p>
</div>
<div class="div_b">
	<p>div2</p>
</div>
<div class="div_b">
	<p>div3</p>
</div>

.div_b{
	background-color:#F0F8FF;
	float:left;
}

p{
display:inline;/**/
}
.div_b{
	display:inline;
	background-color:#F0F8FF;
}

.div_b{
	display:inline-block;
	background-color:#F0F8FF;
}