Strings of Life

PHP/Phalcon/MySQL/JavaScript/RegExp/Ruby/Perl/ActionScript

タグ:HTML

1.草案 Working Draft
2.最終草案 Last Call Working Draft
3.勧告候補 Candidate Recommendation
4.勧告案 Proposed Recommendation
5.勧告 Recommendation

出典:大津真『JavaScriptプログラミング入門 第2版』


ちなみに、HTML5は2011/5/25に最終草案が出て、現在は勧告候補の策定中。(最終草案はここで読める)

CSSは、「CSS3」という大枠ではなく、個々の機能別にDraftやRecommendationが出てるみたいなので、ちょっと事情が違う。例えば、CSS3のセレクタ(:last-child等)は、もう勧告が出てる(2011/09/29)。一方で、Grid Layout(テーブルレイアウトのような感覚でdivをレイアウトできる、新しいプロパティ)は、今年の3/22に草案が出たばかり。

個人的には、CSSの草案・勧告が楽しい。「こんなことが出来るようになるのか!」という期待感がある。

nav, headerのようなHTML5の新要素をcssで装飾する際は、

header nav{ padding:10px; }

のように要素名をセレクタにするのが普通のやり方だが、これではマークアップするタグを変更する時(nav→div)や、新要素が廃止になってしまった時に、HTMLとCSSの双方を修正する必要がある。

そこで、nav要素にクラスをつけておいて(例:<nav class="nav-topicpath">)、

.nav-topicpath{ padding:10px; }

と指定してやると、nav→divと変更するような時にHTMLを変更するだけで済む。




参考書籍:HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
HTML5+CSS3で作る 魅せるiPhoneサイト

Viewportとは、表示領域のサイズを指定するプロパティのこと。


Viewportはmeta要素を使って下記のように定義する。

<meta name="viewport" content="値" />


content属性には、width, height, initial scale, user-scalable, minimum-scale, maximau-scaleを指定できる。(横幅、縦幅、ページ読み込み時の拡大率、ユーザーに寄る拡大操作の許可、拡大率の最小、拡大率の最大)


Mobile Safariのデフォルトは↓と同じ状態。

<meta name="viewport" content="width=980px, initial-scale=1.0, user-scalable=yes, minimum-scale=0.25, maximum-scale=1.6" />


横幅をdevice-widthと指定すると、表示領域の横幅はデバイスのサイズに応じて自動的に調整される。

<meta name="viewport" content="width=device-width">



参考書籍:HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
HTML5+CSS3で作る 魅せるiPhoneサイト

section:章や節の単位をマークアップする。見出しと本文で構成される1つのまとまりをマークアップするために使う。

article:ブログやニュースの記事のように、その部分だけを切り離しても独立したコンテンツとなるような箇所に利用する。

nav:ページ内の主要なナビゲーションをマークアップ。

header:ページやセクションの導入部分に当たる見出しやナビゲーションリンクをグループ化。

footer:ドキュメントの関連情報や著作権情報などをグループ化。

figure:挿絵、図表とそのキャプション(figcaption要素)をマークアップ。

small:著作権表記や注釈等の細目をマークアップ。



参考書籍:HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
HTML5+CSS3で作る 魅せるiPhoneサイト

このページのトップヘ