HTML5やCSS3とか制作現場でのこと

モダンブラウザ(主に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を使用しないのであれば省略