暮らしをおトクにかえていく｜ポイントインカム
ワラウ - 遊べるポイントサイト

推奨ブラウザ

Internet Explorer
Version 7以降
Fire Fox
Version 3.5以降
Safari
Version 5以降
それ以前のバージョンでは表示が異なる場合があります。

更新情報

HTML講座

XHTML講座

  • 現在製作中...

CSS講座

質問・ご意見

関連書籍 Pick Up



HTML ＆ CSS ＆ JavaSc...

HTML ＆ CSS ＆ JavaScriptリファレンス

価格：2,625円（税込、送料別）

Link

レンタルサーバー&ドメイン

ホームページを作るときにはサーバー（作ったHTMLを置く所）を借りなければいけません。お手頃なレンタルサーバーをいくつか上げてみました。



月額105円から、キャンペーンあり

380円から借りれるお得なサーバ!!オススメ

ナウでヤングなレンタルサーバー

20GBの大容量で『お試し期間が2週間!!』

ボックスの領域

ボックスのはそれぞれ領域があります。レイアウトするときにもその領域は大変重要になってきます。

ボックスの外側の領域

まずはボックスを2個作ってみましょう。

<html>
　<head>
　　<style type="text/css">
　　<!--
　　.box{
　　　height:100px;
　　　width:100px;
　　　border:1px solid black;
　　　}
　　-->
　　</style>
　<head>
　<body>
　　<div class="box">ボックス1</div>
　　<div class="box">ボックス2</div>
　</body>
</html>
ボックス1
ボックス2

2つのボックスはくっついています。これを離して表示させるにはmargin（マージン） を使います。marginはピクセルで指定します。

<html>
　<head>
　　<style type="text/css">
　　<!--
　　.box{
　　　height:100px;
　　　width:100px;
　　　border:1px solid black;
　　　margin:5px;
　　　}
　　-->
　　</style>
　<head>
　<body>
　　<div class="box">ボックス1</div>
　　<div class="box">ボックス2</div>
　</body>
</html>
ボックス1
ボックス2

ボックス1とボックス2がmarginで指定した分離れました。

<div>を使って高さ200ピクセル、横幅300ピクセル、背景が黄色のボックスを2個作り、marginを30ピクセルに指定してみましょう。

<html>
<head>
<style type="text/css">
<!--

-->
</style>
</head>
<body>

</body>
</html>

答えはここをクリック

CSS

.box{
　height:200px;
　width:300px;
　background-color:yellow;
　margin:30px;
　}

HTML

<div class="box"></div>
<div class="box"></div>

marginもborderの時と同じように 上下左右個別に幅を指定する事が出来ます。

margin-top
ボックスの上辺の外側に余白を作ります。
margin-bottom
ボックスの下辺に外側に余白を作ります。
margin-left
ボックスの左辺に外側に余白を作ります。
margin-right
ボックスの右辺に外側に余白を作ります。

さらにこれらをまとめて書くこともできます。
margin:上辺 右辺 下辺 左辺;と順にスペースで区切って記入します。
上辺が10px 右辺が15px 下辺が5px 左辺が0px に指定したい場合は

margin:10px 15px 5px 0px;

と書きます。

ボックスの内側の領域

ではボックスの中に書かれた『ボックス1』『ボックス2』を枠線から離れた位置に表示しましょう。
枠線から離れた位置に表示するにはpadding（パディング）を使います。

<html>
　<head>
　　<style type="text/css">
　　<!--
　　.box{
　　　height:100px;
　　　width:100px;
　　　border:1px solid black;
　　　margin:5px;
　　　padding:10px;
　　　}
　　-->
　　</style>
　<head>
　<body>
　　<div class="box">ボックス1</div>
　　<div class="box">ボックス2</div>
　</body>
</html>
ボックス1
ボックス2

『ボックス1』『ボックス2』の文字がpsddingで指定した分、枠線から離れました。

<div>を使って高さ200ピクセル、横幅300ピクセル、背景が緑色のボックスを作り、ボックスの中に 『padding指定』と記入して、paddingを35ピクセルに指定してみましょう。

<html>
<head>
<style type="text/css">
<!--

-->
</style>
</head>
<body>

</body>
</html>

答えはここをクリック

CSS

.box{
　height:200px;
　width:300px;
　background-color:green;
　padding:35px;
　}

HTML

<div class="box">padding指定</div>

paddingも上下左右個別に幅を指定する事が出来ます。

padding-top
ボックスの上辺の内側に余白を作ります。
padding-bottom
ボックスの下辺に内側に余白を作ります。
padding-left
ボックスの左辺に内側に余白を作ります。
padding-right
ボックスの右辺に内側に余白を作ります。

さらにこれらをまとめて書くこともできます。
padding:上辺 右辺 下辺 左辺;と順にスペースで区切って記入します。
上辺が10px 右辺が15px 下辺が5px 左辺が0px に指定したい場合は

padding:10px 15px 5px 0px;

と書きます。

それぞれの領域の位置関係

border、margin、paddingの 位置関係は下の図のようになっています。
位置関係の図
ココで注意しなければいけない事!!
heightを100ピクセル、widthを150ピクセルのボックスを作り margincを20px、paddingを10px、borderを 3pxに設定するとボックスの高さは133ピクセルになります。

100px(height)+3px(border)+20px(margin)+10px(padding)=133px

横幅も同じように全てたして183ピクセルとなります。

150px(width)+3px(border)+20px(margin)+10px(padding)=183px

ボックスを作ってmarginやpaddingを指定する場合は、 その長さも考えてheight、widthを決める必要があります。

前に戻る｜次に進む