以前から、ちょこちょこと、存在だけをにおわせていた、CSSのリセットについて、今回は、書きます。分からないことがほとんどの項目なので、さっくりと読んで、未消化な部分は、ぐーぐる先生にお尋ねください。スタイルブラウザごとに、各タグに対しての独自のスタイルが設定されています。(⇒デフォルトスタイルなどといいます。)これによって、CSSで装飾をしなくても、HTMLタグだけで、読みやすいページが出来るようになっているわけです。↑↑↑は、<h1>、<h2>、<p>タグだけで書いた文章です。→サンプルページへ味気ないないっていう、さっぱりしているっていうか......それにこれって、改行されてない文は、ブラウザいっぱいに広がっちゃうんだよね。読みやすくはないよね。^^;でも、例えば、画面左上の文字の始まる所を見てください。画面の端から、上、左と余白が設けられています。タグ間(上下)も、なにも設定せずとも、適度に間隔が開いています。これが、デフォルトのスタイルです。CSSでページを装飾してくと、どうしても、このデフォルトの設定が邪魔になってきます。その都度、スタイルを書き変えてもいいのですが、正直超面倒ですし、書くCSSも長くなってしまいます。各ブラウザによって、デフォルトの設定は違いがあり、なかなか思ったようなページの仕上がりにはなりません。※ブラウザのバージョンによっても違いがあるそうです。そこで、登場するのが、CSSのリセットです。CSSのリセットをやってみよう!全称セレクタでリセットする【*】(アスタリスク)ユニバーサルセレクタを使った、一番簡単な方法です。以前、1カラム・2カラムのページを作った時にも使用したリセットです。0px;}↑↑↑先ほどの「枕草子」を全称セレクタでリセットしてみました。→サンプルページ隙間(余白)が消えていますね。これは、一昔前のリセットの方法らしいです^^;。理由としては、表示が遅くなる、リセットする必要のないものまで、リセットされてしまうといったことのようです。(私は、どちらも全く実感がないです......^^;)また、マージンとパッディングの値のみのリセットなので、サンプルのように、フォントは、デフォルト値のままです。このリセットを使用する場合は、フォント(サイズや太さ)。リストタグ)(リストマークの表示)等のリセット設定を加えた方が便利だと思います。タグごとにリセットする方法これは、リセットした方が、のちのち楽なタグだけ、リセットする方法です。思うのですが、初心者の私達には、なにをどうすれば、いいのかさっぱり分かりません(>_<)よね。世の中には、親切な方がたくさんいらっしゃって、いろいろなリセット方法が、Web上で公開されています。「モンキーレンチ」さんというサイトの「ブラウザごとの差異をなくす!人気のリセットCSSまとめ」です。分かりやすいので、ぜひ参考になさってください。CSSを使っています。border:0;}上記の現物は、こちらのページの下の方に(画面をスクロールしてね)書かれています。CSSを使っています。フォントサイズや行間の指定も記載されているので、なかなか使いやすそうです。リセットすると、どうなるのでしょうか?ビフォー・アフターのページを作りましたので、比べて見てください。サンプルは、私達初心者が普段使いそうなものだけです。私は、これを外部CSSとして使っています。(→メモ帳等に、書いて、拡張子を【.css】で保存します)ホームページビルダーでの外部スタイルシートの作り方&設定の仕方は、こちらのページで説明しています。CSSには優先順位があるスタイルシートには、優先順位があります。タグ近くに書かれたスタイルから、優先されます。優先順位は下記の通りです。→BODYタグに近いほど、優先される(詳細は下記参照)たとえていうなら、CSSは、油絵のようなもの。上書きが可能で、常に今書いたものが、表示されるのです。油絵を描く白紙のキャンバスを手に入れる→CSSのリセットデッサンして色塗り→HTMLを書いて、それに合わせてページデザインのCSSを書くうーん、と、唸り、気に入らない所に手を加える→ページ毎に書くCSSやタグにつけるCSS優先順位に注意してCSSを配置2つ以上の、外部スタイルシートを設定する場合は、必ず一番はじめに、リセットしたCSSを置くこと。外部スタイルシートは、<head>~</head>内に置かれる。type="text/css">←次に他のCSSこの順番で並べること!上書きの法則なので、リセットCSSが、来た時点で、その前の設定は、白紙になることを覚えておきましょう。自分のリセットCSSをつくるなんて、言うと、大袈裟。初心者が、なに、言ってるのよ!って感じですね。リセットCSSに、常に使う設定を入れていくと便利です。none;}フォントサイズ・字体・行間などを設定しています。ブラウザの初期設定は、良かれと思って設定されたもの。それを活かさないなんで、もったいない!的な流れがあり、「normalize.css」なるものが台頭しつつあるようです。HTML5やCSS3にも対応しているそうです。HTML5やCSS3もまだ理解してないのに、対応って言われても、なに言っちゃってんのよ!って感じです。聞いても・・・はぁ、そう、でっかとしか言えないし。それに、なにはともあれ、ホームページは、まずは、中身だと思います。私が大好きなホームページは、ものすごーく読みにくいんです。豆字で、拡大するとまったく読めなくなっちゃうし。ソース見ると、何をどうしたらこんなHTMLになるんじゃ!って感じ。そこにのページにしかない内容は、私にとっては、魅力的で、楽しみ。HTMLを書き換えて読んでいます。ページの内容にあったデザインというのもあるので、一概に新しいものや正しいものがいいとは、言えないんじゃないかなぁと、思う管理人です。said:私のブログで当記事をリンク紹介させて頂きました。分かりやすい記事助かります。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。29当Blogへようこそ管理人のルビと、申します。~~う、分からない事だらけ!!と頭をかかえ、ホームページビルダーと日々格闘中(?)です。初心者の方、一緒に覚えていきませんか?宜しくお願いします。