HiGash.Net ホームページへ戻る

Home [Blog] » Google Chrome向けにリセットCSSを微妙にアップデート

Google Chrome向けにリセットCSSを微妙にアップデート

Google Chrome向けにリセットCSSを微妙にアップデート

かなりマイナーチェンジだけど、主にGoogle Chrome向けにほんの少しだけReset CSSとBasic CSSをアップデートしました。リセット用CSSに関する情報の需要は高くて、このブログを参考にしてくれてる人もいるみたいなので一応変更を加えたことを新規エントリーとして告知することにします。

対象ブラウザは、Internet Explorer 6.0 & 7.0、Firefox 2.0 & 3.0、Safari 3.1+、Google Chrome 0.3、Opera 9.27 & 9.5+です。Google Chromeを対象ブラウザに加えたほか、前回のエントリーからOperaが9.6に、Safariが3.2にそれぞれアップデートされていますので、それらも対象ブラウザに加えました。
使い方はもちろん変更無く、Reset CSS でブラウザのデフォルトCSSをリセットした後に Basic CSS を上書きして汎用的な基本スタイルを定義してあげます。

Reset CSS

YUI Reset CSSYUI Fonts CSSFormy – CSS Form Framework を改良して作成。


@charset "utf-8";

/*
===========================================================
	reset.css ver 1.2 [2008/11/25]
	*This document validates as CSS level 3
	*GNU General Public License v3
	*http://higash.net/20081125/reset_css3.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:'メイリオ', 'MS Pゴシック';
	font-size:75%;
	}

	/* for IE6 */
	* html body {
	font-family:'MS Pゴシック';
	font-size:75%;
	}

/* --OTHER TAGS-- */
a {
overflow:hidden;
}

a img, img {
border:0;
}

abbr, acronym {
border:0;
}

address, caption, cite, code, dfn, em, th, strong, var {
font-style:normal;
font-weight:normal;
}

blockquote, dd, div, dl, dt,
h1, h2, h3, h4, h5, h6,
li, ol, p, pre, span, td, th, ul {
margin:0;
padding:0;
}

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%;
}

Reset CSSの変更点は1点のみ。すべてのA要素について a { overflow:hidden } としました。
これは画像置換でAタグ内のテキストにtext-indent:-9999px;という指定を行った場合に、Firefoxでアンカーにフォーカスまたはクリックした際のoutlineの点線が、ブラウザの外側まではみ出してしまうのを防ぐための記述です(下のキャプチャ参照)。ちなみにFirefoxでAタグ要素にフォーカス&クリック時に表示されるoutlineの点線自体を消したい場合は a:focus { outline:none } でOKです。

Aタグにoverflow:hidden;が指定されていない場合

Firefoxキャプチャ[a {overflow:hidden} を設定していない場合]

Aタグにoverflow:hidden;が指定されていないと、
text-indent:-9999px;を使って画像置換した際に、
このようにoutlineの点線が画面外まで伸びていく感じになる

Aタグにoverflow:hidden;が指定されている場合

Firefoxキャプチャ[a {overflow:hidden} を設定した場合]

Aタグにoverflow:hidden;が指定されていれば、
outlineの点線はA要素の外に飛び出して表示されることはない

Basic CSS

YUI Base CSSYUI Fonts CSSFormy – CSS Form Framework を参考に作成。


@charset "utf-8";

/*
===========================================================
	basic.css ver 1.1 [2008/11/25]
	*This document validates as CSS level 3
	*GNU General Public License v3

	*http://higash.net/20081125/reset_css3.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;
}

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;
}

legend {
background:#fff;
padding:0.3em;
}

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 0.5em;
	}

	/* for Opera9.5+ [Safari3 & Chrome] */
	body:first-of-type input {
	padding:0.1em;
	}

	body:first-of-type input[type="checkbox"],
	body:first-of-type input[type="radio"] {
	vertical-align:text-top;
	}

	body:first-of-type input[type="submit"] {
	padding:0.3em 0.3em 0.2em 0.3em;
	}

	/* for Safari3 & Chrome */
	html:not(:only-child:only-child) input {
	padding:0;
	vertical-align:baseline;
	}

	html:not(:only-child:only-child) select {
	vertical-align:0;
	}

/* --HEADLINE-- */
h1, h2, h3, h4, h5, h6 {
font-weight:bold;
margin:1em 0;
}

/* --LIST-- */
ol, ul {
margin:1em 1em 1em 3em;
text-align:left;
}

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:left;
width:auto;
}

