HTML+CSS References | CSS使用サンプル

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

[HTML]

<div class="sample1">
ブロック要素<br>
ブロック要素<br>
ブロック要素
</div>
<div>
<span class="sample1">
インライン要素<br>
インライン要素<br>
インライン要素</span>
</div>

[CSS]

.sample1{
	background-color: #ccc;
	border: 1px solid #999;
	margin: 1em;
	line-height: 2em;
}

[ブラウザでの表示]

ブロック要素
ブロック要素
ブロック要素

インライン要素
インライン要素
インライン要素

width, height

[HTML]

<div class="sample2">
横長です。<br>
薄い赤のぶぶんがwidth,heightで設定した箱の大きさ。
</div>
<div class="sample3">
縦長です。<br>
薄い緑のぶぶんがwidth,heightで設定した箱の大きさ。
</div>
<div class="sample4">
残った幅。<br>
薄い青のぶぶんがwidth,heightで設定した箱の大きさ。
</div>
<div class="sample2">
横長です。
</div>

[CSS]

/* sample2の箱の実際の幅は460+5*2=470px。 */
.sample2{
	width: 460px;
	height: 50px;
	clear: both;
	background-color: #fcc;
	border: 5px solid #f33;
}
/* sample3の箱の実際の幅は150+5*2=160px。 */
.sample3{
	width: 150px;
	height: 300px;
	float: left;
	background-color: #cfc;
	border: 5px solid #3f3;
}
/* sample4の箱の実際の幅は300+5*2=310px。 */
.sample4{
	width: 300px;
	height: 300px;
	float: left;
	background-color: #ccf;
	border: 5px solid #33f;
}
/* 160+310=470 なので、幅は一致する。 */

[ブラウザ表示]

横長です。
薄い赤のぶぶんがwidth,heightで設定した箱の大きさ。

縦長です。
薄い緑のぶぶんがwidth,heightで設定した箱の大きさ。

残った幅。
薄い青のぶぶんがwidth,heightで設定した箱の大きさ。

横長です。

margin,padding

[HTML]

<div class="sample2kai">
赤いborder線から上と左に若干空いてる部分がpadding幅。
</div>
<div class="sample3kai">
更に細くなった。
</div>
<div class="sample4kai">
上下左右の箱の隙間がmargin幅。<br>
別の箱のmarginとこの箱のmarginが<br>
それぞれあるので、<br>
上と左の幅は5+5=10pxになっている。<br>
下と右はmarginを持っていないので5px。
</div>
<div class="sample2">
marginとpaddingを設定しない場合の箱の大きさ。
</div>

[CSS]

/* sample2の箱の実際の幅は460+5*2=470px。 */
.sample2{
	width: 460px;
	height: 50px;
	clear: both;
	background-color: #fcc;
	border: 5px solid #f33;
}
/* sample2kaiの箱の実際の幅は440+5*2+5*2+5*2=470px。
ただし、marginは見えないので箱自体は若干縮んで見える。 */
.sample2kai{
	width: 440px;
	height: 30px;
	margin: 5px;
	padding: 5px;
	background-color: #fcc;
	border: 5px solid #f33;
}
/* sample3の箱の実際の幅は130+5*2+5*2+5*2=160px。 */
.sample3kai{
	width: 130px;
	height: 280px;
	margin: 5px;
	margin: 5px;
	padding: 5px;
	float: left;
	background-color: #cfc;
	border: 5px solid #3f3;
}
/* sample4の箱の実際の幅は280+5*2+5*2+5*2=310px。 */
.sample4kai{
	width: 280px;
	height: 280px;
	margin: 5px;
	padding: 5px;
	float: left;
	background-color: #ccf;
	border: 5px solid #33f;
}

[ブラウザ表示]

赤いborder線から上と左に若干空いてる部分がpadding幅。

更に細くなった。

上下左右の箱の隙間がmargin幅。
別の箱のmarginとこの箱のmarginが
それぞれあるので、
上と左の幅は5+5=10pxになっている。
下と右はmarginを持っていないので5px。

marginとpaddingを設定しない場合の箱の大きさ。

color,font-*,text-align,line-height

[HTML]

<div style="text-align: center;">
中央寄せここから<br>
ここは通常の文字です。<br>
<span style="color: #f00;">文字色が赤になります。</span><br>
<span class="bold">太字になります。</span><br>
<span style="font-size: 1.5em;">文字を大きくします。</span><br>
中央寄せここまで
</div>
<div style="color: #00f;">
青文字ここから<br>
ここは全て青い文字で書かれます。<br>
<span class="bold">書式の追加もできます。</span><br>
<span style="color: #000;">上書きして文字色を黒にしました。</span><br>
青文字ここまで
</div>
<div style="line-height: 2px;">
行の高さを2pxにしました。<br>
おそらく、文字が重なって読めないはずです。<br>
"em"という単位を使うと、1emが文字の高さと同じなので、<br>
line-heightを設定するときはemで1より大きい値を使うのが無難です。
</div>

[CSS]

.bold{
	font-weight: bold;
}

[ブラウザ表示]

中央寄せここから
ここは通常の文字です。
文字色が赤になります。
太字になります。
文字を大きくします。
中央寄せここまで

青文字ここから
ここは全て青い文字で書かれます。
書式の追加もできます。
上書きして文字色を黒にしました。
青文字ここまで

行の高さを2pxにしました。
おそらく、文字が重なって読めないはずです。
"em"という単位を使うと、1emが文字の高さと同じなので、
line-heightを設定するときはemで1より大きい値を使うのが無難です。

display,float

[HTML]

<ul>
<li>リストです。</li>
<li>普通のリストです。</li>
</ul>
<ul class="sample5">
<li>横に並ぶリストです。</li>
<li>メニューに使えます。</li>
<li>項目が増えると</li>
<li>適当に次の行へ</li>
<li>べんりですね。</li>
</ul>
<dl class="sample6">
<dt>定義リスト</dt>
<dd>floatでtableみたいに使えます。</dd>
<dt>高さに注意</dt>
<dd>tableみたいに高さは揃えてくれません。<br>
行数とheightの設定に注意です。</dd>
</dl>

[CSS]

.sample5{
	list-style-type: none;
	padding: 0;
}
.sample5 li{
	display: inline-block;
	/* 以下2行inline-blockがわからないブラウザ向けの記述 */
	*display: inline;
	*zoom: 1;
	border: 1px solid #888;
}
.sample6{
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.sample6 dt{
	display: block;
	float: left;
	width: 100px;
	background: #ccf;
	border: 1px solid #888;
	margin: 0;
	padding: 0;
}
.sample6 dd{
	display: block;
	float: left;
	width: 300px;
	background: #ffc;
	border: 1px solid #888;
	margin: 0;
	padding: 0;
}

[ブラウザ表示]

リストです。
普通のリストです。

横に並ぶリストです。
メニューに使えます。
項目が増えると
適当に次の行へ
べんりですね。

定義リスト: floatでtableみたいに使えます。
高さに注意: tableみたいに高さは揃えてくれません。
行数とheightの設定に注意です。