ノーマライズCSSという名の、各要素のマージン・パディング・フォントサイズを復活させる指定

サイト構築の際、各要素のマージンやパディングを打ち消す、いわゆる『リセットCSS』を準備するケースが多いです。

しかしながら、ブラウザが本来持っている良いスタイルまで消すのはどうだろうか、と言うことで、近年『ノーマライズCSS』として本来のスタイルを保持する流れがあります。

当社で設定している逆リセットをご紹介。

ノーマライズCSS

言い方はなんでも良いんでしょうが、当社では『逆リセット』とか『リリセット(re-reset)』とか呼んでいます。

そもそもの問題

昔よくやられていたのが、

* {margin: 0; padding: 0; }

こんな指定です。全称セレクタは使われなくなっても、

h1,h2,h3,h4,h5,h6,p,ul,li {margin: 0; padding: 0; }

など、結局は余白を打ち消す指定が使われています。

この恩恵があるのは、ナビゲーションなどの固定部分

マージン、パディングなどが不要の場合は、あくまでデザイン的な都合でガッチリと固めたい場合。実際、本文で出てくる段落やリストなども一緒にリセットされるケースが多く、都度調整をしていたりします。

そもそものスタイルを適用しよう、コンテント部分に

ということで、当社では基本リセットはしつつ、コンテント部分だけブラウザが本来持っているスタイルに近い状態で逆リセットをかけています。

※あくまで近い状態であり、まったく同じというワケではありません。
 Firefoxの基準を採用しています。

コレを指定すると、全称セレクタなどで消されたマージン、パディングが復活します。

@charset "UTF-8";

body {padding: 0.5em; font-size: 16px;}

h1 { margin: 0.5em 0; font-size: xx-large; font-weight: bold;}
h2 { margin: 0.9em 0; font-size: x-large; font-weight: bold;}
h3 { margin: 0.9em 0; font-size: large; font-weight: bold;}
h4 { margin: 0.9em 0; font-size: medium; font-weight: bold;}
h5 { margin: 0.9em 0; font-size: small; font-weight: bold;}
h6 { margin: 0.9em 0; font-size: x-small; font-weight: bold;}
p { margin: 0.9em 0; line-height: 1.5;}

hr {
	border: solid 1px #999;
	margin: 1.2em 0;
}

table {
	margin-top: 0.5em;
	margin-bottom: 1.5em;
	border-collapse: separate;
}
table caption {
	margin-top: 1em;
	text-align: left;
}
table th,
table td {
	padding: 6px;
}
table th {
	font-weight: bold;
}
ol {
	padding-left: 2.5em;
	list-style-type: decimal;
	margin: 1em 0;
}
ul {
	padding-left: 2.5em;
	list-style-type: disc;
	margin: 1em 0;
}
dd { margin-left: 2.5em; }
blockquote { margin: 1em 2.5em; }
b { font-weight: bold;}
strong { font-weight: bold;}
th { font-weight: bold;}
i { font-style: italic;}
em { font-style: italic;}
address { font-style: italic;}
strike { text-decoration: line-through;}

必要に応じて、消したりして使うのが良いです。ちなみに当社では、各行に#content を付与して、コンテント部分のみに適用しています。

ファイルのダウンロード

ご参考までに、ファイルを掲載します。

逆リセットファイル一式(re-reset)

オススメ書籍

10日でSEO&アクセスアップ Jimdoデザインブック

かっこいいだけではなく、人が集まるホームページを作る!

「Jimdo」(ジンドゥー)でのホームページの作成方法と運用方法を解説した書籍。解説記事を順番に読み進めて行くことで、Jimdoを使ったホームページの作成・運用・宣伝・集客の基本を、10日間で習得するのが本書のコンセプトです。12章構成の解説の中で、Jimdoの基本操作とホームページの作成、デザインとコンテンツ(内容)のレベルアップ、そしてSEOやリスティング広告を含む宣伝・集客の基本を解説しています。

コメントを残す

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

CAPTCHA


ABOUTこの記事をかいた人

株式会社マジカルリミックス 代表取締役CEO/JimdoExpert 宮城県出身。コンピューター系の専門学校を卒業後、仙台のデザイン会社に入社。 Webサイトのデザイン・コーディングをはじめとし、各種デジタルメディアのデザインに従事。2002年退職後すぐにマジカルリミックスを創業。2007年に法人化で株式会社マジカルリミックスを設立。Webサイト運用に関するコンサルティング、社内向けITトレーニング、セミナー出演、執筆など。2005年から仙台の専門学校で、非常勤講師としてWeb制作講義を担当。 主な著書に『10日で作るかっこいいホームページ Jimdo(ジンドゥー)デザインブック』(エムディエヌコーポレーション)『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』(共著、同)『基礎から覚える、深く理解できる。Webデザインの新しい教科書』(同)。