CSSのリセット

2013年4月13日 13:30 ⋅ 1 Comment ⋅


 
以前から、ちょこちょこと、存在だけをにおわせていた、CSSのリセットについて、今回は、書きます。

まだまだ、分からないことがほとんどの項目なので、さっくりと読んで、未消化な部分は、ぐーぐる先生にお尋ねください。

この、役立たずめ！！



CSSのリセットとは

デフォルト　スタイル

ブラウザごとに、各タグに対しての独自のスタイルが設定されています。
（⇒デフォルトスタイルなどといいます。）
これによって、CSSで装飾をしなくても、HTMLタグだけで、読みやすいページが出来るようになっているわけです。

ブラウザデフォルト表示
↑↑↑は、<h1>、<h2>、<p>タグだけで書いた文章です。→サンプルページへ

味気ないないっていう、さっぱりしているっていうか……
それにこれって、改行されてない文は、ブラウザいっぱいに広がっちゃうんだよね。
けっして、読みやすくはないよね。

そ、そ、そうですね^^;
でも、例えば、画面左上の文字の始まる所を見てください。
画面の端から、上、左と余白が設けられています。また、タグ間（上下）も、なにも設定せずとも、適度に間隔が開いています。
これが、デフォルトのスタイルです。

ただ、CSSでページを装飾してくと、どうしても、このデフォルトの設定が邪魔になってきます。
その都度、スタイルを書き変えてもいいのですが、正直超面倒ですし、書くCSSも長くなってしまいます。
また、各ブラウザによって、デフォルトの設定は違いがあり、なかなか思ったようなページの仕上がりにはなりません。
※ブラウザのバージョンによっても違いがあるそうです。
そこで、登場するのが、CSSのリセットです。

CSSのリセットをやってみよう！

全称セレクタでリセットする

【*】（アスタリスク）ユニバーサルセレクタを使った、一番簡単な方法です。以前、１カラム・２カラムのページを作った時にも使用したリセットです。

*{  
  margin-top : 0px;
  margin-left : 0px;
  margin-right : 0px;
  margin-bottom : 0px;

  padding-top : 0px;
  padding-left : 0px;
  padding-right : 0px;
  padding-bottom : 0px;

}

全称セレクタでリセットした画面画像
↑↑↑先ほどの「枕草子」を全称セレクタでリセットしてみました。→サンプルページ
隙間（余白）が消えていますね。

ただ、これは、一昔前のリセットの方法らしいです^^;。
理由としては、表示が遅くなる、リセットする必要のないものまで、リセットされてしまうといったことのようです。
（私は、どちらも全く実感がないです……^^;）

また、マージンとパッディングの値のみのリセットなので、サンプルのように、フォントは、デフォルト値のままです。なので、このリセットを使用する場合は、フォント（サイズや太さ）。リストタグ）（リストマークの表示）等のリセット設定を加えた方が便利だと思います。

タグごとにリセットする方法

これは、リセットした方が、のちのち楽なタグだけ、リセットする方法です。

なるほど！　と思うのですが、初心者の私達には、なにをどうすれば、いいのかさっぱり分かりません(>_<)よね。
ご安心ください。
世の中には、親切な方がたくさんいらっしゃって、いろいろなリセット方法が、Web上で公開されています。

今回、参考にさせて頂きましたのは、
「モンキーレンチ」さんというサイトの
「ブラウザごとの差異をなくす！人気のリセットCSSまとめ」です。
とっても、分かりやすいので、ぜひ参考になさってください。

私は、ここで紹介されているものではありませんが、同じYUIのYUI 2: Reset CSSを使っています。
↓↓↓これです。

/* -----------------------------------------
YUI 2: Reset CSS
http://developer.yahoo.com/yui/reset/
-------------------------------------------- */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}

上記の現物は、
こちらのページの下の方に（画面をスクロールしてね）書かれています。→YUI 2: Reset CSS

Yahoo! (YUI 3) Reset CSSのバージョンもありますが、私は、YUI2でもお腹いっぱいなので、宝の持ち腐れになりそうで(>_<)YUI 2: Reset CSSを使っています。

因みに、当ブログがお借りしているテンプレートで使われているCSSリセットは、
『Eric Meyer’s “Reset CSS” 2.0』です。
フォントサイズや行間の指定も記載されているので、なかなか使いやすそうです。

