オフラインWebの活路はモバイルアプリにある：UXClip（22）（3/3 ページ）

» 2013年02月28日 15時19分公開

[野中龍一，クラスメソッド]

前のページへ 1|2|3 　　　　　　

3．HTML5ではないサイトからHTML5を考える

スピーカー：ひらいさだあき氏（@sada_h）

　最後のセッションは、ひらいさだあき氏から、仕事で使えるHTML5についてが紹介されました。全体的にまだ手の届かない技術ではなく、使おうと思えばすぐに利用できることが分かりました。

3.1．HTML5をどこから使うか

　HTML5は、どこから何を使えば良いか迷ってしまいます。そこで、身近なWebサイトで、どの程度HTML5が利用されているのかが紹介されました。

3.2．HTMLのマークアップの現状

　HTML5のマークアップは、意外と多くのサイトが利用していますが、まだタグの利用方法など、ばらばらです。HTML5の要素に対応していないInternet Explorer 6、7、8に対応させるために、HTML5shivやcreateElementを使ったりなどさまざまです。

参考サイト：HTML5＋CSS3は「メニューの作り方」を覚えるだけ！＜にわかデザイン

3.3．検索時に見かけるMicrodata／RDFa

　Microdata／RDFaは、機械がHTML文章の中のメタデータを、より認識しやすくするための仕様です。この属性を利用して、HTML文章内の情報を意味付けでき、Googleの検索結果にも特定の情報を表示できます。

　Microdata／RDFaを利用したメタデータの付与は、HTML5でなくとも利用できるので、すぐにでも利用できます。

　例えば、Googleでランチを検索すると、このように評価やレビュー、価格帯などが検索結果に表示され、サイトを開かなくても、比較するための情報が得られます。

Googleの検索結果イメージ

　実際にはこのような感じで項目を意味付けしていきます。

<p itemscope>
    名前：<span itemprop="name">Ryuichi Nonaka</span><br />
    年齢：<p itemprop="age">26</span><br />
    自己紹介：<span itemprop="desc">クラスメソッドで企画、制作、運用までやるWebマスター。Webデザイン、Webサイト高速化、広義のHTML5、JavaScript、jQuery、CSS3、PHP、AWSを広く浅くやってます。クラスメソッド開発ブログを作ってる中の人。</span><br />
    <img itemprop="image" src="profile.png" alt="プロフィール画像" /><br />
    <a itemprop="link" href="http://dev.classmethod.jp/author/nonaka-ryuichi/">ブログ</a>
</p>

サンプル

参考サイト：Microdata について

3.3．レスポンシブデザインに利用するMedia Queries

　Media Queriesは、読み込まれるCSSや、CSSの記述のインラインに条件を加えて使います。

@media screen and (min-width: 0px) and (max-device-width: 320px) {
...
}
@media screen and (min-width: 321px) and (max-device-width: 920px) {
...
}
@media screen and (min-width: 911px)  {
...
}

記述例

　ただ、規模が大きくなればなるほど、確認が大変になります。また、優先するターゲットデバイスの構造に引きずられ、機能や情報の取捨選択、優先順位付けが重要になるようです。

Media Queriesを利用したデモ

参考サイト：VIEWPORT RESIZER

3.4．Web Fonts

　Web Fontsは古いInternet Explorer（IEはWeb Fontsを昔から実装済み）でも利用できる仕組みです。

　ただ、和文フォントをファイルサイズの関係で、なかなか利用できないのが残念なところです。それでも欧文フォントは利用しているサイトが多いようです。

　Google Web Fontsなど、無料で簡単に利用できるWeb Fontsもあるので積極的に利用していきたいですね。

/* using Google Web Fonts */
@font-face {
  font-family: 'Allerta Stencil';
  src: url(http://themes.googleusercontent.com/static/fonts/allertastencil/v4/CdSZfRtHbQrBohqmzSdDYKqcRvMv63bhrwdN_8Hu8N8.woff) format('woff');
}
.webfonts{
  font-family: 'Allerta Stencil', sans-serif;
}

読み込んで利用するCSSの例