雇われWebデザイナー、SWDのサイトです。なにも目指してません。すみません。

1
CSS
スタイルシート関連の記事です。
2008

02/13

CSS初期化のトレンド?
CATEGORY:, TAG:
MT復帰の際に過去の一部の記事で正常に表示できないものがあるようです。
閲覧数の多い記事から少しずつ直していこうと思いますがすべての記事の復旧は難しいと思います。
わざわざお越しの方には申し訳ありませんがご容赦ください。

1ピクセルのずれも許せないWebデザイナのためにResetting Again
(マイコミジャーナル)

Webの流れってホント流行り廃りが早いけど、
そんな中でも今回はコーディングについての話題。

一昔前まではテーブルレイアウトを普通にやってたわけだけど、
今テーブルレイアウトで組んだりすると、同業者からは
それこそ鼻つまみ者的な扱いを受けますよね。(おおげさ w

まぁ、おかげさまでCSSレイアウトの流れには何とか乗れている(?)
わけですが、CSSレイアウトの中でも組み方に主流と呼ばれる流れが
あったりするものです。

私はCSSでのコーディング時に、
面倒なので*(アスタリスク)でmarginやpaddingを
全初期化することが多いのですが、最近はその流れも古いようで
上記URLの記事のように、一部の要素だけを初期化して
ブラウザ間のずれも吸収して表示を最適化してしまおうよ、
てのが主流のようです。
たしかに*(アスタリスク)での初期化はすべてのプロパティを
初期化するわけなので、処理が重くなりがちですし、
顕著なのが<input>タグ等のフォームでpaddingが0になると
Firefoxでの表示が詰まりすぎたりして、結局inputプロパティの
padding値を設定しなおしたりという無駄なコードが増えるわけですし。
まぁ、あれだ。

「初期化は計画的に!」
てことネ。(これが言いたかっただけ

2008

01/10

こいつを待ってたゼ!『IE7.js』
CATEGORY:,,, TAG:,,
MT復帰の際に過去の一部の記事で正常に表示できないものがあるようです。
閲覧数の多い記事から少しずつ直していこうと思いますがすべての記事の復旧は難しいと思います。
わざわざお越しの方には申し訳ありませんがご容赦ください。

IE6以下をWeb標準に準拠させるライブラリ『IE7.js』(to-R)
▼以下抜粋

このライブラリを読み込むことによりIE6以下でもIE7と同じようなXHTM/CSSの解釈を行ってくれます。

詳細は上記よりご覧いただくとして、とにかくこのライブラリに感動しました。まだbeta版ということなので既存のWebサイトでの使用は難しいかもしれませんが、新規で制作する小規模なサイトなら使ってみてもよいのではないでしょうか。

こいつがあれば、IE6以下のためだけにハックを多用せずに済みますので、より理想的なソースが書けるってもんですよね。
(長期的な流れの中でIE6以下を対応ブラウザから切る場合も
 JSのリンクをはずすだけで済むわけですし。)

透過PNG対応もうれしいですが、
min-height
とかのプロパティに対応してくれているのも何気にうれしい。
疑似クラスへの対応もうれしい限りです。
:first-child
とかね。
ダブルマージンのバグの対応もしてくれる徹底ぶり。
これで検証も楽になりそう。

2008

01/08

IE7:filterを使用するとフォントのアンチエイリアスが無効になる
CATEGORY:,, TAG:,,
MT復帰の際に過去の一部の記事で正常に表示できないものがあるようです。
閲覧数の多い記事から少しずつ直していこうと思いますがすべての記事の復旧は難しいと思います。
わざわざお越しの方には申し訳ありませんがご容赦ください。

タイトルのままなのですが、
これまた遭遇確率の低い地味な現象なので備忘録として。

IEの独自拡張として用意されているfilterですが、Web制作時には
おもに透明度(opacityとか-moz-opacity)のクロスブラウザ対策として
使用することが比較的多いかと思います。

その際、IE7でこのfilterを指定すると指定された要素内のテキストの
アンチエイリアスが無効になるようです。

IE7でfilterを指定すると文字が細くなる

2007

07/17

参考:input タグ周りのCSS適用前後のビジュアル一覧
CATEGORY:,, TAG:
MT復帰の際に過去の一部の記事で正常に表示できないものがあるようです。
閲覧数の多い記事から少しずつ直していこうと思いますがすべての記事の復旧は難しいと思います。
わざわざお越しの方には申し訳ありませんがご容赦ください。

元ネタは古いのですが、おもにコーディング前のデザイン時や
提案資料作成時に参考になるかもな記事があったので紹介しておきます。

Styling even more form controls | 456 Berea Street

ブラウザとOSごとのボタンやプルダウンなどの入力フォーム回り
のビジュアルが一覧で紹介されている
(2007/7/17時点ではVistaでのビジュアルはないようです)ほか、
それぞれに同じCSSを適用した時の変化状態も確認できるので、
フォームにデザイン的なアクセントをつけようとされる際には
参考になるかもですね。

まぁ、アクセントといっても
ご覧になれば言うまでもないことかもですが、
特にフォーム回りはブラウザごとにビジュアルが大きく異なり、
CSSの対応状況もまちまちです。
ので、個人的にはフォームには余白とフォントサイズの指定程度
にしておくのが現状ではベターかと思いますけどね。

1

[PR] このサイトはhetemlサーバを利用しています
[PR]
_FEED
このRSSを取得する
_CATEGORY
_TAG
                                       
_RECENT COMMENTS
SWD さん:
死んでないアピール
IKKI さん:
死んでないアピール
SWD さん:
WordCamp Kyoto 2009 おつかれさまでした&フォローな記事
ゆりこ@スタッフ さん:
WordCamp Kyoto 2009 おつかれさまでした&フォローな記事
SWD さん:
ヱヴァっぽいVistaサイドバーガジェットを作ってみた
月宮あゆ@寒冷地仕様 さん:
ヱヴァっぽいVistaサイドバーガジェットを作ってみた
SWD さん:
ヱヴァっぽいVistaサイドバーガジェットを作ってみた
おさる3 さん:
ヱヴァっぽいVistaサイドバーガジェットを作ってみた
_ARCHIVE
2010年5月 (5)
2010年4月 (2)
2009年10月 (3)
2009年8月 (1)
2009年7月 (2)
2009年6月 (6)
2009年5月 (1)
2009年4月 (2)
2009年3月 (2)
2009年2月 (1)
2009年1月 (3)
2008年12月 (5)
_BLOG PARTS


あわせて読みたいブログパーツフィードメーター - 日々平穏スカウター : 日々平穏
OpenID対応しています OpenIDについて

このブログはクリエイティブ・コモンズでライセンスされています。