自分デファクトなCSS定義、mydesign.cssを考えてみる(2)

CSS

mydesign.cssの適用

サンプルのhtmlに、mydesign.cssの構成ファイルである reset.css(YUI)、myreset.css、myskin_default.cssを順番に適用してみます。

サンプルhtml
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link type="text/css" rel="stylesheet" href="mydesign.css" />
</head>
<body>
    <h1><a href="#">mydesign.css</a></h1>
    <ul>
        <li><a href="#">Javascript</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">HTML</a></li>
    </ul>
    <h2>mydesign.cssのサンプル</h2>
    <h3>サンプルページです</h3>
    <p>自分の中でデファクトとすべく定義を考えてみました。</p>
    <h4>タグを書いてみる</h4>
    <p>いくつかタグを書いてみます。</p>
<pre>
/* 親 */
var Car = function(){}
Car.prototype = {
    voice : 'boo',
    tire : 4,
}
</pre>
    <h5>TABLEを書いてみる</h5>
    <table>
        <tr>
            <th>th</th>
            <th>th</th>
            <th>th</th>
        </tr>
        <tr>
            <td>td</td>
            <td>td</td>
            <td>td</td>
        </tr>
        <tr>
            <td>td</td>
            <td>td</td>
            <td>td</td>
        </tr>
    </table>
    <h5>LISTを書いてみる</h5>
    <h6>まずはUL</h6>
    <ul>
        <li>UL LISTです</li>
        <li>UL LISTです</li>
    </ul>
    <h6>次にDL</h6>
    <dl>
        <dt>DL LISTです</dt>
        <dd>list</dd>
        <dd>list</dd>
        <dt>DL LISTです</dt>
        <dd>list</dd>
        <dd>list</dd>
    </dl>
</body>
</html>


サンプルページ

reset.css(YUI)の適用

まず、reset.css(YUI)のみ適用してみます。

