CSSのテンプレートを作成する際に、必ず入れていて便利だと思うものを紹介します。body要素に指定する事に関してはいろいろなところで語られているので、ここでは他のテーマなどのCSSを見ていて便利と思って取り入れているものなど。それ以外で私が始めに設定しておくHTMLタグとその設定です。
@charset “utf-8″; body { margin: 0; padding: 0; background-color: #ababab; color:#333; font-family: Arial, Helvetica, Verdana, “ヒラギノ角ゴPro W3″, “Hiragino Kaku Gothic Pro”, Osaka, “メイリオ”, Meiryo, “ＭＳ Ｐゴシック”, sans-serif; line-height: 1.5; }
次に、CSSを見ていると”Universal Reset”というグループ名で出てくる一般的なHTMLタグのデフォルトを変更する関係。設定内容はそのデザインでそれぞれなので、設定する先だけ見ていただければ良いかと思います。設定し忘れていて意図しない表示にならないようにするためのものです。
h1,h2,h3,h4,h5,h6 { line-height:1.6; }
p,li,dt,dl { line-height:1.6; }
p { margin:0 0 1em 0; }
ul li { list-style-type:none; }
a img { border:0; }
a:link {
color:#078D00;
text-decoration:none;
}
a:visited {
color:#189B12;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a:active {
color:#666;
}
blockquote{
margin-left:1em;
padding-left:1em;
border-left:2px solid #CCC;
color:#CCC;
}
pre{
width:100%;
padding:1em 0;
overflow:auto;
border-top:1px dotted #333;
border-bottom:1px dotted #333;
}
table{
width:100%;
border-spacing:2px;
margin:1.5em 0;
}
table th, table td{ padding:0.3em 0.75em }
blockquoteとpreは、ブログに特有かと思います。それ以外は、一般的な内容を設定しておきます。
最後に、classで指定しておくと便利なもの。これらはHTMLの特定要素をCSSで指定するのではなく、逆にHTML上でclassを指定することにより見た目を操作しようとするものです。
.hidden {
display: none;
visibility: hidden;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}
.clear {
clear: both;
}
HTMLを見ていてclass=”hideen”とかなっているだけで、レイアウトが分かるという意味では使い勝手が良いので、私は必ず入れてます。
あとは、clearfixハックも必ず入れてます。自分用のテンプレートとしてこのような設定を一回作っておけば、便利かと。
