html,css（違う端末で作業するための準備）

メタ情報（編集画面で確認）



スマホ対応時必須

リセット

@charset "UTF-8";
/* CSS Document *//*reset*/
html,body,h1,h2,h3,h4,h5,h6p,dl,dt,dd,ul,li,small,header,nav,footer,main,section{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
margin:0;
padding:0;
line-height:1.0;
}

ul,li{list-style:none;}

a{text-decoration:none;}

img{vertical-align:bottom;
}

可変フォントサイズ
html{font-size:16px;}
p{font-size:1.2rem;}/*フォントサイズは１６px * 1.2*/
★remは最上位のフォントサイズを基準、emは親要素のフォントサイズを基準とする

ベンダープレフィックス(Can I Useで調べてPartial supportのときにつける)
例
.sample{
-webkit-transform:rotate(45deg);chrome,Safari,opera向け
-ms-transform:rotate(45deg);IE9向け
transform:rotate(45deg);本来のプロパティ
}

他要素floatによる回り込み防止(P100,P136)
clear:both;

画像代用プレスホルダー
Placehold.it - Quick and simple image placeholders

flexbox(P157)

セクション関連の新要素P160〜

コンテンツモデルP170〜

その他の新要素（time,ruby,mark,video,audio）P177〜

メディアクエリ
/*タブレットサイトのレイアウト*/
@media screen and (max-width:959px){

}


/*スマホサイズのレイアウト*/
@media screen and (max-width:767px){


}

リンクに使う擬似クラス
:link 未訪問リンク
:visited訪問済みリンク
:hoverホバー時リンク
:activeマウスを押しているとき
:focusファーカス時

擬似要素(before,after,nth-childなど)
P84〜86、P267〜

CSS優先順位（P８７）

background-position(P93)

フォームP108〜

CSS3プロパティ（光彩、グラデーションなど）P276〜

background-sizeP286