コーディング

サーバにアップするファイル名が基本同じなので、更新と更新前を分けるために、「index.html＋backup＋日付」という風にファイル名を変えて、上書きしないようにしてサーバに取っておく。（保証）
style.cssは「style＋日付_No.＋css」という風に変えるとわかりやすい。

memo　metaのサブスクリプションは100文字程度が好ましい。
keywordは３つくらいがよい。
faviconはキャッシュが残ってバグりやすいので最後にUPする。

HTMLは上から書き、チェッカーで検証する。
バグがあった場合の直し方は、上から一つずつ改善して、「保存→チェッカー」を繰り返して、１個ずつつぶしていく。入れ子のエラーはこうすると見つけやすい。

チェッカーでOKでたら、CSS効かせないでブラウザで確認する。

リセットCSS
1. リセットCSSの解説
CSSの書き方

リセットCSS

リセットCSSは育てていく。今は分けているが、WP化のことを考えると、スタイルシートのファイルは１本化するのがよいので、最初に記載する。先生のお手本はこちら↓（20210816現在）

@charset "utf-8";


/* Reset
------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,th,td,select,header,nav,section,footer {
	margin: 0;
	padding: 0;
	color: #333;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}

address,em,i {
	font-style: normal;
}
strong,th,b {
	font-weight: normal;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
hr {
	display: none;
}
h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight: normal;
}
img {
	border: 0;
}
li {
	list-style-type: none;
}
small{
	font-size: 100%;
}
iframe {
	border: 0;
}


/*以下はリセットではないけど、style.cssの先頭に書く分*/

/* font
------------------------------------------------------------*/

body{
	font-size: 90%;
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
	-webkit-text-size-adjust: 100%;
}

/* link
------------------------------------------------------------*/

a{
	color: #333;
	text-decoration: none;
}
a:hover{
	color: #999;
}
a:link{}
a:visited{}
a:active{}

/* webfont
------------------------------------------------------------*/

@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
body {
	font-family: 'Noto Sans Japanese', sans-serif;
}

リセットCSSの解説

「 line-height 」の黄金比は1.6～1.8といわれている
「word-wrap」は変なところで改行しないように。逆に改行問題でみためずれたらこれのせいかも？その時はコメントアウトする
「box-sizing」はwidthの中にpaddingとborderを含める
「address」などはデフォルトで斜めになるフォントなので、まっすぐに
「strong」などはデフォルト太字なので、普通にする
「table」のところは、太字を廃止、隣接するセルのと罫線を重ねて、間をとらないようにする
「hr」は昔は罫線を引くタグだったが今は段落区切りの意味を持つ。たまに過去記事に入っていたりして、そのままだと見た目崩れの原因になるのでnoneにして表示させない。見た目として線が必要ならばCSSのボーダーで引けばよい。
hの大きさと太さをリセット
IEだとデフォルトで画像にボーダー入ってしまうので消す
リストのスタイルを消す
「small」タグの意味はHTML5からは著作権等を表す表記となったのでサイズをリセット
「iframe」はよそのサイトを表示させるSNSやgoogleMAPを読み込み場合に利用するが、デフォルトでボーダーあるので消す
「body」にかけたフォントサイズは自由
フォントファミリー：ヒラギノ角ゴ Pro W3＝win10からのデフォ、Hiragino Kaku Gothic Pro＝MAC用、メイリオ＝win7から、Meiryo＝同じくMAC用、ＭＳＰゴシック＝winXP、sans-serif＝デバイスのOSがなんであれ、とりあえずゴシックを読み込んで！という意味。
「-webkit-text-size-adjust: 100%」はiPhoneでリストやテーブルタグで起こるバグを回避するため
webfontは通信回線が良好な場合は、googleの大元フォントを読み込んで使ってね。ということ。つながってなければ、先ほど指定したフォントファミリーを使う
aタグの下線を無くす
ホバーはカーソル合わせたときなので、スマホには無い。PCの概念。