CSSレイアウト 実践講座2 デフォルト、ベースの設定

CL company

前回のエントリーに引き続いて今回から具体的に実践に入っていきたいと思います。

…ここからが続き

default.css

ここでデフォルトの設定をしています。

/* ----------------------- Browser Default Initialization */
html {
	overflow-y: scroll;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h2, h3, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td	{
	margin: 0;	padding: 0;
}
address, caption, cite, code, dfn, em, strong, th, var	{
	font-style: normal;
}
table	{
	border-collapse: collapse;	border-spacing: 0;
}
caption, th	{
	text-align: left;
}
q:before ,q:after	{
	content: '';
}
object, embed	{
	vertical-align: top;
}
hr, legend	{
	display: none;
}
h1, h2, h2, h3, h5, h6	{
	font-size: 100%;
}
img, abbr, acronym, fieldset	{
	border: 0;
}
li	{
	list-style-type: none;
}

解凍したままの状態だと下記の状態になっていると思います。

/* ----------------------- Basic Style */
/* ------------ Font Style */
body {
	font-family: verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"MS Pゴシック","MS PGothic",Sans-Serif;
	color: #666;
	font-size: 75%;
	line-height: 150%;
}
html>/**/body {
	font-size: 12px;
}

* + html body {
	font-family: "メイリオ","Meiryo";
}

/* ------------ A Style */
a, a:link, a:visited	{
	text-decoration: none;
	color: #333;
}
a:hover	{
	text-decoration: underline;
	color: #333;
}
a:active	{
	text-decoration: underline;
	color: #333;
}

ここでbodyのに画像を読み込んだり、フォントサイズや色を決めたりしましょう
そうするとこうなります。

/* ----------------------- Basic Style */
/* ------------ Font Style */
body {
	font-family: verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"MS Pゴシック","MS PGothic",Sans-Serif;
	background: url(../images/bg_body.gif) repeat;
	color: #666;
	font-size: 75%;
	line-height: 150%;
	text-align: center;
}
html>/**/body {
	font-size: 12px;
}

* + html body {
	font-family: "メイリオ","Meiryo";
}

/* ------------ A Style */
a, a:link, a:visited	{
	text-decoration: none;
	color: #333;
}
a:hover	{
	text-decoration: underline;
	color: #333;
}
a:active	{
	text-decoration: underline;
	color: #333;
}

これでベースの設定は終わりです。
次のエントリーで本格的なレイアウトに入っていきます。

まだダウンロードしていない方は下記からダウンロードをお願い致します。

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article