ブログ [果報は寝て待て]|Blog

RSS

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)

お仕事として 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デザイナーにとっては特に)ものがたくさん盛り込まれているので、早く一般的な使い方が出来るようになるといいですね!

≪ 前へ 1 次へ ≫ (2件中 1 - 2件を表示)

shape DESIGN - シェイプデザイン, 徳島県徳島市名東町, tel/fax 088-635-5859, 営業時間 平日10:00〜18:00

まずはお気軽にお問い合わせください
お問い合わせ・お見積り・ご相談はこちら
お気軽にご相談ください

徳島県徳島市名東町
tel/fax 088-635-5859
営業時間 平日 10:00〜18:00

※打ち合わせ等で不在の場合は、お電話でのお問い合わせに対応できない場合がありますので、ご了承ください。

フォームからのお問い合わせ

徳島・香川・愛媛・高知および大阪・京都を中心にご依頼を承ります。その他の地域でも、メール・お電話・FAX・Skype等での作業が可能であれば柔軟に対応いたします。

  • Become our fan on Facebook, facebook.com/shape.design