読者です 読者をやめる 読者になる 読者になる

FOR SE

文系の学部から新卒でメーカー系のSIerに就職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界に就職

このエントリーをはてなブックマークに追加

【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;
}
.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }