World of granshe.
[PR]
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
HTML5についての分かりやすいまとめ
ゴールデンウィークももう終わりですね。
最近情報収集のためにTwitterをはじめたんですが、 すごくいい情報がどんどん入ってくるので、インプットにはかなりいいツールだと思いました。 使ってよかったです。
そこで、HTML5についての分かりやすいまとめが載っていたので紹介させていただきます。
HTML5とは何かを簡単にまとめてみた
http://techblog.yahoo.co.jp/cat207/web_1/html5/
自分なりに、上記の記事を簡易的にまとめてみました（私的な解釈も含んでいます）。
（詳細は上記の記事を読んでいただければ分かると思います。）
1.今まで難しかった、下記の機能の実装が容易になりました。
- 動画や音声、グラフィックの描画（video/audio/canvas）
-
位置情報の取得・クライアント側に大量データを保持させる（geolocation/LocalStorage）
ことが、JavaScriptを用いて容易に実装可能になる。 - フォーム周りの機能強化（type属性の種類の増加/必須項目を示すrequire属性/インプットエリア内にデフォルトの文字列を表示させるplaceholder属性）
HTML側の変化
-
基本構造が変化
（DOCTYPE、charset、linkの指定が短くなった。） -
現在のWebサイト特性に合わせたタグを新設
（ページのヘッダー等見出し群を囲むhgroup、ブログ記事など、単体で独立可能なエリアを囲むarticle、コンテンツを一定の意味合いごとに区切るsection、本筋とは違う要素をマークアップするaside、具体的な時間を表すのに使用するdata、などなど） - （特にインライン要素の）要素の意味合いが変化（small/i/s など）
- inline要素・block要素という区分けの廃止（明記されているか調べていないが、おそらくそう。）
- aタグが今までのブロック要素にあたるもの（pやdivなど）を包含可能に
改めてW3Cの仕様書を見てみると、面白く見えたのでまた読解に挑戦してみたいです。
時間になってしまったので、今日はこれにて。
HTML5で、使用するタグを選ぶためのフローチャート
数ヶ月ぶりになってしまいました･･･。
（と、毎回書いている気が）
最近Web制作とは別の趣味に注力してしまい、勉強がおろそかになりがちです・・・。
よく、仕事とは別の趣味を持って、週末はリフレッシュ！などということが聞かれますが、
私は向いていないみたいです･･･。
・土日に仕事が入ると、好きなことができない！と若干ストレス
・好きなことが仕事中に気になりだすと、仕事中ももやもや
このあたりの切り替えができるようになれば、もう少しうまくいくんだろうな。
ということで、前置きが長くなりましたが。
あんまり記事数は無いのですが、HTML5で検索していただいてアクセスしていただいている方が多いので、
今回は、『HTML5で、使用するタグを選ぶためのフローチャート』をご紹介します。（もう有名かもしれませんが。）
▽こちらのPDFから引用させていただきました。
Methods to Select an HTML5 Element
コンテンツについて質問に答えていくと、どのタグでマークアップすればよいのかわかる仕組みになっています。
１．それは、サイト・ページのメインのナビゲーションでしょうか？
⇒そうであれば、<nav>でマークアップ。
判断基準としては、そのサイト・ページで『ナビゲーションをスキップする』を使用するナビゲーションである。と書かれています。
↓そうでない場合
２．それは、それ自身単独で意味をなすものですか？
例）RSSフィード
⇒そうであれば、<article>でマークアップ。
ニュースの記事やブログ記事、記事へのコメント、サイドバーなど、見出しを伴うもの。とあります。
↓そうでない場合
３．それは、コンテンツを理解するために必須のものですか？
⇒そうでない場合、<aside>でマークアップ。
関連ページへのリンクや、注釈、広告など、コンテンツを読み解くのに『必須』ではない補足的なもの。
↓『コンテンツを理解するために必須のもの』の場合
４．それは、付録に移動することができますか？（直訳）
（おそらく、そのコンテンツを補足として、別添えとして、ページから移動させても問題ないか、ということかと･･･。自信は無いですが。）
⇒そうであれば、<figure>でマークアップ。
画像や図版、またはそれらのキャプション。サンプルコードなどはこれでマークアップ。
なお、ほかの要素はsectioning content（コンテンツを意味的に区切るための要素）という扱いですが、
このfigureに関しては、そうではありません。
↓そうではない場合
５．論理的に見出しを付けることができるか。
⇒そうであれば、<section>でマークアップ。
ページの章、もしくは<article>の中の章・節、など見出しを伴うものに対して、sectionを使用します。
↓そうではない場合
６．それは何らかの『意味』をもつか？
⇒そうであれば、p（段落）やblockquote（引用文）など、その『意味』にふさわしい何らかのタグでマークアップ。
⇒そうではない場合、<div>でマークアップ。
『意味』を持たないもの、CSSでデザインを実装するためのものはdivでマークアップ。
（たとえば、CSSで角丸ボックスを実装するための囲みdivなど。）
だそうです。
それにしてもこのサイト、ものすごくわかりやすく解説してありますね。
今度じっくり読んでみたいです。
なお、毎度のことで恐縮ですが、筆者は英語力がそれほど高くありません。
本家の情報が正しい情報です。
数箇所意訳している部分もあり、私の文章を読んで「間違っている！」と本家の方に抗議しないでください。
（私にはいくらでも翻訳ミスをご指摘ください。大変助かります。）
以上、HTML５使用タグフローチャートのメモでした。
HTML5の概要について理解できるスライドショー
マンガで分かるHTML5
1ヶ月ぶりの更新になってしまいました！
面白い記事を見つけたのでご紹介。
“Misunderstanding Markup” 日本語訳
HTML５の背景を知ってれば特に引っかかる部分はないのですが、
やっぱりちょっと技術者よりで分かりにくいなーってとこがあるので、
一連の流れを解釈してみたいと思います。
まず、
XHTML2.0のワーキンググループが終了になったけど、
それでXHTMLがなくなるわけじゃないということ。
XHTMLはHTMLをXML化したもので、その2つには共通点があります。
マンガ上では、HTMLをミルク、XHTMLをチーズと表現して、
原料は同じ牛乳ですよ、と示唆してるんだと思います。
でも、XHTML2（マンガ上では豆乳）は牛乳ではなく大豆からできていて、
牛乳とよく似ているけれど、その構成要素、成分は全く異なります。
（記事上では、HTMLとXHTML2に共通点はない、としか言及していませんが、
おそらく、XHTMLとXHTML2も違うものなんだと言いたいのだと思います。）
だから、XHTML2がなくなるとしても、XHTML自体がなくなるわけではないと。
ここからどうHTML5につながるのかと言うと、
今まで、DOCTYPE宣言というものがありました。
HTMLだと
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTMLだと
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
というように、DOCTYPE宣言をつけていました。
これが、HTML5では
<!DOCTYPE html>
（たったこれだけ！）に統一。
つまり、HTML文法で書こうが、XHTML文法で書こうが、DOCTYPE宣言としては「<!DOCTYPE html>」だけ、
ということになります。HTML５は、HTMLの文法はもちろん、XHTMLの文法でも記述できるのです。
ということで、とっても自由度があがりそうですね。
ただ気になるのは、1枚のHTMLの中にHTML構文とXHTML構文が混ざっていた場合どうなるんだろう？
ということ。DOCTYPEではHTMLなのかXHTMLなのか判別できないから、
今まで記述エラーとされてきたものたちはスルーされていくようになるんだろうか？
（α版のHTML5バリデータではふたつの文法が混在していても記述エラーとして出てきませんでした。）
といった疑問が。まあまだ草案だし、こんなこと考える段階じゃないか。
ちなみに、マンガ中に
「HTML5はサポートされてないじゃないか！」
という言葉が出てきますが、
たしかにHTML5から出現する新しいタグたち（<header><footer>等）はサポートされていません（IEでは）。
が、今まで作ってきたHTMLやXHTMLのDOCTYPEをHTML5のもの（<!DOCTYPE html>）にかえても、表示は全く問題ありません。
たぶんそういった意味合いで、「サポートってどんな意味だい？ちゃんと定義しようよ」
というフレーズが続いているのではないかと推測。
文法エラーは出ますけどね！
ということで、小難しい話でもマンガにすると少しはとっつきやすくなるなーと思いました。
hr要素でコンテンツを区切る理由
たまに、Webサイトの中で、グローバルナビゲーションとコンテンツとフッター部分をhrタグで区切っているサイトが見受けられます。
HTML５では、文章の切れ目、閑話休題的な意味で扱われることになるようですが、
現状のものでは特に明確な意味はなく、「水平線引く」的な扱いだと思います。
使う理由としては、「CSSがなくなったときにコンテンツの区別がつきやすいから」
ということだそうですが、その点は確かに納得。
ただやっぱり、その理由だと、デザインのためにやってるんだよなーこれ、と思ってしまいます。
「コンテンツ同士の区別をつけるため」だと見栄え的な考えかなって気がしますが、
「コンテンツ同士が区切られていることを示す」だとHTML的に良い感じがしますね。
（わかりずらっ）
・・・また変な精神論になってしまいましたが、このhrに関して、
「コンテンツ同士の意味的な区切り」だけじゃない使われ方が紹介されてたのでメモ。
というのも、フロートを解除させるために使っている例もあるんだとか。
例えばグローバルナビゲーションといえばリストタグでフロートというのがほぼ王道ですが、
li要素をフロートさせると、その親要素であるDIVやらulやらに高さを指定してやるか、
clearfixなるおまじないをつけるとか、色々調整しないといけないんですが、
たとえばグローバルナビゲーションボックスの直後にhrを入れて、clear:both;を入れて解除すればいいんでないの。っていうしくみらしいです。
あーそういう使い方があったんだーと、ちょっぴり感動しました。
フロートを解除するためだけにこれ使うのはアウトだとは思いますけど、
せっかくHTMLに書いてるんだしこういう使い方もありなんだーと新鮮に感じました。
Copyright © 2008 A.Yu-ri all rights reserved.