HTML5テンプレート+JSライブラリの紹介
そろそろ長袖の上に上着がないと寒くなってきました。汗をだらだらかくような暑さは好きで耐えられるんですが、寒さにはかなり弱いので、すでにはやく春がきてほしいと願っております。。。
さて今日はHTML5でサイトを構築する際のテンプレートみたいなものをまとめてみました。まだまだIE6やIE7を完全に捨ててしまうのは無理な場合も多いので、最低限このくらいまで準備しておけば、レガシーブラウザまでなんとか対応できるかな？というJSライブラリを利用しています。
「この記述は何？」って思われそうなところは、各ファイル内にちょこっとコメントをつけています。
今回利用しているJSライブラリの紹介はテンプレートファイル内に書き込んでいるのでそちらを参考にしてください（また時間があるときに記事にまとめようかな？）。
index.html
<!DOCTYPE html>
<!-- IEのバージョンによってhtmlタグを振り分け、ハックなしにCSSを対応させるための記述 -->
<!--[if lt IE 7 ]> <html class="ie6" class="no-js"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7" class="no-js"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8" class="no-js"> <![endif]-->
<!--[if (gt IE 8)|!(IE)]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="copyright" content="Copyright (C) detelu all right reserved">
<!-- スマホ用にviewportを設定 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- mobile safariで電話番号らしき数字にかってにtelリンクがはられるのを無効に設定 -->
<meta name="format-detection" content="telephone=no">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="index" href="/">
<link rel="stylesheet" media="screen" href="css/styles.css">
<link rel="stylesheet" media="print" href="css/print.css">
<!--[if lt IE 9]>
<script src="js/ie9.js"></script>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->
<script src="js/modernizr.js"></script>
<script src="js/jquery.js"></script>
<script src="js/script.js"></script>
<script>
/*
google analyticsの読み込み
var _gaq = _gaq || [];_gaq.push(['_setAccount', 'google-analyticsのサイトID']);_gaq.push(['_trackPageview']);
(function() {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();
*/
</script>
</head>
<body>
<div id="header-container">
<header class="wrapper">
<h1 id="logo"><img src="img/logo-trans.png" width="125" height="75" alt ="DETELU"></h1>
<nav id="topnav">
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">HOME</a></li>
</ul>
</nav>
</header>
</div>
<div id="topicpath" class="wrapper">
<a href="#">ABOUT</a> > <a href="#">BLOG</a> > HTML5テンプレート
</div>
<div id="main" class="wrapper">
<article id="contents">
<header>
<h1 class="txt30">HTML5テンプレートについて</h1>
<p>このテンプレートはHTML5を利用する際の準備メモがわりで、<a href="http://www.initializr.com/" class="newopen">Initializr</a>のファイルを参考にカスタマイズしたものです。(2011-11-11)</p>
</header>
<article>
<header>
<h1 class="txt24">HTML5を使うための初期準備</h1>
<p>HTML5を利用するには少し準備が必要です。</p>
</header>
<h2 class="txt18">HTML5とは？</h2>
<p>HTML5は最近のWeb技術にあわせて、タグ要素が追加等されたHTMLの最新版にあたるものです。レガシーブラウザではHTML5の新しいタグが認識できないため、そのままでは利用することができません。この問題はJavascriptを利用して解決することができます。</p>
<h2 class="txt18">レガシーブラウザでHTML5のタグを認識させるには？</h2>
<p>レガシーブラウザでHTML5のタグを認識させるためには、JSライブラリを利用するのが最も簡単な対処方法です。</p>
<p>有名なものでは「<a href="http://code.google.com/p/html5shiv/" class="newopen">html5shiv</a>」というJSライブラリがあり、これをHEAD内に読み込むだけで、レガシーブラウザでもHTML5のタグを認識させることができます。</p>
<h2 class="txt18">認識させるだけではレイアウトが崩れる</h2>
<p>HTMLタグはそれぞれ初期要素を持っています。例えばHTML5で追加されたarticleタグはブロック要素です。ですが、JSライブラリを利用するだけでは、HTML5に対応していないブラウザはacticleタグをブロック要素とは認識してくれません。この要素を持たせるためにCSSで指定する必要が有ります。</p>
<code>
article {
display:block;
}
</code>
<p>HTML5の各タグの初期要素追加し、各ブラウザの見栄えの差を整えるためのリセット用のCSSが、下記ページで紹介されています。これを利用すれば、HTML5に対応している・いないに関わらず、見栄えは変わらないようになります。</p>
<a href="http://html5doctor.com/html-5-reset-stylesheet/" class="newopen">HTML5 Reset Stylesheet | HTML5 Doctor</a></p>
</article>
<article>
<header>
<h1 class="txt24">JSライブラリの紹介</h1>
<p>HTML5でサイトを構築する際によく利用するJSライブラリを紹介します。</p>
<ul>
<li><a href="#html5shiv">html5shiv</a></li>
<li><a href="#EI9">EI9.js</a></li>
<li><a href="#DDPNG">DD_belatedPNG</a></li>
<li><a href="#Modernizr">Modernizr</a></li>
<li><a href="#css3-mq">css3-mediaqueries.js</a></li>
</ul>
</header>
<h2 class="txt18" id="html5shiv">『html5shiv』</h2>
<dl>
<dt>機能</dt>
<dd>HTML5で追加されたタグに対応していないブラウザにタグを認識させてくれます。</dd>
<dt>ダウンロード先</dt>
<dd><a href="http://code.google.com/p/html5shiv/" class="newopen">http://code.google.com/p/html5shiv/</a></dd>
</dl>
<h2 class="txt18" id="EI9">『EI9.js』</h2>
<dl>
<dt>機能</dt>
<dd>HTML5で追加されたタグに対応していないブラウザにタグを認識させ、さらにIEの「position:fixed」「透過png」等利用できるようになります。</dd>
<dt>ダウンロード先</dt>
<dd><a href="http://code.google.com/p/ie7-js/" class="newopen">http://code.google.com/p/ie7-js/</a></dd>
</dl>
<h2 class="txt18" id="DDPNG">『DD_belatedPNG』</h2>
<dl>
<dt>機能</dt>
<dd>IE9.jsでは透過pngのbackground-repeatが利用できません。もしbackground-repeatを利用したい場合はこちらを利用しましょう。</dd>
<dt>ダウンロード先</dt>
<dd><a href="http://www.dillerdesign.com/experiment/DD_belatedPNG/" class="newopen">http://www.dillerdesign.com/experiment/DD_belatedPNG/</a></dd>
</dl>
<h2 class="txt18" id="Modernizr">『Modernizr』</h2>
<dl>
<dt>機能</dt>
<dd>ブラウザのHTML5やCSS3の対応状況を検出してくれます。これを利用することで「localStorageに対応していない場合はメッセージを表示する」等の処理が簡単にできます。また「<a href="http://code.google.com/p/html5shiv/">html5shiv</a>」「<a href="https://github.com/scottjehl/Respond">respond.js</a>(IE8以下でもMedia Queriesを利用することができます。)」「<a href="http://yepnopejs.com/">yepnope.js</a>(各ブラウザHTML5のAPIの対応ごとに読み込むJSファイルを振り分けることができます。Modernizrで利用する場合はModernizr.loadを利用します。)」を含んだ状態でダウンロードできます。</dd>
<dt>ダウンロード先</dt>
<dd><a href="http://www.modernizr.com/">http://www.modernizr.com/</a></dd>
</dl>
<h2 class="txt18" id="css3-mq">『css3-mediaqueries.js』</h2>
<dl>
<dt>機能</dt>
<dd>CSS3 Media Queriesに対応していないブラウザでもCSS3 Media Queriesを利用できるようになります。</dd>
<dt>ダウンロード先</dt>
<dd><a href="http://code.google.com/p/css3-mediaqueries-js/" class="newopen">http://code.google.com/p/css3-mediaqueries-js/</a></dd>
</dl>
</article>
</article>
<aside id="sidebar">
<h1>MENU</h1>
<nav class="sidebar-parts">
<h2>BLOG カテゴリ</h2>
<ul>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
</ul>
</nav>
<nav class="sidebar-parts">
<h2>おすすめ記事</h2>
<ul>
<li><a href="#">IE6ってなんですか？</a></li>
<li><a href="#">○○○○○○○○○</a></li>
</ul>
</nav>
</aside>
<a href="#header-container" id="pagetop">▲</a>
</div>
<div id="footer-container">
<footer class="wrapper">
<section>
<h1>CONTACT</h1>
<p>○○○@○○○.com</p>
</section>
<p><small>Copyright (C) <a href="http://www.detelu.com">detelu</a> all right reserved</small></p>
</footer>
</div>
<!--[if IE 6]>
<script src="js/DD_belatedPNG.js"></script>
<script>DD_belatedPNG.fix('#footer-container');</script>
<![endif]-->
</body>
</html>
style.css
/*reset 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,figure,footer,header,hgroup,menu,nav,section,
menu,time,mark,audio,video { border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0; }
article,aside,figure,footer,header,hgroup,nav,section { display:block; }
ul,li { list-style:none; }
blockquote,q { quotes:none; }
blockquote:before,blockquote:after,q:before,q:after { content:none; }
a { font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0; }
ins { background-color:#ff9;color:#000;text-decoration:none; }
mark { background-color:#ff9;color:#000;font-style:italic;font-weight:bold; }
del { text-decoration:line-through; }
abbr[title],dfn[title] { border-bottom:1px dotted #000;cursor:help; }
table { border-collapse:collapse;border-spacing:0;font-size:inherit;font:100%; }
hr { display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0; }
input,select { vertical-align:middle; }
a img,a:link img,a:visited img { border:none; }
a,a:focus,a:active { outline:none; }
html { overflow-y:scroll; }
/*base css*/
body {
font-size: 13px;
line-height: 1.8;
font-family:Verdana,'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック','MS PGothic',Geneva,Arial,sans-serif;
background: #fff;
color: #444;
letter-spacing: 0.5px;
/*リンクをタップした際にハイライトされる色を変更(iphone only)*/
-webkit-tap-highlight-color: rgba(0,0,0,0.3);
}
.ie7 body,.ie6 body {
font-size:small;
font:x-small;
}
.wrapper {
margin: 0 auto;
width: 940px;
}
#header-container{
height:130px;
border-bottom: 3px solid #ccc;
background: #999;
color: #fff;
}
#logo {
margin-top:30px;
float:left;
}
#topnav {
float:right;
margin-top:70px;
}
#topnav ul li{
display:inline;
color: #fff;
}
#topnav ul li a {
color: #fff;
}
.topnav {
float:right;
}
#topicpath {
padding: 30px 0;
}
#main {
overflow: hidden;
}
#contents {
float: left;
width: 66%;
}
#contents h1 {
padding: 10px 0;
}
#contents h2 {
padding: 10px 0;
margin: 10px 0;
border-bottom: 1px solid #ccc;
}
#contents h3 {
padding: 10px 0;
}
#contents p {
padding: 10px 0;
}
article {
margin-bottom: 30px;
}
#sidebar {
float: right;
width: 30%;
background: #efefef;
overflow:hidden;
}
#sidebar h1 {
padding: 20px;
background: #999;
color: #fff;
}
.sidebar-parts {
margin: 20px;
overflow:hidden;
}
#footer-container {
clear: both;
}
#pagetop {
display: block;
position: fixed;
right: 0;
top: 90%;
background: #444;
padding: 8px 12px;
color: #fff;
text-align: center;
text-decoration: none;
}
#footer-container{
margin-top:50px;
padding: 50px 0;
border-top: 3px solid #ccc;
background: #444 url(../img/bg.png) repeat-x;
color: #fff;
}
#footer-container a {
color: #fff;
}
/*Media Query*/
@media only screen and (max-width: 1000px) {
.wrapper {
width: 96%;
}
}
@media only screen and (max-width: 800px) {
#topicpath {
padding: 10px 0;
border-bottom: 3px solid #444;
}
#contents {
float: none;
width: 100%;
}
#sidebar {
float: none;
width: 100%;
}
.sidebar-parts {
float: left;
width: 41%;
margin: 0;
padding: 20px;
}
#pagetop {
display: none;
}
}
@media only screen and (max-width: 480px) {
/*font-sizeを固定する(iphone向け)*/
body {
-webkit-text-size-adjust: none;
}
#header-container {
height: 150px;
}
#logo {
float: none;
margin-top:0;
padding: 10px;
text-align: center;
}
#topnav {
float:none;
margin-top:0;
padding-left: 10px;
}
.sidebar-parts {
float: none;
width: 90%;
}
}
/*スマートフォン用の画像のぼやけ対策(指定するサイズの2倍の画像を用意)*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5){
/*
background: url(../img/logo_sp.png) no-repeat;
-webkit-background-size: 200px 160px;
*/
}
/*css unit*/
.txt10 { font-size:77%; }
.txt11 { font-size:85%; }
.txt12 { font-size:93%; }
.txt13 { font-size:100%; }
.txt14 { font-size:108%; }
.txt16 { font-size:123.1%; }
.txt18 { font-size:138.5%; }
.txt20 { font-size:153.9%; }
.txt21 { font-size:161.6%; }
.txt22 { font-size:167%; }
.txt24 { font-size:182%; }
.txt26 { font-size:197%; }
.txt30 { font-size:231%; }
.txt39 { font-size:300%; }
.clearfix:before,.clearfix:after { content:"\0020";display:block;height:0;visibility:hidden; }
.clearfix:after { clear:both; }
.clearfix { zoom:1; }
.cl { clear:both; }
print.css
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; }
a, a:visited { color: #444 !important; text-decoration: underline; }
script.js
$(function(){
/*WindowOpen*/
$("a.newopen").click(function(){
window.open($(this).attr("href"));
return false;
});
/*smoothscroll*/
$('a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length && target;
if (target.length) {
var targetOffset = target.offset().top - 10;
$('html,body')
.animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});