新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

最もシンプルなオリジナルのリセットCSSを考えてみた【Webデザイン】

   

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

そろそろHTML5が正式に勧告される昨今に今更感漂いますが、個人的にそろそろ積み重ねをかたちにしてやる頃だなぁというのもあって、オリジナルのリセットCSSを考えてみました。
考えるにあたり、とにかくシンプルに最低限のところのみ記述することを心がけました。
結果として非常に短いCSSになってしまいましたが、そのあたりはご了承下さい。

WEB

スポンサーリンク
 

まずはソースをお見せしてから解説していこうと思います。

@charset “utf-8”;   
*{
margin:0;
padding:0;
}
body {
font:14px/1.5 Osaka,”MS Pゴシック”,sans-serif;
}
li,dd{
margin-left:1em;
}
table{
border-collapse:collapse;
border-style:solid;
}
/*
h1,h2,h3,h4,h5,h6,p,table,ul,ol,dl{
margin-bottom:1.5em;
}
*/
img{
border:none;
vertical-align:bottom;
}

もうね。ぶっちゃけると「*」のところだけでもいいんじゃないかと考えていたのですがさすがにそれだとちょっとというのもあってちょこちょこ書き加えています。

といったところで解説したいと思います。

まず、「*」に対してマージン(外マージン)、パディング(内マージン)を0にしています。
「*(アスタリスク)」は全てのタグが対象になるという意味です。
これは、下記の状況に対する対策というのが一つ。
□ 内包されたDIVにmarginを設定すると親要素にも同じマージンが設定されることがある
つまり、<div>のマージンを0にしていても、内包されている<h1>や<p>等のマージンの影響で<div>にマージンが設定されてしまうことがあってそれを回避するため。
それと、単純にレイアウトしやすいようにブロックレベル要素のマージン、パディングを全て0に統一してしまっているというのもあります。

次に「body」に対してフォントの指定や行送りの指定、フォントサイズの指定をしている部分。
ここは特に<p>や<div>で囲まれている一般的な文章の部分の可読性を、フォントや行送りを統一することで上げるという意味が大きいです。
だったら<*>にフォントの指定も書いちゃえばいいのにと思うかもしれませんが、そうすると<h1>等、見出しのフォントサイズも<p>等と同じサイズに統一されてしまうのでダメです。
ちなみに、fontプロパティを使ったまとめ書きを使っています。
□ CSS2.1まとめ書き-font編(HTML・CSSリファレンス) – ちほちゅう

次の「li,dd」の部分はリストタグに対するフォローです。
「*」でマージン、パディングを全て0にしてしまうとリストの表記がちょっとおかしくなってしまいます。
そこで、 <li>、<dd>の時だけ左マージンを設定しています。
なお、単位は1文字分の長さの「em(エム)」を使用しています。

次の「table」は表組の罫線がディフォルトのままではカッコ悪いので設定しています。
つまり、表組罫線を1pxの一本線に設定しているわけです。 

で、最後コメントアウトしている部分は一応書いたものの、実際は使わない部分。
つまり、<p>や<h1>、<ul>等の下の部分にマージンを設けて、ディフォルトの状態に近づけています。
ただ、それが嫌で最初の「*」の設定をしているわけなのでここはコメントアウトしておきました。

※ IE対策でimgタグにboader:noneを、imgタグの下の隙間対策でvertical-align:bottomを追記しました。(2014/6/30)

といったところ。

本来はここにclearfix等も書いてあげたほうがいいのかもしれませんが、わかりにくいので排除です。
ちなみに、clearfixに変わる対策としては以下の記事を参考にして下さい。
□ 「float」で親要素の高さがなくなってしまったときは親要素に「float」

また、フォームに関しては今回は一切無視してます。
そもそも、フォームを使うページって限定されるので全てのページに使われることを前提にしたリセットCSSに記述する必要あるのかなぁとも思っていますし。。

「こんな簡単なリセットCSSだったら紹介しなくてもいいじゃん。」とお思いの方もいるかもしれません。
そういった方には逆に、「そんなに難しく考えなくていいじゃん。 」と返しておきます。
CSSなんてシンプルに考えればホント、そんなに難しいもんじゃないはず。
なんか、難しく考えて複雑に複雑にしちゃう人いますが、そういうときは思い切ってリセットしちゃったらどうでしょう。
意外と簡単に問題が解決してしまうかもしれませんよ。 

 - Webデザイン, デザイン

アドセンス広告メイン

Message

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

  関連記事

WordPress(ワードプレス)のURL表記をHTML表記にする方法 #wp

1年以上前の記事です。内容が古い可能性があります。牛歩戦術でゆっくりと進んでいる …

no image
僕がデザイナーを辞めた理由

1年以上前の記事です。内容が古い可能性があります。休みに入ったけど、カレンダーが …

国立西洋美術館で「考える人」を見た【古希のお祝い #2】

1年以上前の記事です。内容が古い可能性があります。今までの流れはこちら&rarr …

no image
CSS3でプルダウンメニューと可変角丸囲み

1年以上前の記事です。内容が古い可能性があります。今度のCSSはとってもすごいら …

no image
HTMLを学校で習う日がくる?

1年以上前の記事です。内容が古い可能性があります。ひょっとしたらもうやっているの …

no image
続きはWebで。

1年以上前の記事です。内容が古い可能性があります。そろそろ「続きはWebで」につ …

「Internet Explorer 6」対策をしてみた

1年以上前の記事です。内容が古い可能性があります。ブログデザインリニューアルに伴 …

縦長すぎる東京スカイツリーのサイトが面白い

1年以上前の記事です。内容が古い可能性があります。5月22日オープン予定の東京ス …

佐野研二郎氏デザインの五輪ロゴ、盗作疑惑で撤回。大手広告代理店の専属デザイナーだからこそ必然

1年以上前の記事です。内容が古い可能性があります。五輪のロゴがパクリだとネットで …

WordPress(ワードプレス)で楽に表組み(テーブル)を書くためのプラグイン「Editor Extender」 #wp

1年以上前の記事です。内容が古い可能性があります。WordPressで記事を書く …

血液型オヤジ