鈴木智子のホームページのアクセスアップコーディング講座リセットCSS

リセットCSSについて

リセットCSSは、ブラウザごとに初期設定されているスタイルを一旦「リセット」するためのスタイルシートです。

Internet ExplorerやFirefoxなどのウェブブラウザは、それぞれが見た目を制御する「スタイルシート」をデフォルトで持っています。
このデフォルトスタイルシートには微妙な違いがあるため、ホームページを異なるブラウザで同じように表示させるためには、デフォルトスタイルシートを初期化、つまり、リセットする必要があるわけです。

以前は、*（アスタリスク、ユニバーサルセレクタ）によるcssのリセットが主流でした。
しかし、現在では、レンダリングが遅くなる点と、サブミットボタンなどフォーム関連の好ましい表示までリセットされてしまう点にデメリットがあり、使用されていません。

例）　現在では、殆ど使われていません。

* {
	margin: 0;
	padding: 0;
}

現在は、YUI Library（YUI＝Yahoo! User Interface Library）の手法が主流となっています。
*（アスタリスク、ユニバーサルセレクタ）のように全てをリセットしてしまうのではなく、必要な物だけリセットするという手法です。
ここでは、YUI Library: Reset CSSを参考に以下のようなリセットCSSを用意しました。

@charset "utf-8";

/*
===========================================================
	reset.css
	Copyright (c) 2009, nishi-shinjuku.net All rights reserved.
	version: 2.2.7 [2010/01/13]
===========================================================
*/

html {
	color:#000000;
	overflow-y:scroll;
}

body {
	margin:0;
	padding:0;
}

a {
	overflow:hidden;
}

a img, img {
	border:0;
}

abbr, acronym {
	border:0;
}

address, caption, cite, code, dfn, em, th, strong, var {
	font-style:normal;
	font-weight:normal;
}

blockquote, dd, div, dl, dt,
h1, h2, h3, h4, h5, h6,
li, ol, p, pre, span, td, th, ul {
	margin:0;
	padding:0;
}

caption, th {
	text-align:left;
}

code, kbd, pre, samp, tt {
	font-family:monospace;
	line-height:100%;
}

h1, h2, h3, h4, h5, h6 {
	font-size:100%;
	font-weight:normal;
}

ol, ul {
	list-style-type:none;
}

q:before, q:after {
	content:'';
}

button, fieldset, form, input, label, legend, select, textarea {
	margin:0;
	padding:0;
	font-family:inherit;
	font-size:100%;
	font-style:inherit;
	font-weight:inherit;
	vertical-align:baseline;
}

table {
	border-collapse:collapse;
	border-spacing:0;
	font-size:100%;
}

次に、cssをhtmlにリンクさせる方法を説明します。

「サイトドラフトを制作する」のページで作成した「homepage」というフォルダを開いてください。

「homepage」フォルダ内に、新しいフォルダを作成します。
右クリック→[新規作成]→[フォルダ]をクリックしてください。

新しいフォルダができましたね？

新しく作成したフォルダの名前を「css」にします。

フォルダの名前には、必ず半角英数字を使用してください。

2バイト文字（日本語の漢字、ひらがな、カタカナなど）は使用できません。

cssフォルダができたら、今度は秀丸での作業に入ります。

[新規]をクリックしたら、このページの上にあるリセットCSSのソースをすべてコピーしてペーストしましょう。

ペーストできたら、[ファイル]メニューから[上書き保存]を選択してください。

先ほど作成した「homepage」フォルダの中の「css」フォルダをダブルクリックして、選択します。

ファイルの名前を「reset.css」にして保存します。

これで、「reset.css」が作成されました。

でもこれでは、htmlには何の変化もありません。htmlに「reset.css」へのリンクを付け加えます。

index.htmlを秀丸で開いてください。

ソースの上部、

<title>実践　鈴木智子のホームページのアクセスアップ講座</title>
</head>
<body>

ここの</title>の後に次の一文を入力してください。

<link href="css/reset.css" rel="stylesheet" type="text/css" />

入力できたら、[上書き保存]をクリックしてください。

再度、index.htmlをブラウザで見てみましょう。

<h1>のテキストが大きくなったりといった、ブラウザ独自の見た目をリセットしました。

cssをhtmlにリンクした一文の説明をします。

「/」というのは、下位のフォルダという意味を持っていて、この場合、index.htmlが居るhomepageフォルダの下のcssフォルダのreset.cssを参照せよ！という意味になります。

ファイルとフォルダ

ファイルとは、ハードディスクやUSB、CD-ROMなどの記憶装置に記録されたデータのまとまりです。
ここでは、index.htmlやreset.cssの事を指します。

フォルダとは、これらのファイルを分類・整理するための単位です。
フォルダには識別のために固有の名称(フォルダ名)をつけることができます。関連する複数のファイルをまとめて管理し、効率化を図りましょう。フォルダの中にさらにフォルダを作成することもできるので、階層構造による細かい分類の表現も可能です。
ここでは、homepageやcssの事を指します。

WindowsやMac OSではフォルダと呼びますが、UNIXやMS-DOSでは同様の概念を「ディレクトリ」と呼びます。

例えば、以下のような構成のファイルがあるとします。

/homepage			ホームページ格納用フォルダ
	/css		CSS格納用フォルダ
		reset.css	リセットCSS
		toppage.css	index.html専用CSS
	/img		画像格納用フォルダ
		bg_top_header.jpg	index.htmlで使用する画像
	index.html		トップページ用ファイル

この時、toppage.cssからbg_top_header.jpgを指したいときは、どのようになるでしょうか？
答えは、「../img/bg_top_header.jpg」となります。

では、index.htmlから自分自身が居るフォルダを指したいときは、どのようになるでしょうか？
答えは、「./」となります。

「.」　起点となるフォルダを指します。
「..」　上位フォルダを指します。
「/」　下位フォルダを指します。

「reset.css」はこのサイトだけでなく、他のサイトを作成する場合にも使い回しが効きます。
なので、このサイト独自に設定するcssに関しては「reset.css」には記述しないようにしましょう。

さて、次は「ベースフォントCSSについて」です。

リセットCSSでブラウザ初期設定を初期化 鈴木智子のホームページのアクセスアップコーディング講座

リセットCSSについて

ファイルとフォルダ

リセットCSSでブラウザ初期設定を初期化鈴木智子のホームページのアクセスアップコーディング講座