- Last Modified: 2008年11月29日 18:49
このページは、株式会社技術評論社より刊行されている実践 Web Standards Design に記載しているソースコードのサンプルを呈示しています。 書籍該当部分と照合しやすいように前後の解説文も掲載していますが、あくまで照合用のため、適宜前後を省いたり内容を省略したりしています。 書籍を読みながら実際にサンプルを表示する際の補助資料として活用してください。
また、 XHTML ソースと CSS ソース、関連画像を含めた全サンプルの ZIP アーカイブ (3,104,743 Bytes) もダウンロードできます。 （ ZIP アーカイブには解説文は含まれていません。）
解説
base.css に要素の基本となるスタイルを定義していきます。
CSS
@charset "UTF-8";
/*======================================
1-1.Universal selector
=======================================*/
* {
margin: 0;
padding: 0;
line-height: 1.5;
color: #666;
font-weight: normal;
font-style: normal;
}
/*======================================
1-2.Structure Module
=======================================*/
body {
margin: 0 10px;
background: #e5e5e5 url(img/bg_stripe.gif);
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 13px;
*font-size: small; /* 352ページの「11/さまざまなブラウザでフォントの見栄えを揃えるCSSライブラリ」を参照 */
*font: x-small;
}
/*======================================
1-3.Text Module
=======================================*/
p,
address {
margin: 0.8em 10px;
}
h1,
h2,
h3 {
margin: 0.8em 10px;
line-height: 1.2;
}
h1 {
font-size: 180%;
}
h2 {
padding: 0.4em 0 0.8em 0;
color: #cd4730;
background: url(img/bg_line-dot.gif) left bottom repeat-x;
font-size: 120%;
}
h3 {
margin-bottom: 0;
color: #333;
font-size: 120%;
}
/*======================================
1-4. Hypertext Module
=======================================*/
a:link {
color: #00597c;
}
a:visited {
color: #7d94a4;
}
a:hover {
color: #cd4730;
}
/*======================================
1-5. List Module
=======================================*/
ul,
ol,
dl {
margin: 0.8em 10px;
padding: 1px 10px;
list-style-position: inside;
}
dt {
margin: 0.4em 10px;
color: #004171;
}
dd {
margin: 0 10px;
}
/*======================================
1-6. Forms Module
=======================================*/
form {
margin: 0.5em 10px;
}
fieldset {
padding: 0 10px 0.3em 10px;
border: 1px solid #eee;
}
legend {
margin-left: 1em;
padding: 0 10px;
font-size: 90%;
}
input {
font-size: 90%;
}
