ホームページの作成例

001	/*************/
002	/* BODY 要素 */
003	/*************/
004	BODY.div {
005		margin: 0;
006		padding: 0;
007		font-size: 100%;   /* 文字のサイズ */
008		text-align: center;   /* 文字の配置（中央）*/
009		background-image: url(ajisai.gif);   /* 背景画像 */
010	}
011	
012	/***********/
013	/* wrapper */
014	/***********/
015	#wrapper {
016		width: 600px;   /* 表示領域の幅 */
017		overflow: hidden;   /* 表示できなかった場合の処理 */
018		margin-right: auto;
019		margin-left: auto;
020		margin-top: 0px;
021		margin-bottom: 0px;
022		padding: 0px;
023		background-color: white;   /* 背景色 */
024		border-style: solid;   /* 境界線の形状 */
025		border-width: 2px;   /* 境界線の幅 */
026		border-color: red;   /* 境界線の色 */
027	}
028	
029	/**********/
030	/* header */
031	/**********/
032	#header {
033		width: 500px;   /* 表示領域の幅 */
034		margin-right: auto;
035		margin-left: auto;
036		margin-top: 20px;
037		border-style: solid;   /* 境界線の形状 */
038		border-width: 2px;   /* 境界線の幅 */
039		border-color: blue;   /* 境界線の色 */
040	}
041	
042	/********/
043	/* left */
044	/********/
045	#left {
046		width: 150px;   /* 表示領域の幅 */
047		margin-right: 0px;
048		margin-left: 20px;
049		margin-top: 20px;
050		margin-bottom: 20px;
051		padding: 10px;
052		background-color: #eeffee;   /* 背景色 */
053		border-style: solid;   /* 境界線の形状 */
054		border-width: 2px;   /* 境界線の幅 */
055		border-color: green;   /* 境界線の色 */
056		float: left;   /* 右側に他の画面 */
057	}
058	
059	/*********/
060	/* right */
061	/*********/
062	#right {
063		width: 370px;   /* 表示領域の幅 */
064		margin-right: 0px;
065		margin-left: 0px;
066		margin-top: 20px;
067		margin-bottom: 20px;
068		padding: 0px;
069		background-color: pink;   /* 背景色 */
070		border-style: solid;   /* 境界線の形状 */
071		border-width: 2px;   /* 境界線の幅 */
072		border-color: orange;   /* 境界線の色 */
073		float: right;   /* 左側に他の画面 */
074	}
075	
076	/*************/
077	/* right_top */
078	/*************/
079	#right_top {
080		width: 280px;   /* 表示領域の幅 */
081		height: 100px;   /* 表示領域の高さ */
082		overflow: hidden;   /* 表示できなかった場合の処理 */
083		margin-right: 20px;
084		margin-left: 20px;
085		margin-top: 20px;
086		margin-bottom: 0px;
087		padding: 10px;
088		background-color: white;   /* 背景色 */
089		border-style: solid;   /* 境界線の形状 */
090		border-width: 2px;   /* 境界線の幅 */
091	}
092	
093	/****************/
094	/* right_center */
095	/****************/
096	#right_center {
097		width: 280px;   /* 表示領域の幅 */
098		height: 100px;   /* 表示領域の高さ */
099		overflow: auto;   /* 表示できなかった場合の処理 */
100		margin-right: 20px;
101		margin-left: 20px;
102		margin-top: 0px;
103		margin-bottom: 0px;
104		padding: 10px;
105		background-color: white;   /* 背景色 */
106		border-style: solid;   /* 境界線の形状 */
107		border-width: 2px;   /* 境界線の幅 */
108	}
109	
110	/****************/
111	/* right_bottom */
112	/****************/
113	#right_bottom {
114		width: 280px;   /* 表示領域の幅 */
115		margin-right: 20px;
116		margin-left: 20px;
117		margin-top: 0px;
118		margin-bottom: 20px;
119		padding: 10px;
120		background-color: white;   /* 背景色 */
121		border-style: solid;   /* 境界線の形状 */
122		border-width: 2px;   /* 境界線の幅 */
123	}
124	
125	/**********/
126	/* footer */
127	/**********/
128	#footer {
129		width: 500px;   /* 表示領域の幅 */
130		margin-right: auto;
131		margin-left: auto;
132		margin-bottom: 20px;
133		border-style: solid;   /* 境界線の形状 */
134		border-width: 2px;   /* 境界線の幅 */
135		border-color: blue;   /* 境界線の色 */
136		clear: both;
137	}