リセットcss
とりあえずreset.cssを自分なりに考えて必要最低限にまとめたものです。
2012.07.18
reset.css
@charset="UTF-8" html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video{ margin: 0px; padding: 0px; -moz-box-sizing: border-box; box-sizing: border-box; font-family : 'Hiragino Kaku Gothic Pro', Arial, Latha; line-height: 1.5em; font-size: 14px; text-decoration: none; body { line-height:1; } article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; background:transparent; } ins { background-color:#ff9; color:#000; text-decoration:none; } mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; } table { border-collapse:collapse; border-spacing:0; } hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; }
各種説明
margin
外側の余白
箱の外をバンって広げてくれる。
padding
内側の余白
箱の中から文字に向かってバンって広げてくれる。
box-sizing
ボックスサイズの算出方法を指定
値にborder-boxを指定すると、widthとheightで指定する幅と高さがボーダーボックスに対して適用される。
font-famiry
フォントの種類を指定
フォントの種類はカンマ( , )で区切って複数の候補を並べることができる。
line-height
行の高さを指定する際に使用
文章の行間を調節する。
list-style: none
マーカー(行頭記号)を表示しない
font-size
フォントのサイズを指定
文字の大きさ
ブロックレベル・インラインレベル等の、要素の表示形式を指定する際に使用
text-decoration
テキストに下線・上線・打ち消し線を付けたり、点滅させる際に使用。
まあ線が出来るんだな。
display:block
ブロックレベル・インラインレベル等の、要素の表示形式を指定する際に使用
display:block を指定すると、ブロック要素として表示されるようになる
quotes:none;
内容(引用符)を生成しません。
content・・・・・・・・・・・・・・・・・・内容(コンテンツ)を挿入する
quotes・・・・・・・・・・・・・・・・・・・引用符を設定する
counter-increment・・・・・・・要素の連番(カウンタ)の値を進める
counter-reset・・・・・・・・・・・・要素の連番(カウンタ)の値をリセットする
border
ボーダーのスタイル・太さ・色をまとめて指定する際に使用
線をいじれるってこと。
border-collapseプロパティは、隣接するセルのボーダーを重ねて表示するか(collapse)、間隔をあけて表示するか(separate)を指定
vertical-align
行のなかでのテキストや画像などの縦方向の揃え位置を指定する際に使用
baseline
適用した要素のベースラインを親要素のベースラインに揃える(初期値)
middle
当該要素のベースラインから親要素のフォントサイズの小文字「x」の高さの半分だけ上に揃える
background:
背景色・背景画像に関するプロパティ設定。
transparent;
背景色を透過させる指定
center bottom"
要素内で背景画像を y軸の真ん中(50% と等価)・x軸の一番下(100% と等価)に表示する指定。
color
色の指定
色々な色。
font-style
フォントのスタイルを指定する際に使用
指定できる値 標準(normal)、イタリック体(italic)、斜体(oblique)
font-weight
フォントの太さを指定する際に使用
数値で指定
100、200、300、400、500、600、700、800、900でフォントの太さを指定します。太さが9種類用意されているフォントはあまりないため、数値を上下させても太さが変化しないことがある。標準の太さは400で、数値が小さくなるほど細く、大きくなるほど太くなる
キーワードで指定
normal・・・・・・・標準の太さです。(数値で400を指定した場合と同じ)
bold・・・・・・・・・一般的な太字の太さです。(数値で700を指定した場合と同じ)
lighter・・・・・・・相対的に一段階細くします。
bolder・・・・・・・相対的に一段階太くします。
cursor
マウスカーソルの形状を指定する際に使用
色々な種類がある。沢山あるのでググってください。
height
高さを指定
まあ高さの指定だわな。
width
幅の指定
幅の指定だわな。
今回のreset.cssはこんな感じにまとめてみました。色々外人の方がやってるので参考にしました。
次は「header」部分を細かくほっていきたいとおもいます。