新顔・浅漬け CSS

「浅漬け CSS」という、「通」な人がニヤリと笑う CSS が提案されています。

浅漬けCSS | Blog hamashun.com

「浅漬け CSS」って何?

浅漬けCSSの定義

必要な要素へのmarginとpaddingのリセット程度を記述した、シンプルなCSSファイルやソースコードを浅漬けCSSと呼びます。

サイトによって記述する内容が変わる事もあります。

浅漬けCSS | Blog hamashun.com

ということで、ブラウザによって表示が まちまちになる各要素を、あっさり目にスタイルをリセットする CSS ですね。

一昔前だと、こういったコードが多く見られました。

* {
  margin: 0;
  padding: 0;
}

というか、今も使われていますが、たしかデメリットが あったような──。フォームとかボタンに悪影響がある、だったかな? 情報ソースが見つからないので、みなさんへの宿題に しておきましょう(何様?)。

元祖・ぬかみそ CSS

上記の記事にもありますが、発想というか命名の元になったのは、「通称ぬかみそ」こと common.css です。自分も、かなり参考に しました。

スタイルシートを分けて管理する方法をまとめる

実際のソースコードは、こちらです。

common.css

見る人が見れば分かるように、これでもか! と ばかりに、各要素を徹底的に調教していますね。

:revision を見ると、つい最近も「ぬか床の手入れ」を おこなっているようで、これからも育っていきそうです。

ほんのり味付け・default.css

CSS のリセットと言えば、wu 教 vicuna 派に入信している自分(何?)としては、ぜひとも紹介したいのが この記事。

デフォルトスタイルの差異を無くすCSS

Yahoo! UI Library: Fonts CSS のアイデアを取り入れた、基本的にはスタイルのリセット用 CSS です。

default.css

勤務先で社内用の HTML をでっち上げるときに、この CSS が ものすごく便利!

「浅漬け」も「ぬかみそ」も、スタイルのリセットまでの提案で、そこからは ご自身でどうぞ、という CSS です。

それに対して default.css は、適用すると下記のようなスタイルになります。

CSS TEST

漬け物 CSS に対して、ノン・オイルのドレッシングくらいの味付けですね。

ここから出発して、自分なりの料理(HTML)を仕上げていくのが、ものすごく楽なんですよ。

前者の 2 つの CSS は、どちらかというと「1 から CSS を作る」のに向いていて、default.css は「3 くらいから始める」感じ。

というか、default.css にテキトーに色を付けて、ブロック要素に border でも付ければ、「キャー、格好いい!」と社内の女子に評判ですよ。(オレじゃなくて HTML が)(オレじゃなくて CSS が)(オ

まとめ

さんざん書いておいてアレですが、けっきょくは、

「ケースバイケース」ですな。

あと、default.css も愛称が欲しいなぁ……。微妙に赤いから、「しば漬け」? 「玄関 開けたら 2 分で CSS」とか。

[2] このページの一番上へ戻る