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

myparts.cssの適用

前回のmydesign.cssの適用では各要素に対し、font-size、margin/padding、border、colorといった最低限必要な属性の設定のみを行いました。myparts.cssではこれら基本要素の設定だけでは足りない、汎用的に使われる独自のクラス定義を管理します。

ul.my-line-listの定義

例えばサンプルhtmlのページヘッダ部にあるリンクですが、これはul,li要素を使用してるため縦に並んでますが、一般的にはヘッダナビゲーションとして横並びにさせることが多いと思います。

これを実現させるためにmyparts.cssに以下のようul.my-line-listクラスの定義を追加します。

/*
============================================================================
core parts
============================================================================*/  
/*
my-line-list
/----------------------------------------------------------------------------*/  
ul.my-line-list{
/* gap*/
	margin:.5em 16px;
	padding:0;
}
ul.my-line-list li{
/* gap*/
	margin:0;
	padding:4px;
/* structure */
	border:none;
	display:inline;
}

サンプルhtmlのページヘッダ部のulのクラス名をmy-line-listとします。

<ul class="my-line-list">
    <li><a href="#">Javascript</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">HTML</a></li>
</ul>

サンプルページ
こんな感じに横並びになります。次に選択されてるリンクとリンクのhover時に強調表示がされるようにしてみます。myparts.cssにmy-linksクラスの定義を追加します。

/*
my-links
/----------------------------------------------------------------------------*/  
.my-links a{
/* gap*/
    margin:0 2px;
    padding:0 2px;
}

色の設定はmyskin_default.cssで行いますが、保守しやすいようpartsクラス専用の設定エリアを最後部に設け、使用してない色(myskin_default.cssで定義されてるがpartsクラスでは現時点で使用してない色)も含めたカラーセットをまとめて定義してしまいます。これは後々partsクラスが増え個別に色の設定を追加する際、配色に迷わないようにするためです。

/*
============================================================================
Define Parts Color
============================================================================*/  
/*
Base Tone
/---------------------------------------------------------------------------*/  
/*:::::::::::::::::::::::::::: #ffffff :::::::::::::::::::::::::::::::::::::*/
.my-links a:visited.my-active,
.my-links a.my-active{
	color:#fff;
}
/*:::::::::::::::::::::::::::: #fafafa :::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::: #f5f5f5 :::::::::::::::::::::::::::::::::::::*/
.my-links a:hover{
	background:#f5f5f5;
}
/*:::::::::::::::::::::::::::: #eeeeee :::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::: #dddddd :::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::: #aaaaaa :::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::: #555555 :::::::::::::::::::::::::::::::::::::*/
.my-links a:visited.my-active,
.my-links a.my-active{
	background:#555;
}
/*
Ext Tone
/---------------------------------------------------------------------------*/  
/*:::::::::::::::::::::::::::: #3355aa :::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::: #01b0f0 :::::::::::::::::::::::::::::::::::::*/
.my-links a:hover{
	color:#01b0f0;
}

ulのクラス名にmy-linksを追加します。また、選択されてるliのクラス名をmy-activeとします。

<ul class="my-line-list my-links">
    <li><a href="#" class="my-active">Javascript</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">HTML</a></li>
</ul>

サンプルページ
こんな感じになります。

拡張スキン myskin_default_monotone01.cssの追加定義

拡張スキンを読ませることでデザインに多様性を持たせてみます。拡張スキンのファイル名の規約はとりあえず

myskin_スキン名.css

とし、マイナー拡張であれば

myskin_スキン名_マイナー拡張名.css

にしようかと思ってます。ですのでmyskin_default_monotone01.cssはデフォルトスキンのマイナー拡張ということになります。以下がその内容ですが、とりあえずはhtmlとh1の背景色だけを変えた単純なものです。先程と同様にmyskin_default.cssで定義されている色全てをまとめて定義してます。

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


/*
============================================================================
Define Core Color
============================================================================*/  
/*
Base Tone
/---------------------------------------------------------------------------*/  
/*:::::::::::::::::::::::::::: #ffffff :::::::::::::::::::::::::::::::::::::*/
h1 a:hover{
	color:#ffffff!important;
}
/*:::::::::::::::::::::::::::: #fafafa :::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::: #f5f5f5 :::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::: #eeeeee :::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::: #dddddd :::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::: #aaaaaa :::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::: #555555 :::::::::::::::::::::::::::::::::::::*/
html,
h1{
	background-color:#555555;
}
/*
Ext Tone
/---------------------------------------------------------------------------*/  
/*:::::::::::::::::::::::::::: #3355aa :::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::: #01b0f0 :::::::::::::::::::::::::::::::::::::*/
h1 a:visited,
h1 a{
	color:#01b0f0;
}

サンプルページ
こんな感じになります。次回エントリにつづきます。