去年、html5を覚えてサイトを作成していたが、結構忘れている自分がいる。
つまり、まだ自分のスキルとして備わってないってこと だろう。
毎度本をみてマークアップをスタートしてるけど、自分のブログに残しておこうと思う。
まあ、結局ここからコピーするんだろうけど・・・。
嫌いなIE対応の記述もついでに。
参考程度に共有します。
間違いがあればご指摘ください。
ベース
まずはまとめです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>サイトの名称</title>
<meta name=”description” content=”サイトの説明文” />
<meta name=”keywords” content=”サイトのキーワード” />
<link rel="stylesheet" type="text/css" href="css/○○○.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper"><!--サイト全体-->
<header>
ヘッダーエリア
</header>
<article><!--コンテンツエリア-->
<h1>１</h1>
<h2>１－１</h2>
<p>ここに本文</p>
<h2>１－２</h2>
<p>ここに本文</p>
</article>
<footer>
フッターエリア
</footer>
</div><!--wrapper-->
</body>
</html>
こんな感じでしょうか。
間違いは・・・ないかな・・・？
DOCTYPE宣言
<!DOCTYPE html>
まずはお約束のDOCTYPE宣言です。
「これからhtmlでソースを書いてくよ~。形式は○○だよ~。」ってことをブラウザ？に理解させるためみたいだけど、
『いや、それくらい言われなくてもわかれよ。。。』ってのが最初勉強したときの印象。
まあ、自分が知らない存在意義があるのだろう。
以前に比べて簡潔になったようです。
「ようです」ってのは、僕がhtmlを覚えたのが比較的最近で、初めて手に取った本が「HTML５」だったから。
そりゃあ最新の本を手に取りますよね？
ということで、以降も、HTML4やXHTMLとの比較はあまり掘り下げることはできません(；一_一)
実際に下記のXHTML等と比べると、ものすごーく簡潔になってるのがわかります。
それも「え？」ってレベルで。
例）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
書かなくても作動するらしいけど、html5になって簡潔になったので難なくかけますね。
lang属性
<html lang="ja">
日本語のサイトだよってことを教えます。まあ問題なし。
meta
<meta charset="UTF-8" />
<title>サイトの名称</title>
<meta name=”description” content=”サイトの説明文” />
<meta name=”keywords” content=”サイトのキーワード” />
「meta」は「このサイトについての情報」ってとこでしょうか。
charset
文字コードの指定ですね。
このcharsetは早めに指定すること。
ってことで必ずtitleよりも上に書きます。
タイトルが文字化けしてちゃ先が思いやられるので。
ここではUTF-8としてますが、たぶん大抵は良いと思います。
description
サイトの説明ですね。
keywords
キーワードの指定。
cssファイルの読み込み
<link rel="stylesheet" type="text/css" href="css/○○○.css" />
外部ファイルとして読み込むやり方。 ○○○○に読み込むスタイルシート名を指定する。
コンテンツ
<div id="wrapper"><!--サイト全体-->
<header>
ヘッダーエリア
</header>
<article><!--コンテンツエリア-->
<h1>１</h1>
<h2>１－１</h2>
<p>ここに本文</p>
<h2>１－２</h2>
<p>ここに本文</p>
</article>
<footer>
フッターエリア
</footer>
</div><!--wrapper-->
あとはヘッダーとコンテンツのarticleとフッター。
＜section＞やら＜article＞やら＜aside＞やらとかありますが、すべての使い方が正確に出来ているかと言うとかなり自信ない。
特に＜section＞＜article＞の明確な違いがイマイチ(；一_一) 今後ブログでも学習していきます。
とりあえずここのソースではこんな感じに。
IE８以下の対策
さてさて、最後はIE対応です。
クソったれブラウザのIEさんは、どうやらHTML5とcss3を受け入れてくれません。
それはそれは酷いもんで・・・。へへっ。
まだまだIE８は使ってる方もいらっしゃるので、仕事関係だとなんとか表示させないといけないですよね。
なので、IEさんにHTML5を理解させてあげるように記述します。
またこれも後日詳しく書いてみたいのですが、今回ここでは【html5shiv】というjavascriptで行ないます。
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<br /><![endif]-->
とりあえずこれでIE8,7も対応できます。
ここでは、直接読み込む方法です。
ただし、最近はアップロードするやり方が推奨されてるのかな？
現状はこちらでも大丈夫のようですが。
おまけ
ただね、勝手なこと言うと、デザイナーさん達ががんばって対応されてますが、それを繰り返してる限りIE8以下のシェアはなかなか減らないと思うんですね。
だって見れちゃうんだもん。
はっきりIE８以下は切り捨てちゃったほうが良いんでは？
あなたのブラウザでは見れませんよー。って。
見れないサイトを増やさないと・・・って・・・やり方はよくないよねー(笑)だよねぇ。。
まあ、素人の僕が言ってもしょうがないんですけど(；一_一)