/*
Copyright (c) 2007, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.4.1
*/
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;font-variant:normal;}
/* to preserve line-height and selector appearance */
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
/*because legend doesn't inherit in IE */
legend{color:#000;}


サンプルページ
余白がクリアされぎゅっと詰まった感じになります。

myreset.cssの適用

次に、myrest.cssを適用することで、font-size、margin、paddingを設定し見やすくします。marginは基本的に横を16px、縦を1em又は.5em(pタグなど)としてます。paddingは、要素毎に調整してますが、4pxの倍数を基本としてます。

/*
============================================================================
structure reset
============================================================================*/  

/*
universal
/----------------------------------------------------------------------------*/  
 * {
	font-style:normal;
}

/*
structure
/---------------------------------------------------------------------------*/  
body {
	font-family: Arial, Helvetica, "ヒラギノ角ゴPro W3", "ＭＳ Ｐゴシック", sans-serif;
	font-size:80%;
	line-height:1.6;
/* gap */
	margin:0 16px 1em;
	padding:0;	
}

/*
heading
/---------------------------------------------------------------------------*/  
h1 {
	font-size: 170%;
}
h2 {
	font-size: 150%;
}
h3 {
	font-size: 130%;
}
h4 {
	font-size: 110%;
}
h5{
	font-size: 100%;
}
h6 {
	font-size: 95%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: bold;
/* gap */
	margin:2em 12px 1em;
}



/*
link
/---------------------------------------------------------------------------*/  
a {   
}
a:active{
}
a:focus{
}
a:hover {   
}   
a:link{
}
a:visited {
}

/*
text
/---------------------------------------------------------------------------*/  
p,
pre,
blockquote{
/* gap */
	margin: 1.5em 16px 1.5em;
	padding:0;
}
address,
cite{
/* gap */
	margin: 1em 16px;
	padding:0;
}

/*
table
/---------------------------------------------------------------------------*/  
table {
	empty-cells:show;
/* gap */
	margin: 1em 16px;
	padding:0;
}
th{
	text-align:center;
}
td {
}
th,
td{
/* gap */
	margin:0;
	padding:.1em 4px;
}

/*
form
/---------------------------------------------------------------------------*/  
form {
/* gap */
	margin:0;
	padding:0;
}
textarea,
input{
	font-family: Arial, Helvetica, "ヒラギノ角ゴPro W3","ＭＳ Ｐゴシック", sans-serif;
	border-style:solid;
	border-width:1px;
	width:150px;
/* gap */
	margin:0;
	padding:2px 2px 0;
}
input{
	height:21px;
}
textarea{
	height:8em;
	overflow:auto;
}



/*
fieldset
/---------------------------------------------------------------------------*/  
fieldset {
/* gap */
	margin: 1em 16px;
	padding:0;
}
legend {
/* gap */
	margin:0 .4em;
	padding:0;
}
/*
pre
/---------------------------------------------------------------------------*/  
pre{
/* gap */
	margin: 1em 16px;
	padding:4px;
}


/*
list
/---------------------------------------------------------------------------*/  
ul{
/* gap */
	margin:.5em 16px 1em;
	padding:0;
}
ol{
/* gap */
	margin:.5em 16px 1em;
	padding:0;
}
dl{
/* gap */
	margin: .5em 16px 1em;
	padding:0 0 0 16px;
}


li{
/* gap */
	margin:4px 0 4px 16px;
	padding:0 0 0 8px;
}
dt{
/* gap */
	margin:4px 0 4px;
	padding:0 0 0 8px;
}
dd{
/* gap */
	margin:4px 0 4px 16px;
	padding:0 0 0 8px;
}

dd ul li{
/* gap */
	margin-left:0;
}

/*
image
/---------------------------------------------------------------------------*/  
img{
/* gap */
	margin:0;
	padding:0;
}


サンプルページ

myskin_default.cssの適用

myskin_default.cssでbackground-color、border等を設定しメリハリを出します。デフォルト設定の位置づけにするのでグレー系のなるべく地味目な配色にしてます。色設定などで変化を出すような拡張skin(myskin_***.css)を作りやすいように、後半部に色設定の定義のみをまとめてあります。

/*__________________________________________________________________________

	Default Skin
____________________________________________________________________________*/  

/*
============================================================================
Define Structure
============================================================================*/  
/*
universal
/---------------------------------------------------------------------------*/  
* {
}

/*
structure
/---------------------------------------------------------------------------*/  
html{
}
body {
}

/*
heading
/---------------------------------------------------------------------------*/  
h1{
	margin:0;
	padding:1em 12px;
}
h2{
	margin:0;
	padding:.5em 12px;
}
h3,
h4{
	border-width:0 0 1px 0;
	border-style:solid;
}

h5,
h6{
	border-width:0 0 0 4px;
	border-style:solid;
	padding:0 0 0 8px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight:normal;
}



/*
link
/---------------------------------------------------------------------------*/  
a {   
    text-decoration:none;   
}
a:active{
}
a:focus{
}
a:link{
}
a:visited {
}
a:hover {   
	text-decoration:none;
}   


/*
text
/---------------------------------------------------------------------------*/  
p,
pre,
blockquote{
}
address,
cite{
}

/*
table
/---------------------------------------------------------------------------*/  
table {
	border-width:1px;
	border-style:solid;
	border-spacing: 1px;
	border-collapse: separate;
}
th{
}
td {
}
th,
td{
	border-width:1px;
	border-style:solid;
}


/*
form
/---------------------------------------------------------------------------*/  
form {
}
input,
textarea {
	border-width:1px;
	border-style:solid;
}

/*
fieldset
/---------------------------------------------------------------------------*/  
fieldset {
	border-width:1px;
	border-style:solid;
}
legend {
}
/*
pre
/---------------------------------------------------------------------------*/  
pre{
	border-width:1px;
	border-style:solid;
}

/*
list
/---------------------------------------------------------------------------*/  
li,
dt,
dd{
	list-style:none;
	border-width:0 0 0 2px;
	border-style:solid;
}

/*
image
/---------------------------------------------------------------------------*/  
img{
	border:none;
}



/*
============================================================================
Define Color Set
============================================================================*/  
/*
Base Tone
/---------------------------------------------------------------------------*/  
/*:::::::::::::::::::::::::::: #ffffff :::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::: #fafafa :::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::: #f5f5f5 :::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::: #eeeeee :::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::: #dddddd :::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::: #aaaaaa :::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::: #555555 :::::::::::::::::::::::::::::::::::::*/
/*
Ext Tone
/---------------------------------------------------------------------------*/  
/*:::::::::::::::::::::::::::: #3355aa :::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::: #01b0f0 :::::::::::::::::::::::::::::::::::::*/

/*
============================================================================
Define Core Color
============================================================================*/  
/*
Base Tone
/---------------------------------------------------------------------------*/  
/*:::::::::::::::::::::::::::: #ffffff :::::::::::::::::::::::::::::::::::::*/
body {
	background:#fff;
}
/*:::::::::::::::::::::::::::: #fafafa :::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::: #f5f5f5 :::::::::::::::::::::::::::::::::::::*/
h2,
pre{
	background:#f5f5f5;
}
/*:::::::::::::::::::::::::::: #eeeeee :::::::::::::::::::::::::::::::::::::*/
h6,
fieldset,
pre,
li,
dt,
dd{
	border-color:#eee;
}
th{
	background-color:#eee;
}
/*:::::::::::::::::::::::::::: #dddddd :::::::::::::::::::::::::::::::::::::*/
* {
	border-color:#ddd;
}
html,
h1{
	background-color:#ddd;
}
/*:::::::::::::::::::::::::::: #aaaaaa :::::::::::::::::::::::::::::::::::::*/
h3{
	border-color:#aaa;
}
/*:::::::::::::::::::::::::::: #555555 :::::::::::::::::::::::::::::::::::::*/
body,
input,
legend{
	color:#555;
}
/*
Ext Tone
/---------------------------------------------------------------------------*/  
/*:::::::::::::::::::::::::::: #3355aa :::::::::::::::::::::::::::::::::::::*/
a,
a:visited {
	color:#3355aa;
}
/*:::::::::::::::::::::::::::: #01b0f0 :::::::::::::::::::::::::::::::::::::*/
a:hover {   
	color:#01b0f0;
}


サンプルページ
こんな感じです。だいぶ見やすくなりました。次回エントリーに続きます。