[SiteSearch Google]

May 16, 2008

「浅漬け」と「ぬかみそ」、そして default.css

[ad]

新顔・浅漬け 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」とか。

Google Adsense

ワード

コメント

コメントを投稿

"「浅漬け」と「ぬかみそ」、そして default.css" にコメントを投稿することができます(別ウィンドウが開きます)。

トラックバック

このエントリーのトラックバックURL:

"「浅漬け」と「ぬかみそ」、そして default.css"へのトラックバックはまだありません。

過去の記事

カテゴリィ一覧
  1. Movable Type
  2. その他
    1. アイデア
  3. ウェブ
    1. Weblog
    2. Webデザイン
    3. ちょっとイイ話
    4. へぇー(トリビア・雑学)
    5. オモロ
      1. オモロテキスト
      2. オモロニュース
      3. オモロ動画
      4. オモロ画像
    6. ニュース
  4. コンピュータ・エレクトロニクス
    1. PC
      1. Firefox
  5. マンガ・アニメ・ゲーム
    1. アニメ
      1. 新世紀エヴァンゲリオン
    2. オタク
    3. ゲーム
    4. マンガ
      1. 週刊少年ジャンプ
        1. DEATH NOTE
        2. HUNTER×HUNTER
        3. SKET DANCE
  6. 本・音楽・映画・TV
    1. TV・芸能
    2. 映画
  7. 食・健康・生活
    1. ファッション
    2. 食べ物