kscc

スポンサーサイト

一定期間更新がないため広告を表示しています

CSSで組む簡単ウェブレイアウト


今はデフォルトと言っても過言では無いほどになっている基本のレイアウトの組み方です。

基礎が無いと家が建たないのと同じ。
“家”の基礎となるウェブサイトのレイアウトを組んでみましょう。
ちなみにXHTML1.0がベースとなっています。

何はともあれファイルを作る

メモ帳を開き何も書かずに[ファイル]→[名前を付けて保存]を押します。
保存する名前は“index.html”にしてデスクトップに保存下さい。



次に新たにメモ帳を開きます。
このメモ帳にも何も書かずに[ファイル]→[名前を付けて保存]を押します。
保存する名前は“common.css”でデスクトップに保存して下さい。



これでHTMLのファイルとCSSのファイルができました。

次にデスクトップの何も無い場所で右クリックして[新規作成]→[フォルダ]を選択します。
このフォルダの名前は“WEB”にして下さい。



次にそのWEBフォルダに“index.html”と“common.css”の2つのファイルを入れれば準備は完了です。


div#containerでベースを作る

common.cssファイルを作成します。

containerは閲覧者のディスプレイの大きさに左右されないために設置するものです。



div#container {
	width:100%;
}


div#wrapperでセンタリングする

入れ子になったdiv要素をmarginでセンタリングにします。

またこのwrapperの横幅は実際にコンテンツが収まるサイズにします。



div#wrapper {
	width:1000px;
	margin:0 auto;
}


div#headerでヘッダー部分を作る

ヘッダー部分にはウェブサイトの名前や説明なんかを入れます。



div#contentでメインコンテンツ部分を作る

メインコンテンツとなる部分です。





div#footerでフッター部分を作る

フッターには著作権表示やサブコンテンツを置きます。





ここまでで基礎となるレイアウトが組めます。

HTMLまとめ

index.htmlの基本的な中身はこんな感じになります。

<?xml version="1.0" encoding="Shift_JIS"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head><link rel="stylesheet" href="common.css" type="text/css" />
<title>TITLE</title>
</head>
<body>
	<div id="container">
		<div id="wrapper">
			<div id="header">HEADER</div>
				<div id="content">CONTENTS</div>
			<div id="footer">FOOTER</div>
		</div>
	</div>
</body>
</html>


CSSまとめ

common.cssの中身はこんな感じになります。

コレがベースになるものですので
任意の要素を追加したり削除したりして下さい。

/*/////---------- Common CSS ----------/////*/

div#container {
	width:100%;
}

div#wrapper {
	width:1000px;
	margin:0 auto;
}

div#header {
	width:1000px;
}

div#content {
	width:1000px;
}
div#footer {
	width:1000px;
}

枠と背景色と高さを指定したバージョンです。
見比べて作ると分かりやすいです。

/*/////---------- Common CSS ----------/////*/

* { /* デフォルトのマージンとパディングを0pxの位置にしています */
	margin:0;
	padding:0;
}

div#container {
	width:100%;
	border:1px solid #0000bf;
	background-color:#eeeeff;
}

div#wrapper {
	width:1000px;
	margin:0 auto;
	border:1px solid #bf0000;
	background-color:#ffeeee;
}

div#header {
	width:1000px;
	border:1px solid #bfbf00;
	background-color:#ffffee;
	height:200px;
}

div#content {
	width:1000px;
	border:1px solid #00bf00;
	background-color:#eeffee;
	height:600px;
}

div#footer {
	width:1000px;
	border:1px solid #bfbf00;
	background-color:#ffffee;
	height:200px;
}


というワケで



こんな感じのレイアウトが組めるワケですね。

他のサイトを実際に照らし合わせてみます。


Yahoo! JAPAN


MSN Japan


foursquare


I'MIUSA


はじめてのモンハン日記。

という具合です。

CSSでのレイアウトの組み方がいまいち分からない方は
ご参考にどうぞ。
スポンサーサイト