モダンブラウザ（主にChrome）のシェア拡大、それに伴うInternet Explorerの利用減少、そしてEdgeのChromium化…。
iPhoneやAndroidなどのスマートフォンをはじめ、PCサイトでもHTML5によるWEB制作が主流となっています。
ブラウザが対応してきたことだけでなく、SEO対策や管理の簡便化にレスポンシブWEBデザインは重要なため、HTML5＋CSS3でのコーディングは一般化しています。
HTML5とCSS3等について、簡単にまとめたサイトを作りました。
面倒くさい時のコピペ用ですので、本格的なコーディングのことは書いていません。解説もほぼありません。あしからず。
また、サイト内で使われている用語についても、知り合い間で伝わる言い方をしているかもしれませんがスルーしてください。
厳密な記述方法、用語などについては、専門書や学校で教わることをおすすめします。
簡易初期設定
HTMLの書き出しとCSSの初期設定（ブラウザリセットやちょっとした設定）です。
コピペして使ってもらっても構いませんが、簡易ですので、必要に応じて設定を付け加えてください。
HTML5ベース（最小限）
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <meta name="format-detection" content="telephone=no"> <title>タイトル</title> <meta name="description" content="抜粋内容"> <link rel="stylesheet" href="style.css"> </head> <body> コンテンツ </body> </html>
5行目・・・ビューポート
6行目・・・iPhone等で電話番号と認識される文字列を自動でリンクにしない
CSSベース（初期化含む）
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,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}
br {letter-spacing:0;}
ul,li {list-style:none;}
img,a img {border:0; text-decoration:none; vertical-align:top;}
mark {background:#ff0; color:#000;}
b,strong {font-weight:bold;}
table {border-collapse:collapse; border-spacing:0;}
td,th {padding:0;}
hr {box-sizing:content-box; height:0;}
button,input,optgroup,select,textarea {color:inherit; font:sans-serif; margin:0;}
button {overflow: visible;}
button,select {text-transform:none;}
button,html input[type="button"],input[type="reset"],input[type="submit"] {-webkit-appearance:button; cursor:pointer;}
input[type="checkbox"],input[type="radio"] {box-sizing:border-box; padding:0;}
textarea {overflow:auto;}
body {
color:#333;
line-height:1.0;
text-align:center;
zoom:1;
}
a {background-color:transparent; outline:0;}
a:link {color:#0000ff; text-decoration:underline;}
a:visited {color:#0000ff; text-decoration:underline;}
a:hover {color:#ff0000; text-decoration:none;}
a:active {color:#ff0000; text-decoration:none;}
/* Clearfix */
.cf:before,
.cf:after {content:""; display:table;}
.cf:after {clear:both;}
.cf {zoom:1;}
※Clearfix部分はfloatを使用しないのであれば省略