Tips

HTML5 SEMANTICS HTML5テンプレート コピペで簡単 【入門編 第7回】

HTML5 SEMANTICS HTML5テンプレート コピペで簡単 【入門編 第7回】

お手軽HTML5テンプレート

これからHTML5を始めたいという方のためのHTML5のテンプレートを用意しました。
コピー&ペーストですぐに始めたい方必見です。

コピペでいこう!

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sakc.jp staff blog</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
article,aside,dialog,figure,footer,header,hgroup,menu,nav,section {display: block;}
</style>
<link rel="stylesheet" href="css/style.css" media="all">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="js/script.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>

新規追加タグに対するブロック指定

要素を大別するとブロック要素、インライン要素の2つに分類されてきました。
HTML5では対象となるコンテンツごとに分類するコンテンツモデルという概念に変わりました。

HTML5で新しく追加された要素は、その新要素に未対応のブラウザの場合、インライン要素のように表示されます。
ですので、あらかじめスタイルを指定する必要があります。
このテンプレートでは、displayの値(デフォルトはinline)をblockに指定しています。

linkタグも用意してありますので、css/配下にstyle.cssというファイルを作成して下さい。

googleapisのjQueryを指定

jQueryをダウンロードして、サイトに設置するのも良いのですが、最近はgoogleへの直接リンクがはやっているようです。
このテンプレートでは、var1.8.1にリンクしています。

jQueryの最新を調べたい場合は以下をご覧ください。
GoogleライブラリAPI#jQuery

javascriptファイルの指定もあり、js/配下にscript.jsというファイルを作成して下さい。

IE対応

HTML5の規格策定に参加していなくて対応も遅いIEの対応用のスクリプトファイルも読み込んでいます。
IEに関してはかなり見た目が変わりますが、inlineからblockに指定してある新規追加タグもこれで対応できます。
IEはヴァージョン10より対応するようですが、果たしてどこまで対応するのか不安が残ります。
現在は9よりも下のバージョンに対するタグが記述されています。

最後に

HTML5もはやってきていますが、シェアをとっているIEに関してはまだ現状未対応でかつ昔のブラウザ対応という難題が降りかかります。
にしても最新技術は楽しいので、このテンプレートを利用して、是非HTML5にチャレンジして下さい。

HTML・CSSリファレンス 連載はこちら!

HTML・CSSリファレンス 連載目次

Recent News

Recent Tips

Tag Search