/* clearfix */
.clearfix:after {
content:"";
display:block;
clear:both;
}

	/* for IE6 */
	* html .clearfix {
	display:inline-block;
	}

	/* for IE7 */
	*+html .clearfix {
	display:inline-block;
	}

Basic CSSはPタグとOL・ULタグに指定していた text-align:justify;text-align:left に変更しました。text-align:justify;はまだあんまり上手く機能してくれないみたいなのでやめました。

あと、Google Chromeでのチェックボックスやラジオボタンのズレについて調整を加えました。こうやって(↓)見比べてみてもかなり微妙な調整であることがわかるかと思います。 微妙過ぎてもはや気分の問題、自己満足レベルの調整ですけど。
Google ChromeはSafariとCSSハックが同一なので、Google Chrome向けのCSSを調整するとSafariにも手を加えることになり、なかなかGoogle Chromeだけに最適な調整を加えるのが難しいです・・・。

以前のBasic CSSでのGoogle Chromeのフォーム表示

Google Chromeキャプチャ[以前のBasic CSSでのフォーム表示]

赤枠で囲んだラジオボタンとチェックボックス部分のズレがちょっと気になります

新Basic CSSでのGoogle Chromeのフォーム表示

Google Chromeキャプチャ[新Basic CSSでのフォーム表示]

赤枠で囲んだラジオボタンとチェックボックス部分のズレ。
ほんのちょっとだけ調整されてます。もっときっちり調整したいけど、
Google Chromeへの調整はSafariにも影響するのでこのへんが限界かも

新しいBasic CSSは上記以外にもOpera 9.27のフォーム部分をはじめ、いくつか微調整が加えられています。

Reset CSSとBasic CSSについてまとめたHTML(Reset CSS & Basic CSS — HiGash.Net)を http://higash.net/resetcss/ にアップしました。この Reset CSS & Basic CSS — HiGash.Net のファイル一式は下記リンクよりダウンロードしてご覧ください。
(2009/03/01追記:リニューアル時にダウンロードファイルがリンク切れしていたみたいなので修正しました。)

Download

[2008/11/25更新](Zip圧縮・8KB)

Share & Bookmark
このエントリをFacebookでシェアする
このエントリをTwitterでつぶやく
このエントリをはてなブックマークに追加
Delicious
livedoorクリップ
Yahoo!ブックマーク
Buzzurl

コメント/トラックバック

5 件のコメント/トラックバックをいただきました。ありがとうございます!!

  1. zamoto より:

    Mac Firefox3で閲覧していますが、reset.cssとbasic.cssが閲覧できません…orz
    是非参考にさせて頂ければと思いますので改善宜しくお願いいたします。

  2. HiGash.Net より:

    > zamotoさん
    「reset.cssとbasic.cssが閲覧できない」というのは、
    このエントリーが表示できていないということでしょうか??
    僕もMacのFirefox 3をメインブラウザにしているのですが、
    僕の環境では問題なく表示できているようです・・・。
    もう少し詳しく症状を教えていただけますか?
    ちなみにこのエントリーのCSSファイルは
    http://higash.net/higash/wp-content/uploads/1g/resetcss3.zip から
    ダウンロードすることもできます。

  3. hoge より:

    このサイトなんかほとんどサマリーくらいしか記事が無いなーと思っていたら消えちゃってるんですね。
    上のコメントで気づきました。
    jsが悪い事してそうですね。
    @Mac firefox3.5

  4. 通りすがり より:

    とっても参考になりました!
    公開してもらって感謝です。

  5. 通りすがりました より:

    こんにちは。こちらのCSSを使わせていただいています。過去記事ですが失礼します。
    z-indexを利用したDKIRの画像置換を使った場合、リセットCSSの「a { overflow:hidden } 」が原因でIE5において文字が後ろに隠れないという現象がありました。
    リセットCSSのoverflow:hidden;を削除するか、リストタグに書かれている部分のCSS(z-index:-1が設定されており、これにより後ろに回して見えなくしているみたいです)にvisibility:hidden;を入れることで回避できました。
    また、リセットCSSのhtml{background:#fff:}が原因で、その後に自分用のCSSでbodyにfixedを使って固定しようとしても固定されない、という現象がありました。
    リセットCSSのbackground:#fffを削除したところ、fixedが効くようになりました。

ぜひこのエントリーに対するコメントをお聞かせください。

以下のURLでトラックバックも受付けています。

http://higash.net/20081125/reset_css3.html/trackback/

Preview

トラックバック
http://higash.net/20081125/reset_css3.html/trackback/

Page Top