Color Selector

default niceblue intenseblue otherblue blue puregreen grassgreen green olive gold orange pink fuchsia violet red

Container Selector

Article

2年間ぐらいCSSの勉強サボってたらいろいろ変わっていた

Share on LinkedIn
Pocket

最近、自分も製作的な仕事をしつつ、デザイナさんにCSSを教えたりしているんですが、自分がデザイナーだった頃のCSSの使い方が、既に時代遅れ的な感じになっていて、やっぱりwebは進化が早いなぁと思った次第。

・floatをクリアーする用の意味のないタグはもう使用していない

これはあれですよ。float使うと縦の背景がうまく敷けない事があるのでわざわざfloatをclearするclassを付けた空タグをfloatを使ったboxの閉じタグ直前に入れるんです。こうすると背景がうまく敷けるようになります。

でも今はこんなやり方をしています。

構造のマークアップなしでフロートをクリアする方法

なんでこの方法に変わったかって言うと、本来web標準に沿ったhtmlを書くなら、float解除のためだけの無意味なタグを入れるのは不要なんです。それを回避したのがこの方法で、今では一般化しています。

・*でCSSをデフォルトにする方法は使用していない

*(アスタリスク)で全てのタグのmarginやpaddingを0にして、ブラウザ固有のCSS設定をまずリセットするやり方は、例えばfirefoxでリストボックスを使うとテキストが途切れたりするらしいのであまりいい方法じゃなかった事が判明。

今ではYahoo! UI LibraryのReset CSSというのを使ってリセットするのが一般的。

一方、ぬかみそCSSと言うのがあって、シックスアパートに在籍している2xup.orgの管理人が作成したcommon.cssもリセットCSSとして一般的です。

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

なんでぬかみそかと言うと、常に手を入れているからだそう。ぬかみそ。1日1回はかき回す。そういう意味合いだそうです。

で、さらにはそのリセットCSSに若干アレンジを加えた「浅漬けCSS」というのもあります。

default.css

つまりリセットCSSの進化版で、多少イケてるデザインを施したオレオレ的なCSSです。実際default.cssを適用するとこんな感じ

とまあ、CSS、いろいろ進化しているんですよ。1年に1回は復習すべきだと思った。現在webページはmobileやiphone、プリント用、いろんなデバイスに対応させなきゃいけないし、それを効率的に管理するCSSの作り方が開発されています。さらに定期的に見た目のデザインを変えるためにthema.cssだけをいじれば変化できるように改良されていたり。

うむ。。。

Share on LinkedIn
Pocket

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Favorite Post

Recent Comments