REDLINE MAGAZINE | 気になった初期化CSSREDLINE MAGAZINEトップページへ

すべてのエントリを見る

気になった初期化CSS

コリスさんの記事でブラウザのデフォルトスタイルを初期化するCSSのサンプルが多数掲載されていました。

>> [CSS]ブラウザのスタイルを初期化するスタイルシートのサンプル集 | コリス

初期化する内容やどこまで初期化しておくのかは案件ごとのデザインなどによってケースバイケースだったりして、完全にこれが私のリセットCSSですと言えるものはないのだけれど、それなりにいつもだいたい使いまわしている自分のリセット部分のソースと見比べて考えてみた。いろいろと拝見して気になったものが2つあったのでメモ。

select option に paddingを指定する

予めブラウザのデフォルトスタイルを全称セレクタ(*)なんかで一気にpaddingを0に指定してしまうと、Fxなどの一部のブラウザでだけのようだけど、selectのoptionの右端が下向き矢印マークで隠れてしまうことがある。

そこでwarpspireさんのスタイルが気になった。

キャプチャ・セレクトメニュー部分

キャプチャ図はFirefoxでの様子。上側が最初にすべてのpaddingを0にしておいたまま、特に何も指定せずにoptionを置いた例。下はoptionにpadding:0 5px;を指定した例。

ブラウザによってこの辺りのフォーム周りのスタイルは微妙に違うのだけど、

select option { padding : 0 5px; }

これ、予めpaddingを初期化していても元々ちゃんとpaddingを確保してくれるブラウザには特に影響はないみたい。また、このスタイルを毎回このように初期化してもデザイン面で大きく困る事もない気がする。これは是非真似したい。

label つけてるなら指マークにしよう

ここもまたフォーム周りの話になるけど、inputにlabelをつける機会は多いと思う。そんな時、デフォルトではラベル部分にマウスカーソルを合わせてもデフォルトのカーソル形状のまま。せっかくlabelをつけてるんだから分かりやすく指マークにしようというのが、christianmontoyaさんのこのソース。

form label{ cursor : pointer; }

これでラベル部分の上をマウスカーソルが通過したとき指マークになって選択しやすく分かりやすくなる。特に私自身もチェックボックスとかラジオボタンとか、細かい選択部分はラベル部分をクリックする事が多いので、この配慮は嬉しい。

・・・と思うんだけど、こういう場所で指マークに形状が変化して、逆にユーザーが混乱する事ってないかな。その辺りはターゲット層次第だったりもするかな。とりあえずこのソースも真似しちゃおう。

でもSafari2で落とし穴があった!(追記)

このエントリをポストした後にTwitterでhamashunさんにlabel に pointer は、 Safari2 では厄介かなと思ったおーとアドバイスを頂きました。Winの方でSafari3では確認してたんだけど、macの方でSafari2で検証するのをすっ飛ばしてました。

なんのこっちゃと思ってさっそくSafari2で確認してみると、どうやらSafari2はCSSのスタイル付けはできるけど、ラベル部分をクリックしたらフォーカスするとかチェックボタン等にチェックが入るとかそういった機能が元々ない模様。

>>参考:label要素

上記ページによると、

Safari には label要素のテキストを選択してもフォーカスが移ったり、チェックボックスが選択される機能はありませんが、CSS の装飾は反映されるので一応、label要素自体には対応しているようです

とのこと。なるほどなぁ。ということはこのままでは指マークにはなるものの、Safari2のユーザーにとってみれば何のこっちゃ状態になるわけだ。確かに厄介ですね。hamashunさん、教えてくれてありがとうございます。

え?晒してみる?

メモランダムさんでもスタイル初期化について書かれていました。

>>メモランダム スタイル初期化

みんなでスタイルシートの初期化部分を晒してみたら面白いかも。
とのことでしたので、自分も最近使ってる初期化CSS晒してみます。全称セレクタを使うバージョンにするかどうか迷ったけど、使わないバージョン書いてみます。

body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
form,fieldset,input,textarea,
p,th,td{
	margin:0;
	padding:0;
	text-decoration: none;
	font-style:normal;
	}

/*----------------------------------------
Plus
	font-weight:
	vertical-align:
----------------------------------------*/


table{
	border-collapse:collapse;
	border-spacing:0;
	}

/*----------------------------------------
Plus
	caption, th{
		text-align:left;
		}
----------------------------------------*/	
	
ul{
	list-style:none;
	}

/*----------------------------------------
Plus
	ol,ul{
		list-style:none;
		}
----------------------------------------*/	

fieldset,img{
	border:0;
	}	
	
select option{
	padding:0 5px;
	}	

form label{
	cursor:pointer;
	}

body{
	color:
	background:
	font-size:62.5%;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',Osaka,sans-serif;
	line-height:
	}

ケースバイケースで入れたり入れなかったりの部分はPlusとか書いてる部分。値も決めてない部分なんかもあるんですが・・・。あまり初期化しすぎると後で余計な指定を書かなきゃならなくなったりするので、ソースが一番すっきりする感じで付け足したりしてます。

各要素のマージンなんかもデザイン次第でコロコロ変わるのでガッチリ指定はここではしてません。あぁ、ほんと最低限のものしか入れてないな(汗)

自分でデザインからコーディングまだすべてやる時は自分で予め設計して初期化できるんですが、分業でデザイナさんと同時進行でコーディングを進める場合はいろいろ配慮がいりますね。

<< サーバサイドCSS、Smart*CSSを試してみた | IE7のフォント絡みでこんな話があった >>

トラックバック

このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/168

このページの一番上へ

その他の情報など

最近のコメント

PHP オブジェクト指向の勉強
  • Red - 2010.01.08
  • hogepage - 2010.01.21
  • Red - 2010.01.22
  • - 2011.11.27
  • houseiii - 2011.11.27
Fireworks トリミング画像を一括書出 CS4編
  • Iper - 2009.06.27
  • Red - 2009.06.27
  • mala - 2011.11.17
  • Red - 2011.11.18
jQueryでボックスを上下左右中央に簡単配置
overflow を使用したボックス背景のこと
  • - 2007.12.13
  • Red - 2007.12.13
  • - 2007.12.13
  • Red - 2007.12.13
  • hj - 2011.09.23
IE6 → 透過PNG+overflow=混ぜるな危険(追記有)

メッセージを送る

こちらのメッセージ送信フォームは閉鎖させて頂きました。
御用の方は新しい方のブログ にコメント頂くか、 連絡用のフォーム もありますので、そちらからご連絡ください。