ハンデプログラマー

障害者の方のためのプログラミング教室です。目指せ自立!!

トップ > HTML/CSS入門 > スタイルシートの基本(レイアウトの構成)

スタイルシートの基本(レイアウトの構成)

1、テラパッドを開きファイルを新規作成します。

2、下記のようにプログラムを打ち込みます。

@charset "UTF-8";

body{
background:#ffffff;
}

#header{
box-sizing:border-box;
position:relative;
background:#b0c4de;
width:980px;
margin:0 auto;
padding:20px 20px;
}

#contents{
background:#ffffff;
width:980px;
height:300px;
margin:0 auto;
}

#main{
box-sizing:border-box;
background:#228b22;
float:left;
width:70%;
height:300px;
padding:20px 20px;
}

#sub{
box-sizing:border-box;
background:#deb887;
float:right;
width:30%;
height:300px;
padding:20px 20px;
}

#footer{
box-sizing:border-box;
clear:both;
background:#ffc0cb;
width:980px;
margin:0 auto;
padding:20px 20px;
}

3、HTMLと同じフォルダに「style8.css」というファイル名で保存します。

4、テラパッドを開きファイルを新規作成します。

2、下記のようにプログラムを記述します。

<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="style8.css">
</head>
<body>

<div id="header">
ヘッダー
</div>

<div id="contents">
	<div id="main">
	メイン
	</div>

	<div id="sub">
	サブメニュー
	</div>
</div>

<div id="footer">
フッター
</div>

</body>
</html>

3、このファイルをHTML形式で保存します。

4、HTMLファイルをダブルクリックして開きます。
テスト8表示

CSSで設定したレイアウトが領域別に表示されます。

●headerではサイトのヘッダー部分を設定しています。

#header{
box-sizing:border-box;
position:relative;
background:#b0c4de;
width:980px;
margin:0 auto;
padding:20px 20px;
}
box-sizingではボックスサイズの算出方法を指定していて、border-boxは領域内にパディングとボーダーを幅と高さに含めるようにします。
positionはボックスの配置を相対位置か絶対位置に指定していて、relativeは相対位置になります。
backgroundは背景色を指定します。
widthは横幅を指定します。
marginは領域の外側の幅を設定していて、0 autoは画面の中心に表示させるために設定します。
paddingは領域内の幅を設定します。

●contentsはサイトの中心部分を設定しています。

#contents{
background:#ffffff;
width:980px;
height:300px;
margin:0 auto;
}
内容はheaderと同じでheight(高さ)を300ピクセルに設定しています。

●mainは中心部分の左側を設定しています。

#main{
box-sizing:border-box;
background:#228b22;
float:left;
width:70%;
height:300px;
padding:20px 20px;
}
floatは左右のどちら側に寄せるかを決めるものでleftは左側です。

●subは中心部分の右側を設定しています。

#sub{
box-sizing:border-box;
background:#deb887;
float:right;
width:30%;
height:300px;
padding:20px 20px;
}
floatは左右のどちら側に寄せるかを決めるものでrightは右側です。

●footerはサイトのフッター部分の設定をしています。

#footer{
box-sizing:border-box;
clear:both;
background:#ffc0cb;
width:980px;
margin:0 auto;
padding:20px 20px;
}
clearはfloatの左右の指定を解除する時に使用します。フッターは一つなのでbothとすることで左右の指定を解除します。

急に設定するものが増えましたがサイトを作る上で必要な部分なので覚えてしまうと良いです。ホームページは大体このような領域に設定しているので、サイトの内容を各領域に書き込んでいくことで制作していきます。

プログラミング言語

こちらのサイトで扱うプログラミング言語一覧です。

ページのトップへ戻る