-webkit-appearanceでフォーム要素のスタイルをリセット

<img src="http://webdev.jp.net/wp-content/uploads/2013/08/webkit-appearance-defaurt-reset wikipedia reference.png” alt=”-webkit-appearanceを設定してみた” width=”400″ height=”400″ class=”aligncenter size-full wp-image-1412″ />

スマートフォンのデフォルトブラウザ、Safariのフォーム要素に、スタイルシートで独自のデザインを設定しようとしたとき
角丸やグラデーション、ドロップシャドウなどの初期スタイルを打ち消すのに、意外と手こずったことはありませんか?

-webkit-appearanceをつかうと、これらの装飾を一部外せるので、フォーム要素をすべてオリジナルの装飾にするスマホサイトを構築するときは
CSSの先頭によく書く、ブラウザ初期スタイルをリセットしているところへ一緒に追記しておくとやりやすいです。

* {
	-webkit-appearance: none;
}

initialとautoでmin-width,max-width(height)をリセット

スタイルシートの、最大の幅や高さ、最小の幅や高さを指定する
max-width、max-height、min-width、min-height をリセットするときは
initialとautoを併用します。

アスペクト比(縦横比)を維持したまま200×200の枠内に収まるよう画像を縮小する設定と
それをリセットするスタイルのサンプルです。

.thumbnail img {
	max-width: 200px;
	max-height: 200px;
	width: auto;
	height: auto;
}
.free .thumbnail img {
	max-width: initial;
	max-width: auto;
	max-height: initial;
	max-height: auto;
}

initialはスタイル適用前の状態へ設定するための値で、CSS3世代の比較的新しいものです。
併記しているautoはinitialに対応していないInternetExplorerのための設定です。
(IE10でもinitial表記が効かなかった…IE遅れてる…)

そもそも、いったん設定したものをリセットしなきゃいけない構造にするなってはなしですが、
継ぎ足しながら運用されてきた1000行ちかいCSSを突貫で直さなければいけないときや、他のベンダーと同時進行でCSS構築しなければならないスケジュールのときなど
やむを得ないケースもでてくるので、こいつはmax、min系以外でも活躍しそう。

参考:
テキストをスタイルシート適用前の状態に戻す方法

selectのデザインをCSSとJavascriptでカスタマイズ

jQuery mobile などの大規模なプラグインを導入せずに
オリジナルデザインのセレクトボックスを設置するためのjQuery+CSSのソースをご紹介します。

動作サンプルはこちら。

フォーム要素の初期装飾をリセットできるCSS3のappearanceは、IE8以下でつかうことができませんが
このやり方なら、外形の装飾はIE6から最新のブラウザまで同じようにデザインを変えられます。
ただ、スマートフォン対応をがメインのため、展開したときのoption部分はデフォルトのままです。

“selectのデザインをCSSとJavascriptでカスタマイズ” の続きを読む

absoluteで絶対位置配置した要素のサイズを相対指定

position:absoluteで前面に配置した要素のサイズをposition:relativeとなっている親要素にあわせて相対指定するテクニックをご紹介します。

実例でいうと、たとえばこんな感じ。
リキッドレイアウトの要素へグラデーションの縁をつけてみました。

“absoluteで絶対位置配置した要素のサイズを相対指定” の続きを読む

iPhone内蔵フォントをfont-familyで指定する

CSSのfont-familyで指定するとき、軽くつまずくのがフォント名の綴り…
よく使う、ヒラギノ角ゴ やメイリオは、前に設定した時のをコピーしてくればいいですが
iPhoneやiPadの内蔵フォントを使うとなると、使えるフォントとfont-familyで指定する綴りをどうやって調べたらよいのか。

“iPhone内蔵フォントをfont-familyで指定する” の続きを読む

<legend>はFirefoxやwebkit系でdisplayを変更できない

スマートフォン用にtable-cellでtable風の左右並びレイアウトを組む事があったのですが
何度やってもFirefoxとChrome、Safari(webkit系)で<legend>タグのdisplayがtable-cellに変わらない!

ずいぶん試した末に、<legend>を<span>や<div>など他のタグに変更したら同じCSSでdisplay:table-cellを指定できました。
まさかそこが原因だったとは。
不覚にも、<legend>が原因というのにたどり着くまで時間がかかりました。

くわしくはサンプルで。
“<legend>はFirefoxやwebkit系でdisplayを変更できない” の続きを読む

CSSのhoverだけでどこまでテーブルを読みやすくできるか

CSSのhoverでテーブルの情報を読みやすくしてみたサンプルです。
縦軸が取ってこれないところが残念なんですけどね。
お天気アイコンを用意できてないところもご愛嬌で…。

サンプル

10(月) 11(火) 12(水) 13(木) 14(金) 15(土) 16(日)
北海道 曇/雪 晴/雪 曇/雪 晴/雪 曇/雪 雪/曇 曇/雪
東北 曇/晴 晴/雪 曇/晴 晴/曇 曇/雪 曇/晴
関東・甲信 曇/雪 曇/晴 晴/曇 曇/晴 曇/晴 曇/晴 晴/曇
中部・北陸 曇/雪 曇/雪 曇/雪 曇/雪 曇/雪 曇/雪
近畿 曇/雪 曇/晴 曇/晴 曇/晴 曇/晴 晴/曇
中国・四国 雪/曇 曇/晴 晴/曇 曇/晴 晴/曇 晴/曇
九州 雨/曇 晴/曇 晴/曇 曇/晴 晴/曇 曇/晴 晴/曇
沖縄 曇/雨 曇/雨 曇/晴 晴/曇 晴/曇

“CSSのhoverだけでどこまでテーブルを読みやすくできるか” の続きを読む

CSS間接セレクタ「~」と隣接兄弟セレクタ「+」の使いどころ

Internet Exolorer 6 以外で使える、CSSの隣接兄弟セレクタ、間接セレクタの使いどころを発見!
CMSで項目の組み合わせが変わる場合、2番め以降だけにセパレータ的な線やマージをつけるのに便利です。

間接セレクタをつかうと、2番め以降に登場する要素にスタイルを適用できます。

.section dl ~ dl {
	border-top: 1px dotted #666;
}

隣接兄弟セレクタをつかうと、直後にならぶ要素にスタイルを適用できます。

.section dl + div {
	margin-top: 1em;
}

くわしくは、サンプルで!

“CSS間接セレクタ「~」と隣接兄弟セレクタ「+」の使いどころ” の続きを読む