HTML5でコーディングするとき絶対しておいたほうが良い準備
：html5shiv, reset css などHTML5でコーディングするときに必ずといってもいいほど必要な記述を紹介します。IEを対象ブラウザにする場合はとくに…!
おはこんばんちわ、あなたのわたしのやのっぱです(´・ω・｀)おほー
最近、HTML5で記述することも多くなってきたのではないでしょうか？
初めてのHTML5！といった記事を書こうとおもったのですが、収まり効かなくなりそうなので
小出しにいたします。
今回は準備編です！
HTMLを勉強したてでHTML5はまだよくわからない！
でもなんだか最新ですごそう！使ってみたい！
そんな声が聞こえてきます（幻聴）
というわけで、初心者がよく抜けている【記述前にする準備】を紹介するよ(´・ω・｀)ｂ
まずは、え？なんの準備よ？ってお話ですが、HTML5はモダンブラウザはほぼ対応しています！、しかしながらIEはIE8以前は対応していません。またまたお前かIEェ….
どういうことかといいますと、新しく追加されたタグを認識しないのです。articleとかsectionとか…
なので、IEたんにこれはタグですよ～、箱なんですよ～、ブロック要素なんだよ～と教えてあげなければいけません。
これが初心者さんは意外と知らなくて、IEテストしたときにあれ？めっちゃ崩れてる！あわわっ！！
という場面をよく見かけます。
それではIEにタグを教えてあげましょう！
IEにHTML5をある程度対応させるおまじない
これを
<!--[if lt IE9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
head内に貼り付けます。
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css" media="all"> <!--[if lt IE9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- ↑これです --> </head> <body> </body> </html>
これでIEに新要素のタグをある程度ブロック要素として認識してくれます。（中には対応していないものもあり）
ついでにHTML5対応のreset.cssも載せておきます。
resetせずに書く方は無視してください。
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;
vertical-align: baseline;
background:transparent;
}
html {
overflow: inherit;
height: 100%;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block;
}
body {
font-family: "メイリオ","Meiryo", "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", Osaka, sans-serif;
color: #333333;
font-size: 62.5%;
line-height: 1.6;
letter-spacing:0;
-webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4, h5, h6, p, td, th, address {
font-weight: normal;
font-size: 1.2em;
}
ol,ul {
list-style: none;
}
fieldset,img {
border: 0;
}
img {
vertical-align:top;
}
table {
width:100%;
border: 0;
border-collapse: collapse;
border-spacing: 0;
}
th, td {
text-align:left;
vertical-align:top;
}
caption,th {
text-align: left;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style: normal;
font-weight: normal;
}
sup {
font-size:62.5%;
vertical-align: text-top;
}
基本は押えていますが、作る内容によって追加したり色々いじります。
とりあえず！ということでこれをreset.cssとして貼り付けておくと良いでしょう。
HTML5で記述するまえに、こういった準備をして自分なりに出来上がったものをテンプレートとして保存しておくことをおすすめします。
あと個人的にresetはしておいたほうが良いと思います。
多人数で編集するときなど、なんでここでlist-style入んねん！！！くそっ！
などとなることもあるからですね。
それでは、よきコーディングライフを～(´・ω・｀)