Blog

※ブログ移転しました。 → hamashun.me

2008年05月Archives

2008年05月14日

浅漬けCSS

最初に結論

ブラウザの差異を最小限だけリセットするCSSって浅漬けCSSって感じじゃない?

きっかけはTwitter

昨日、@reaさんがTwitterにポストした一言がきっかけです。

最近、ぬか味噌 CSS を使わなくなった。デメリットの方が多い気がする。

それに対する@hamashun(僕)の反応がこんな感じです。

@rea 実はぬかみそ的な CSS は使った事がなかったりします。 必要な要素への margin と padding のリセットと、あとは border 消したり、とかは大抵毎回使いますけどもー。 浅漬け CSS 。

ちなみにここでのborderを消す、というのはimg要素にリンクをした時に表示されるborderについてです。 フォームのborderとかは消していないです。
Twitterのログだけだと説明不足だったのでここで追記。

@reaさんから頂いた更なる反応。

@hamashun 自分も最近はそんな感じです。浅漬け CSS いいですね!

そもそもぬか味噌CSSとは

@reaさんのポストが解りやすいです。

@hamashun ぬか味噌はデフォルトスタイルをできる限り統一しよう、っていう考えですよね。

「ぬか味噌」というネーミングは、上ノ郷谷さんのエントリ、スタイルシートを分けて管理する方法をまとめるが恐らく初出です。
上ノ郷谷さんのサイト、2xup.orgぬか味噌CSSを見てみると、実際にどのような指定をしているのかが分かります。

言うなれば「オレオレデフォルトスタイル」って感じですね。
(もし誤解されると困るので念の為に書いておくと、この「オレオレ」にネガティブな意図はありません)

浅漬けCSSについて色々

浅漬けCSSの定義

必要な要素へのmarginとpaddingのリセット程度を記述した、シンプルなCSSファイルやソースコードを浅漬けCSSと呼びます。
サイトによって記述する内容が変わる事もあります。

ぬか味噌CSSと浅漬けCSSは、どっちが優れているの?

優劣はありません。 慣れやサイトの種類によって使い分けるといいと思います。

サンプルコード
div,span,h1 ...(必要な要素が並ぶ)... p {
 margin: 0;
 padding: 0;
}

a img {
 border: none;
}

謝辞的な

Twitterで言及くださった皆様(非公開にしている人は表示されません)


Blog Search
Search
Recent Entry
Category
Monthly Archive