STACKSTOCK

日々の出来事や感じた事、学んだ事を蓄積(STOCK)して積み上げ(STACK)てます

マークアップをしれっとhtml5にする体勢を整える

2013年03月19日

イマドキのフロントエンドの方はhtmlのバージョンは何を使ってるんでしょうかね。html5はまだ早いとか覚える理由がないという声も聞くとか聞かないとか。

誰かが言ってるのを対面で聞いたわけじゃなく、誰かがブログとかサイトとかの記事で「そう言ってる人がいる」って言うのを読んだけでさも本当に誰かが言ってると思ってしまう現象は何とかしないとな、と思うんですがそれはまた別のお話ですね。

そんなhtmlのバージョンですが、イマドキのスタンダードは知りませんが僕は基本的にhtml5で書いています。指定があれば別ですけど、僕はhtml5で書くデメリットは別にそんなにないんじゃない？と思ってるので、html5で書くことを躊躇している人がいるなら「そんなにコワクナイよ」って言いたくてちょっと書いてみようかと思います。

ただ、僕的にかなり重要な部分だと思っている文章の構造化についてはまだ「みんなが思い思いにやっている」段階なのかなぁと思うので、とりあえずここでは解説しない感じにしております。

なので、ここでは一旦「何はともあれhtml5で書くこと自体は何も難しいことじゃない」ということだけに注目しています。

もしちゃんとしたいと思う方はこちらなどがステキかと思いますのでどうぞ。

本当は「文章の構造化を考えなければhtml5を使う意味がないんじゃないか」とか何とか思ってる派なんですが、それでも使う人が増える事で変わる何かもあるんじゃないかと思うので、誤解を恐れず的なノリで書いてみます。

目的

html5でマークアップすることで、人にも機械（主にクローラ等）にも優しいWebサイトを作りたいです。

ただ、人がちゃんと閲覧できることが大前提なので、主要ブラウザでの閲覧は正常に出来るようにしたいです。

この条件を満たすよう、とりあえず次に作るページをしれっとhtml5で書いてみる感じになるようにしたいと思います。

html5の最低限テンプレート

とりあえずこうすれば良いんでしょ？なテンプレートです。

<DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8>
  <title>タイトル</title>
</head>
<body>
  <h1>タイトル</h1>
</body>
</html>

DOCTYPE、html、文字コードの指定がかなり短くなりましたね。

IE対応

IEのちょっと下のバージョンはhtml5で出てきたタグを認識してくれません。なので、htmlとcssに少し記述を追加します。

html
<!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

css
section, article, aside, footer, header, nav, hgroup {
  display:block;
}

なお、htmlに記述するscriptは、html5タグ非サポートなブラウザにhtml5タグを認識させるスクリプトなので、cssでhtml5タグをセレクタとして記述している場合はそのcssファイルの呼び出しよりも先に記述する必要がありますのでお気をつけあそばせ。

完成！

たったこれだけです。基本的にはこれだけでhtml5でのマークアップが完了です。特に難しくも何ともないですね。

もうちょっと他の事も対応したいと思う場合は、以前に書いたスライドがありますので見てもらえるともちょっと詳しく知ることが出来るかもですよ。

あとは、冒頭でも言いましたが、次は文章の構造化について考えたいですね。そんな時は先ほども紹介しましたが、WEBCRE8.jp の優さんがかなりアツい感じなので見てみては如何でしょうか。

おわりに

あ、ここから先は僕が思ったことをグダグダ書いてるだけなので特に見る必要はないと思いますよ。ホントグダグダだから。

なんか、サラッとhtml5で書く時にどうすれば良いかを書きたかっただけなんだけど、思いの外思想的な話が頭をよぎってしまって随分長くなってしまいました。

でもさー、htmlをマークアップする人は考えておいた方が良いと思うんですよね−、知っておいた方が良いと思うんですよね−。

お仕事的に「html5で書けばこんな効果があってこんなに売り上げが変わります！」って提案とかは結構難しいなぁと思ってるからそれ単体で単価が変わるものではなくて、「Web制作のプロなら当然対応してて然り」みたいな物になるんじゃないかなぁと思うんです。

でも、それにはワイヤーを作るディレクターもデザインを作るデザイナーもある程度理解した上で作らないと実現できないから、コーダーだけ知識があれば良いってお話にはならないんですよね。

2011年のWordCampで堀内さん(@horiuni)が言った言葉が今でも心に残ってるわけですが、プロは自分の作業範囲のことだけを考えてるだけじゃダメなんですかね、どうですかね。

「最強のチームってのはプログラマ・コーダ−・デザイナーの3人が各自の領域よりも少し多い範囲をカバーできるチーム」

僕は「デザイナーがコーダーに分かってほしいと思う事」がよく分かってないかも知れないので、誰か教えて下さいと思います。

他にこんな事も書いてます

この記事の分類

種類: Web制作
ジャンル:

FBでコメント

コメント1つ

  1. @Toro_Unit says:
    2013年3月19日 at 12:06

    “SS | マークアップをしれっとhtml5にする体勢を整える” http://t.co/4iAd4rzyn7

    Reply

トラックバック/ピンバックはありません。