読者です 読者をやめる 読者になる 読者になる

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;}/*フォントサイズは16px * 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優先順位(P87)


background-position(P93)

フォームP108〜

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


background-sizeP286