月別: 2012年11月

HTML5で書く時

去年、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>1</h1>
<h2>1-1</h2>
<p>ここに本文</p>
<h2>1-2</h2>
<p>ここに本文</p>
</article>
<footer>
フッターエリア
</footer>
</div><!--wrapper-->
</body>
</html>

こんな感じでしょうか。
間違いは・・・ないかな・・・?

DOCTYPE宣言

<!DOCTYPE html>

まずはお約束のDOCTYPE宣言です。
「これからhtmlでソースを書いてくよ~。形式は○○だよ~。」ってことをブラウザ?に理解させるためみたいだけど、
『いや、それくらい言われなくてもわかれよ。。。』ってのが最初勉強したときの印象。
まあ、自分が知らない存在意義があるのだろう。

以前に比べて簡潔になったようです。
「ようです」ってのは、僕がhtmlを覚えたのが比較的最近で、初めて手に取った本が「HTML5」だったから。
そりゃあ最新の本を手に取りますよね?

ということで、以降も、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>1</h1>
<h2>1-1</h2>
<p>ここに本文</p>
<h2>1-2</h2>
<p>ここに本文</p>
</article>
<footer>
フッターエリア
</footer>
</div><!--wrapper-->

あとはヘッダーとコンテンツのarticleとフッター。
<section>やら<article>やら<aside>やらとかありますが、すべての使い方が正確に出来ているかと言うとかなり自信ない。
特に<section><article>の明確な違いがイマイチ(;一_一) 今後ブログでも学習していきます。
とりあえずここのソースではこんな感じに。


IE8以下の対策

さてさて、最後はIE対応です。

クソったれブラウザのIEさんは、どうやらHTML5とcss3を受け入れてくれません。
それはそれは酷いもんで・・・。へへっ。
まだまだIE8は使ってる方もいらっしゃるので、仕事関係だとなんとか表示させないといけないですよね。
なので、IEさんにHTML5を理解させてあげるように記述します。
またこれも後日詳しく書いてみたいのですが、今回ここでは【html5shiv】というjavascriptで行ないます。

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<br /><![endif]-->

とりあえずこれでIE8,7も対応できます。
ここでは、直接読み込む方法です。
ただし、最近はアップロードするやり方が推奨されてるのかな?

現状はこちらでも大丈夫のようですが。

おまけ

ただね、勝手なこと言うと、デザイナーさん達ががんばって対応されてますが、それを繰り返してる限りIE8以下のシェアはなかなか減らないと思うんですね。

だって見れちゃうんだもん。

はっきりIE8以下は切り捨てちゃったほうが良いんでは?
あなたのブラウザでは見れませんよー。って。
見れないサイトを増やさないと・・・って・・・やり方はよくないよねー(笑)だよねぇ。。

まあ、素人の僕が言ってもしょうがないんですけど(;一_一)