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

iPhoneやAndroidなどのスマートフォンをはじめ、PCサイトでもHTML5によるWEB制作を行う機会が増えてきました。
結構その場しのぎで記述することが多かったので、簡単にまとめたサイトを作りました。ちょっとした時のコピペ用ですので、本格的なコーディングのことは書いていません。専門書や学校で教わるほうが確実です。
また、サイト内で使われている用語についても、知り合い間で伝わる言い方をしているかもしれませんがスルーしてください。

簡易初期設定

HTMLの書き出しとCSSの初期設定(ブラウザリセットやちょっとした設定)です。
コピペして使ってもらっても構いませんが、簡易ですので、必要に応じて設定を付け加えてください。

HTML5ベース(最小限)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タイトル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
  コンテンツ
</body>
</html>

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;
}

body {
color:#333;
line-height:1.0;
text-align:center;
zoom:1;
}

br {letter-spacing:0;}
ul, li {list-style:none;}
img, a img {border:none; text-decoration:none; vertical-align:top;}
table {border-collapse:collapse;}

.cf:before,
.cf:after {content:""; display:table;}
.cf:after {clear:both;}
.cf {zoom:1;}

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;}