徳島ホームページ制作・PHPシステム開発：shape DESIGN - シェイプデザイン｜ブログ

HTML5 と文書構造（アウトライン）について考えてみた。

2012年6月5日 07:16

おはようございます。

HTML5 でマークアップしてみてるのですが、なかなかいい感じです。
CSS のセレクタをうまく使うと相当すっきりします。

いろいろ調べつつって感じでやっていってるんですが、HTML5 って h1 タグいっぱい使っても大丈夫なんですね。
SEO的にどうなのか若干気になりますが…仕様としてそうなってるのでそうしていってますが（汗）

例えばなにかページを一枚作る場合、以下のようになったりします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>ほげほげのページ</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
 
<body>
  <header>
    <hgroup>
      <h1>ほげほげのページ</h1>
      <h2>ここはほげほげのページです。</h2>
    </hgroup>
    <nav>
      <ul>
        <li>メニュー1</li>
        <li>メニュー2</li>
        <li>メニュー3</li>
      </ul>
    </nav>
  </header>
 
  <article>
    <header>
      <h1>ページのタイトルとか入れちゃいます</h1>
      <h2>リード文とか入れちゃいましょう</h2>
    </header>
    <section>
      <h1>コンテンツ1のタイトルでーす</h1>
      <p>コンテンツ1の内容でーす。</p>
    </section>
    <section>
      <h1>コンテンツ2のタイトルでーす</h1>
      <p>コンテンツ2の内容でーす。</p>
    </section>
  </article>
 
  <footer>
    copyright.
  </footer>
</body>
</html>

これが正解なのかどうなのか分からないですけど、僕がW3Cとか見た解釈で書いてみました。
上のHTMLを文書構造（アウトライン）としておおまかに見ると以下のようになると思います。

・ほげほげのページ
　　・ページのタイトルとか入れちゃいます
　　　　・コンテンツ1のタイトルでーす
　　　　・コンテンツ2のタイトルでーす

ちなみに『article』はそれ単体で自己完結できるブロック。そのままどこか違う場所に持っていってもそれのみで意味が通じるもの。『section』はいわゆる章や節という個人的な解釈です。

タグにもそれぞれ意味があるようなので、スタイルあてるだけとかの場合は今までどおりdivタグを使ってマークアップしましょうってことらしいですね。

実際問題…ページを普通に閲覧する人からするとどうでもいいことではありますね（汗）
今はじみ〜な感じだけど API を試し出すともっと楽しくなるんでしょうね・・・。
使えるブラウザはまだ若干限られてしまうけど、File API は早急に実務で使えるようになりたい今日この頃です。

■参考にしたサイト
HTML5.JP - 次世代HTML標準 HTML5情報サイト
World Wide Web Consortium (W3C)

Category: HTML / Parmalink / Comments()

お仕事として HTML5 と CSS3 を見る。

2012年6月1日 02:23

こんばんは。
最近、また生活リズムが昼夜でややこしくなりつつある掛尾です。

ここ数日、PCサイトを前提に HTML5 と CSS3 をいろいろ調べて『お仕事で使い物になるのか？』を考えていました。
書籍・Webなどを参考にしながら実際にマークアップして試してたのですが、いかんせん新旧の情報が特にWebの場合散在しすぎていて、現時点でどれがどこまで使えるのか確認するだけでも一苦労します（汗）

そして、その情報のどれもが『HTML5 と CSS3 を使えばこんなことやあんなことが、こんなに簡単にできるようになるんですっ！』的に書いてるわけです。
それはそれでとてもいいことなんですが、実際『じゃあお仕事としてどうなの？』っていう視点から見ると、はっきりいいます・・・

さらに複雑かつ難解になり、ものすごく手間が増えます（笑）

ついでに、いろいろ試してみた感想としては、IE8 以下に対応させようと頑張ると・・・

Java Script のライブラリだらけになる可能性があります（笑）

※ちなみに、IE9 は Windows XP にはインストール出来ないみたいです。（そんな記事に何度も会いました）

新しい技術はやはり皆さん注目するものだと思いますし（特にWebデザイナーと呼ばれる方々は、今までも様々なブラウザに対応させるべく精進されてるはずだと思いますし）、生産性が上がるのであれば尚更と思います。

だけど、前述したような複雑なことやJava Scriptを読み込みまくるのって、本来の HTML5 や CSS3 を使うことの意義というか主旨というか、なんかそういうのがすり替わってしまってるように感じるんですよね…本末転倒って感じでしょうか。
もしかすると、僕の調べ方が悪いのかも知れないし、やり方がまずいのかもしれないです。本当はいろいろ使ってもっと手軽にできるのかも知れません。

趣味でするとか、スマートフォンのサイトなら問題ないと思うのですが、いざ『仕事で』となるともうエゴでしかなくなると思うので、結論として『現時点で HTML5 + CSS3（特にCSS3）は仕事では使えない』という結論に至りました（苦笑）

現時点ではサンプルサイトやスマートフォンサイトなどを作ってしっかり使えるようにしておき、来る時期に備えるというスタンスがいいのかなと思いました。
ただ、HTML5 に関してはそれ程ややこしいことをしなくても（若干JSライブラリーが必要ですが）それなりにマークアップできると思うので、少しずつ使うようにしていってもいいかなと思っています。
※スタイルあてるだけに意味不明な id や class を付ける頻度は大幅に減りそうな感じなのでお仕事でも使っていく価値はあると思います。

HTML5 と（特に）CSS3。
魅力的な（Webデザイナーにとっては特に）ものがたくさん盛り込まれているので、早く一般的な使い方が出来るようになるといいですね！