![Blog [Home]](http://higash.net/higash/wp-content/themes/higash/img/gnavi_blog.jpg)
フォームのズレだって許せない！ リセットCSSをアップデート
6月12日のOpera 9.5正式リリースに続き、6月17日にはついにFirefox 3が正式リリース。24時間以内に最も多くダウンロードされたソフトウェアとしてギネス記録を狙ったキャンペーンを展開したFirefox 3は、結果的に24時間で800万を超えるダウンロード数を記録したとか。
メジャーなモダンブラウザが立て続けにアップデートされたこの機会に、 リセットCSS をアップデートすることにしました。前回は各ブラウザのデフォルトCSSをとにかくリセットしてしまう Reset CSS のみのエントリーでしたが、今回はテキストボックスやラジオボタンなどフォーム部品の細かなズレの解消などを目的として、各ブラウザで基本となる汎用的なスタイルを定義する Basic CSS なるものも書いてみました。
使い方としては、 Reset CSS でブラウザのデフォルトCSSをリセットした後に Basic CSS を上書きして汎用的な基本スタイルを定義してあげます。対象としたブラウザは、Internet Explorer 6.0 & 7.0、Firefox 2.0 & 3.0、Safari 3.1、Opera 9.27 & 9.5です。
Reset CSS
YUI Reset CSS と YUI Fonts CSS 、Formy – CSS Form Framework を改良して作成。
@charset "utf-8";
/*
===========================================================
reset.css ver 1.1 [2008/7/2]
*This document validates as CSS level 3
*GNU General Public License v3
*http://higash.net/20080702/reset_css2.html
Modify YUI Reset CSS, YUI Fonts CSS
*Copyright (c) 2008, Yahoo! Inc. All rights reserved.
*http://developer.yahoo.com/yui/license.html
Modify Formy CSS Form Framework 0.8(beta)
*GNU General Public License v2
*http://code.google.com/p/formy-css-framework/
===========================================================
*/
/* --HTML-- */
html {
background:#fff;
color:#333;
overflow-y:scroll;
}
/* --BODY-- */
body {
font:12px/1.5 'Lucida Grande', Helvetica;
margin:0;
overflow:visible;
padding:0;
}
/* for IE7 */
*+html body {
font-family:'メイリオ', 'ＭＳ Ｐゴシック';
font-size:75%;
}
/* for IE6 */
* html body {
font-family:'ＭＳ Ｐゴシック';
font-size:75%;
}
/* --OTHER TAGS-- */
a img, img {
border:0;
}
blockquote, dd, div, dl, dt,
h1, h2, h3, h4, h5, h6,
li, ol, p, pre, span, td, th, ul {
margin:0;
padding:0;
}
abbr, acronym {
border:0;
}
address, caption, cite, code, dfn, em, th, strong, var {
font-style:normal;
font-weight:normal;
}
caption, th {
text-align:left;
}
code, kbd, pre, samp, tt {
font-family:monospace;
line-height:100%;
}
/* for IE7 */
*+html code, kbd, pre, samp, tt {
font-size:108%;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
ol, ul {
list-style:none;
}
q:before, q:after {
content:'';
}
/* form */
button, fieldset, form, input, label, legend, select, textarea {
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0;
padding:0;
vertical-align:baseline;
}
/* tables still need 'cellspacing="0"' */
table {
border-collapse:collapse;
border-spacing:0;
font-size:100%;
}
IEはfont-familyに欧文やsans-serifを指定するとfont-sizeが正しくレンダリングされない らしいので、素直にメイリオまたはＭＳ Ｐゴシックだけを指定（参考： d-spica ｜ IEで指定どおりのfont-sizeにならない ）してこの問題を解決。
Basic CSS
YUI Base CSS と YUI Fonts CSS 、 Formy – CSS Form Framework を参考に作成。
@charset "utf-8";
/*
===========================================================
basic.css ver 1.0 [2008/7/2]
*This document validates as CSS level 3
*GNU General Public License v3
*http://higash.net/20080702/reset_css2.html
Modify YUI Base CSS
*Copyright (c) 2008, Yahoo! Inc. All rights reserved.
*http://developer.yahoo.com/yui/license.html
Modify Formy CSS Form Framework 0.8(beta)
*GNU General Public License v2
*http://code.google.com/p/formy-css-framework/
===========================================================
*/
/* --A-- */
a {
cursor:pointer;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
/* --FORM-- */
fieldset {
border:1px solid #ccc;
margin-bottom:1em;
padding:0 1em 1em 1em;
}
legend {
background:#fff;
padding:0.3em;
}
input, textarea {
line-height:1.4;
padding:0;
vertical-align:middle;
}
input[type="checkbox"],
input[type="radio"] {
vertical-align:text-bottom;
}
input[type="submit"] {
padding:0.1em;
}
select {
padding:0;
}
/* for IE6 */
* html input {
padding:0.1em;
}
* html input.checkbox,
* html input.radio {
vertical-align:-0.3em;
}
* html input.submit {
line-height:1.2;
padding-top:0.2em;
}
* html select {
vertical-align:-0.2em;
}
/* for IE7 */
*+html input {
padding:0.1em;
}
*+html input.submit {
line-height:1.2;
padding-top:0.2em;
}
*+html select {
vertical-align:-0.2em;
}
/* for Opera9.27 */
html:first-child input {
padding:0.1em;
}
html:first-child input[type="checkbox"],
html:first-child input[type="radio"] {
vertical-align:middle;
}
html:first-child input[type="submit"] {
padding:0.3em;
}
html:first-child select {
padding:0.2em;
}
/* for Opera9.5 [Safari3] */
body:first-of-type input {
padding:0.1em;
}
body:first-of-type input[type="checkbox"],
body:first-of-type input[type="radio"] {
vertical-align:-0.3em;
}
body:first-of-type input[type="submit"] {
padding:0.3em 0.3em 0.2em 0.3em;
}
/* for Safari3 */
html:not(:only-child:only-child) input {
padding:0;
vertical-align:baseline;
}
html:not(:only-child:only-child) input[type="checkbox"],
html:not(:only-child:only-child) input[type="radio"] {
vertical-align:baseline;
}
html:not(:only-child:only-child) select {
vertical-align:0.1em;
}
/* --HEADLINE-- */
h1, h2, h3, h4, h5, h6 {
font-weight:bold;
margin:1em 0;
}
/* --LIST-- */
ol, ul {
margin:1em 1em 1em 3em;
text-align:justify;
text-justify:inter-ideograph;
}
dl {
margin:1em;
}
ol li {
list-style:decimal outside;
}
ul li {
list-style:disc outside;
}
dl dd, ol li, ul li {
margin-bottom:0.5em;
}
/* --TABLE-- */
table {
margin-bottom:1em;
}
td, th {
border:1px solid;
padding:0.5em;
}
th {
font-weight:bold;
text-align:center;
}
/* --OTHER TAGS-- */
abbr, acronym {
border-bottom:1px dotted;
cursor:help;
}
blockquote {
margin:1em;
}
caption {
margin-bottom:0.5em;
text-align:center;
}
em, strong {
font-weight:bold;
}
p {
margin-bottom:1em;
text-align:justify;
text-justify:inter-ideograph;
}
/* clearfix */
.clearfix:after {
content:"";
display:block;
clear:both;
}
/* for IE6 */
* html .clearfix {
display:inline-block;
}
/* for IE7 */
*+html .clearfix {
display:inline-block;
}
フォーム部品の細かなズレを調整するために、かなりCSSハックを用いることになってしまいました。一応、CSS レベル 3の書式としてはValidなようですが。
フォーム部品の細かなズレとは具体的に何かというと、例えばラジオボタンやチェックボックスと横並びになるテキストのベースラインのズレ。下のキャプチャはFirefox 3（Mac OS X）のものですが、赤線で囲んだように少し “気持ち悪い” ズレがあります。
こういったズレはだいぶ前から気にはなっていたのですが、なかなかその微調整に手を付けられずにいました。今回のBasic.cssでどこまでそのズレを解消できたのかは、今後いくらか実践を積んで（つまり実際の仕事で使って）みなければ何とも言えませんが、とりあえずテストではフォームまわりのスタイリングに一定の秩序を与えてくれるであろうと思っています。
フォーム部品のズレを修正するためにBasic CSSでは、<input type=”checkbox”>、<input type=”radio”>、<input type=”submit”>、<input type=”text”>を、それぞれ input[type="checkbox"] 、 input[type="radio"] 、 input[type="submit"] 、 input[type="text"] というように細かく指定しています。ただし、IE6だけこういう書き方を理解してくれないので、仕方なくHTMLで <input type=”checkbox” class=”checkbox” > みたいに各要素をclassで指定してあげています。これはIE6だけのために行ってやらなければならない暫定的な対応です。早くIE7が広まってくれれば、こんな面倒なことはしなくても済むのに・・・。
CSSハックについては後日別エントリーをまとめようかと思っているので今回は詳述しませんが、1点だけ。CSS中のコメントにも書いていますが、 body:first-of-type selector はOpera 9.5とSafari 3.1の2つのブラウザに適用されます。したがって、Safari 3.1のみにCSSハックを適用するために、 html:not(:only-child:only-child) selector で body:first-of-type selector を上書きしています。
Reset.cssとBasic.cssについてまとめたHTML（ Reset CSS & Basic CSS — HiGash.Net ）を http://higash.net/resetcss/ にアップしました。この Reset CSS & Basic CSS — HiGash.Net のファイル一式は下記リンクよりダウンロードしてご覧ください（追記：2008年7月23日、Zipファイル中に含まれていた不要な画像ファイルを削除）。
Reset CSS & Basic CSS — HiGash.Net（Zip圧縮・8KB）
また、Reset CSS & Basic CSS — HiGash.Net を対象ブラウザでキャプチャした結果もアップしました。下記のリンクよりダウンロードしてご覧ください。
※ OperaとSafariのキャプチャファイルはMac OS Xのみです。ただし、Opera、SafariともWindows XPで表示確認はしています。
上記HTMLの対象ブラウザでのキャプチャ（Zip圧縮・5.3MB）
- Share & Bookmark