では、リセットすると、どうなるのでしょうか？

ビフォー・アフターのページを作りましたので、比べて見てください。
なお、サンプルは、私達初心者が普段使いそうなものだけです。

リセット前　→サンプルページへ

CSSリセット前

リセット後　→サンプルページへ

CSSリセット後

フラットだな～～～

CSSリセットの使い方・注意点

私は、これを外部CSSとして使っています。（→メモ帳等に、書いて、拡張子を【.css】で保存します）
ホームページビルダーでの外部スタイルシートの作り方＆設定の仕方は、こちらのページで説明しています。

CSSには優先順位がある

スタイルシートには、優先順位があります。
タグ近くに書かれたスタイルから、優先されます。優先順位は下記の通りです。

  1. タグに直接書かれたCSS
  2. ページに書かれたCSS　→BODYタグに近いほど、優先される
  3. 外部CSS　→BODYタグに近いほど、優先される（詳細は下記参照）

たとえていうなら、CSSは、油絵のようなもの。
どんどん上書きが可能で、常に今書いたものが、表示されるのです。

  1. 油絵を描く白紙のキャンバスを手に入れる
    • →CSSのリセット
  2. デッサンして色塗り
    • →HTMLを書いて、それに合わせてページデザインのCSSを書く
  3. うーん、と、唸り、気に入らない所に手を加える
    • →ページ毎に書くCSSやタグにつけるCSS

優先順位に注意してCSSを配置

２つ以上の、外部スタイルシートを設定する場合は、必ず一番はじめに、リセットしたCSSを置くこと。

外部スタイルシートは、<head>～</head>内に置かれる。
<link rel="stylesheet" href="ファイル名.css" type="text/css">←まずリセットCSS
<link rel="stylesheet" href="ファイル名.css" type="text/css">←次に他のCSS
この順番で並べること！

上書きの法則なので、リセットCSSが、来た時点で、その前の設定は、白紙になることを覚えておきましょう。

自分のリセットCSSをつくる

なんて、言うと、大袈裟。初心者が、なに、言ってるのよ！って感じですね。
リセットCSSに、常に使う設定を入れていくと便利です。

私は、リンクの設定のとき、下線が邪魔なので、下記の設定や、

a{  
  text-decoration : none;
}

フォントサイズ・字体・行間などを設定しています。

body{ 
  font-family : メイリオ; 
  font-size : 100%;
  line-height : 1;
}

このブログでは、font-familyは、
Verdana,’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,’メイリオ’,Meiryo,’ＭＳ Ｐゴシック’,’MS PGothic’,sans-serif と指定しています。

是非、ご自分の設定を入れてみてくださいね！

CSSのリセットからnormalize.cssへ

ブラウザごとの差異があってもいいじゃないか！　ブラウザの初期設定は、良かれと思って設定されたもの。それを活かさないなんで、もったいない！
的な流れがあり、「normalize.css」なるものが台頭しつつあるようです。HTML5やCSS3にも対応しているそうです。
いやはや、まったくついていけません(>_<) HTML5やCSS3もまだ理解してないのに、対応って言われても、なに言っちゃってんのよ！って感じです。 それに元がわかってないんじゃ、HTML5はここが変わった！　って聞いても・・・はぁ、そう、でっかとしか言えないし。 それに、なにはともあれ、ホームページは、まずは、中身だと思います。 私が大好きなホームページは、ものすごーく読みにくいんです。豆字で、拡大するとまったく読めなくなっちゃうし。ソース見ると、何をどうしたらこんなHTMLになるんじゃ！って感じ。でも、そこにのページにしかない内容は、私にとっては、魅力的で、楽しみ。HTMLを書き換えて読んでいます。 これは、極端な例ですけどね！ ページの内容にあったデザインというのもあるので、一概に新しいものや正しいものがいいとは、言えないんじゃないかなぁと、思う管理人です。


次回は、未定は予定ではありませんよ～～～
HTMLタグについて、書きます！

Posted in: HTMLタグやCSS設定　ミニ知識 ⋅ Tagged: ,

One Thought on “CSSのリセット”

  1. Sin Kamisiro on 2015年1月17日 at 01:43 said:

    私のブログで当記事をリンク紹介させて頂きました。
    大変分かりやすい記事助かります。
    ありがとうございます(^_^)

    Reply↓

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

Post Navigation