2006年10月26日木曜日

CSSを書くときに最初に読み込むファイル 06年10月25日現在

YUIや独自のreset.cssを使用して使っています。

/common/css/reset.css

body,
div,
ul,ol,li,
h1,h2,h3,h4,h5,h6,
p,a,
img,
table,th,td,
dl,dt,dd,
form {
    margin:0;
    padding:0;
    border:0;
    line-height:130%;
    font-weight:normal;
    font-style:normal;
    font-size:100%;
}

ul{
    list-style:none;
}

img {
    vertical-align:bottom;
}


/common/css/fonts.css

/*
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 0.11.3
*/

/**
 * 84.5% for !IE, keywords for IE
 * Percents could work for IE, but for backCompat purposes, we are using
 keywords.
 * x-small is for IE < 6 and IE6 quirks mode.
 *
 */
body {font:13px arial,helvetica,clean,sans-serif;*font-size:small;*font:x-
small;}
table {font-size:inherit;font:100%;}

/**
 * 99% for safari; 100% is too large
 */
select, input, textarea {font:99% arial,helvetica,clean,sans-serif;}

/**
 * Bump up !IE to get to 13px equivalent
 */
pre, code {font:115% monospace;*font-size:100%;}

/**
 * Default line-height based on font-size rather than "computed-value"
 * see: http://www.w3.org/TR/CSS21/visudet.html#line-height
 */
body * {line-height:1.22em;}

で使用サンプルは下記のような感じ。

style.css

@charset "utf-8";
@import url(/common/css/fonts.css);
@import url(/common/css/reset.css);

/* ================ general ================== */
body * {
    font-family:"Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic Pro W3", "MS Pゴシック",     sans-serif;
}

a {
    color:#666;
}
 
a:hover{
    color:#FF8C21;
    text-decoration:underline;
}

.clear{
    clear:both;
    width:1px;
    height:1px;
    overflow:hidden;
}

/* layout
---------------------------------*/
body {
    text-align:center;
    background:#000;
}

(中略)

/* font
---------------------------------*/

#contents p.count span.importantNum{
     font-size:136%;
}
#contents #flip #flip_window h2{
    font-size:122%;
}

#contents #flip #flip_window h3,
#contents p{
    font-size:92%;
}

#contents p.count span.date,
#footer,
#contents #f_blogrss ul li,
#contents .makimono p,
#contents .player{
    font-size:77%
}



Zenback