今Web業界で話題になっている、
HTML5、CSS3について、今まで勉強してきたことを纏めてみました。
本ページをご参考頂くにあたりまして、下記注意点をご了承ください。
- 現時点では、HTML5、CSS3は正式に「W3C勧告」されたものではおりません。 従いまして正式勧告時には情報が変わっている可能性があります。
- 本ページ(「HTML5、CSS3について」)は、「HTML5では、こんなことができるんだよ!」ということを個人的作成した「メモ書き」です。 誤情報や判り難い表現が含まれておりますことをご了承ください。
マルチメディア
video、audioはJavascriptのAPIを使用して制御(Play、Stop、Pauseなど)可能。(cf. http://videojs.com)
グラフィックス
- ・canvas
- (2D)ビットマップ
- ・SVG:Scalable Vector Graphics
- (2D)ベクター
- ・OpenGL
- (3D)canvasの3D版
フォーム
ネットワーク
- ・Server-Sent Events
- サーバプッシュ(何かしらのイベントをサーバからクライアントに送信し、クライアントではそれを待ち受け処理する仕組み)を実現するためのAPI。
- ・Web Socket
- クライアントとサーバ間の双方向全二重通信を実現するテクノロジー。(HTTPはオーバーヘッドが大きい。それを軽くする仕組み)
- ・Application cache API
- オフライン時にも動作するために必要なファイルをキャッシュさせる仕組み。
ストレージ
Web Strage:値にキーを結び付けて保存するストレージAPI。(Cookieに代わる仕組み)
- ・Local Strage
- 永続的にデータを保存。
- ・Session Strage
- ブラウザが開いている間の一時的なデータの保存。(Windowごとにデータを保持している)
Indexed Database API:Web Strageよりも複雑な構造にも対応できるようにした仕組み。
ファイル操作
File API:fileタイプのinput要素に選択されたファイル、またはデスクトップからWebページ上にドロップされたファイルのデータを読み取るメカニズムのAPI。
位置情報
Geolocation API:Javascriptから位置情報を取得するAPI。
スレッド
Web Workers:所定の処理をバックグラウンドで実行する。(別スレッドで処理されているかのように振る舞う)
策定中の技術
- ・Media Capture API
- カメラやマイクロフォンによって撮られた写真や動画などを扱うAPI。
- ・System Information API
- Javascriptを通してデバイスのハードウェアの情報にアクセスするための仕様。CPU負荷状態、ネットワーク利用帯域、バッテリー状況など。
- ・Application Launcher API
- 通常、ランチャー(デバイスが独自のネイティブアプリケーションを起動する仕組み)はOSの機能だが、Webアプリケーションがランチャーを担うことを可能にするAPI。
- ・Widget Packagin and Configuration Widget Interface
- ウィジェット(デスクトップやブラウザ上で動作するミニアプリケーション)をブラウザ上に搭載するための仕様。
- ・Clipboard API and events
- クリップボードを経由したコピー・ペーストなどのOSでは一般的な機能をWebアプリケーションでも実現する仕様。
その他
- ・html5shiv
- HTML5新要素向けに用意されたJavascript。CSSを読み込む前に記述する。
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
HTML5で追加予定の要素(タグ)一覧です。
本ページをご参考頂くにあたりまして、下記注意点をご了承ください。
- 現時点では、HTML5、CSS3は正式に「W3C勧告」されたものではおりません。 従いまして正式勧告時には情報が変わっている可能性があります。
- 本ページ(「HTML5、CSS3について」)は、「HTML5では、こんなことができるんだよ!」ということを個人的作成した「メモ書き」です。 誤情報や判り難い表現が含まれておりますことをご了承ください。
文書構造関連
<section>
一般的な章や節を表す。
一つのセクションであることを示す。
<article>
単独で成り立つようなコンテンツの単位。
記事であることを示す。
<aside>
メインコンテンツには関係はしているが、やや本筋から逸れていて軽く触れる程度のコンテンツを表す。
補足記事(余談)。
<nav>
ナビゲーションであることを示す。
ページ内の主要なナビゲーション(グローバルナビゲーション)を表す。
<hgroup>
セクションの見出しを表す、見出しをまとめる。
セクションの見出し(h1)と副題(h2~h6)を表す。h1~h6要素しか入れられない。
<header>
ヘッダであることを示す。
ページ最上段に掲載する領域に使う要素。サイト名、サイトロゴ、サイト概要、サイトナビゲーションなど。
<footer>
フッタであることを示す。
ページ最下段に掲載する領域に使う要素。著作権表記、フッター用ナビゲーションなど。
テキスト関連
<time>
日付や時間を表す。
日付や時刻を正確に示す。
<mark>
文書内の該当テキストを目立たせる。
特定のテキストの範囲を参照目的でハイライトするために使う。
<ruby>
ルビをふる。ルビを伴うテキストを表す
<rt>
ルビのテキストを指定する。
ルビテキスト(フリガナそのもの)を表す。
<rp>
ルビを囲む記号を指定する。
ふりがなを括弧で囲みたい場合に使用する。
<bdi>
前後のテキストに適用された双方向テキスト書式制御から隔離したいテキストの範囲を表す。自動的に行われる配置の仕組みを解除する。
<wbr>
改行しても良い位置を示す。
レンダリングにおいて、改行されても構わない位置にこの要素を入れる。空要素。
マルチメディア・外部コンテンツの組み込み関連
<embed>
プラグインデータを埋め込む。
Flashなどのプラグインコンテンツを埋め込む際に使う。HTML5で仕様確定。
<source>
動画や音声などのURLや種類を指定する。
ビデオやオーディオのファイルの候補をいくつでも定義することができる。
<canvas>
図形を描く。ビットマップグラフィックスを扱うための要素。
描画自体はJavascriptで行う。
<figure>
図表であることを示す。
図などにキャプションを入れる場合。
<figcaption>
図表のキャプションを示す。
figure要素の中でキャプションを使用。
フォーム関連
<datalist>
入力候補となるデータリストを定義する。
テキスト入力フィールドの入力候補のリストを表す。(入力サポート機能のようなもの)
<output>
計算結果を示す。
スクリプトを通して実行された計算結果などの出力を表す。
<progress>
タスク完了までの進行状況を示す。
タスクの完了度を表す。
<meter>
規定範囲内の測定値を表す。
ディスク使用率のような計測結果を表す。
<keygen>
フォーム送信時にキーを発行して暗号化する際に使用する。
対話型
<command>
操作メニューの各コマンドを指定する。
Webアプリケーションにおけるボタンなどの処理のトリガーのために使う。
<details>
備考や操作手段などの詳細情報を示す
。ディスクロージャウィジェット(ユーザの要求に応じて表示・非表示を切り替える)を実現するために使う。
<summary>
detail要素が表すディスクロージャーウィジェットの概要やキャプションを表す。
HTML5で廃止予定の要素(タグ)
<applet>
<embed>や<object>で指定
<blink>
[text-decoration: blink]で指定
<center>
[margin: auto]や[text-align: center]で指定
<frame>
<iframe>やCSSで指定。
メニューなどの共通部分はサーバー側でインクルードする(SSI)
<frameset>
<iframe>やCSSで指定。
メニューなどの共通部分はサーバー側でインクルードする(SSI)
<isindex>
<form>と<input type=text>で指定
<listing>
<pre>や<code>で指定
<marquee>
CSS3のmarquee系プロパティで指定
<nobr>
[white-space: nowrap]などのCSSで指定
<noembed>
プラグインが利用できない環境用の表示が必要な場合には、<embed>の代わりに<object>を使用
<noframes>
<iframe>やCSSで指定。
メニューなどの共通部分はサーバー側でインクルードする(SSI)
<plaintext>
MIMEタイプにtext/plainを指定
<rb>
<ruby>内に直接ルビベースを記述、<rb>タグは省略
<spacer>
marginやpaddingプロパティで指定
<strike>
<del>、<s>、[text-decoration: line-through]で指定
<tt>
[font-family: monospace]で指定
<u>
[text-decoration: underline]で指定
今Web業界で話題になっている、
HTML5、CSS3について、今まで勉強してきたことを纏めてみました。
本ページをご参考頂くにあたりまして、下記注意点をご了承ください。
- 現時点では、HTML5、CSS3は正式に「W3C勧告」されたものではおりません。 従いまして正式勧告時には情報が変わっている可能性があります。
- 本ページ(「HTML5、CSS3について」)は、「HTML5では、こんなことができるんだよ!」ということを個人的作成した「メモ書き」です。 誤情報や判り難い表現が含まれておりますことをご了承ください。
HTML5初期化CSS
http://code.google.com/p/html5resetcss/downloads/list
Web Fonts
Web上にアップしたフォントを指定できるようになった。http://code.google.com/intl/ja/apis/webfonts/
フォントの制約で、ロゴなどを画像でしか表現できなかったものがフォントで表現できる。
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
Media Queries
今までscreenやprintといったMedia Typeの指定していた仕組みを発展したもの。
表示媒体のサイズやアスペクト比、カラーの表示可否といった詳細な項目での振り分けを可能にする仕組み。
ワイドディスプレイやスマートフォンへのスタイル適用の際に役立つ。
画像操作
- 背景などの画像に複数画像を指定できるようになった。
- 画像の透明化を指定できるようになった。
- 画像の変形やアニメーションが可能になった。
ベンダープリフィックス
CSS3で追加予定のプロパティ・値・セレクタ一覧です。
本ページをご参考頂くにあたりまして、下記注意点をご了承ください。
- 現時点では、HTML5、CSS3は正式に「W3C勧告」されたものではおりません。 従いまして正式勧告時には情報が変わっている可能性があります。
- 本ページ(「HTML5、CSS3について」)は、「HTML5では、こんなことができるんだよ!」ということを個人的作成した「メモ書き」です。 誤情報や判り難い表現が含まれておりますことをご了承ください。
背景
background-clip
背景の適用範囲を指定。「border、padding」
background-origin
背景の基準位置を指定。「border、padding、content」
background-size
背景画像のサイズを指定。
角丸
border-top-left-radius
左上の角丸を指定。
border-top-right-radius
右上の角丸を指定。
border-bottom-left-radius
左下の角丸を指定。
border-bottom-right-radius
右下の角丸を指定。
画像ボーダー
border-image
4辺のボーダーに対して画像ボーダーを指定。
border-image-source
ボーダーに使用する画像ファイルを指定。
border-image-slice
画像のボーダー使用範囲を指定。
border-image-width
画像ボーダーの太さを指定。
border-image-outset
ボーダーイメージエリアを広げる。
border-image-repeat
画像ボーダーの繰り返し方法を指定。
ボックス表示
box
displayの設定値。ブロック要素を横並びにする。「display:box;」
box-decoration-break
ボックスが改行する際の表示形式を指定。
box-ordinal-group
HTMLの記述の順番と表示の順番を変える。
box-align
子ボックスの縦方向の揃え位置を指定する。「start,end,center,baseline,stretch」
box-pack
ボックスの横方向の揃え位置を指定する。「start,end,center,justify」
box-flex
ボックスの伸縮比率を指定する。正の数値を指定。「2.0, 5.0 など」
box-sizing
ボックスの幅にpaddigとborderを含めるかをしてする。
(Firefoxではボックス配置の際に幅にpaddingとborderが含まれてしまう。なのでwebkit系ブラウザに対してborder-boxを設定するようにする)
画像2D/3D変形
transform
文字や画像などの要素に拡大・縮小や回転などの変形を適用するプロパティ。
要素に2D変形、または、3D変形を適用。
3次元での変形を扱うtransform 3Dの実装が進んでいる。
transform:matrix()
要素にマトリクス変形を適用。
transform:translate()
要素を横・縦に移動するファンクション。例:translate(150px,40px)
transform:scale()
要素を拡大・縮小するファンクション。例:scale(0.8,0.8)横、縦%値。縦値は省略時は横値と同じになる。
transform:rotate()
要素を回転するファンクション。例:rotate(45deg)
transform:skew()
要素を傾斜するファンクション。例:skew(45deg,15deg)左角度、上角度。負値も可。
transform:perspective()
3D変形の遠近効果を調節。
transform-origin
2D変形、または、3D変形の原点を指定。
transform-style
2D変形か3D変形かを指定。
遠近法
perspective-origin
奥行きの消失点を指定。
backface-visibility
要素の裏面を見られるようにするかどうかを指定。
時間的変化
transition
状態の変化をきっかけとして、その間のスタイルの変化をアニメーションする。
効果(時間的変化)をまとめて指定。
transition-property
transition効果を適用するCSSプロパティ名を指定。
transition-duration
変化に掛かる時間を指定。単位:秒
transition-timing-function
変化のタイミング・進行割合を指定。「default,lenear,ease-in,ease-out,ease-in-out,cubic-bezier」
transition-delay
変化がいつ始まるかを指定。
アニメーション
animation
キーフレームで次々と動きや変化を設定していく。transitionでは表現しきれないより複雑なアニメーションを設定できる。
アニメーションについてまとめて指定。
animation-name
アニメーション名を指定。
animation-duration
アニメーション一回分の時間の長さを指定。
animation-timing-function
アニメーションのタイミング・進行割合を指定。
animation-iteration-count
アニメーションの繰り返し回数を指定。
animation-direction
アニメーションを交互に反転再生させるかどうかを指定。
animation-play-state
再生中か一時停止かを指定。(削除検討中?)
animation-delay
アニメーションがいつ始まるかを指定。
色・透明度
rgba()
RGBAカラーモデルで色を指定。(プロパティでなく値)
例:rgba(0,128,255,0.5) alphaは0.0-1.0
hsla()
HSL:Hue(色相)Saturation(彩度)Lightness(明度)Alpha(透明度)
例:hsla(120,100%,50%,0.5) 緑(#0f0)で半透明。ちなみにhsl(xxx,0%,50%)とした場合はxxxにかかわらずグレイになる。
同様にhsl(xxx,0%,0%)、hsl(xxx,0%,100%)とした場合それぞれ黒、白となる。
グラデーション
linear-gradient()
線形グラデーションを指定。(プロパティではなく値)
radial-gradient()
円形(放射状)グラデーションを指定。(プロパティではなく値)
ボックスの配置・方向・揃え位置
box-orient
ボックス内の子要素の配置方向を指定。
box-direction
ボックス内の子要素の表示方向を指定。
box-ordinal-group
ボックス内の子要素に並び順グループを割り当てる。
box-align
ボックス内の子要素の縦方向の揃え位置を指定。
ボックスの伸縮
box-flex-group
伸縮ボックスにグループを割り当てて伸縮の優先順位を指定。
ボックスの揃え位置
box-pack
ボックス内の子要素の横方向の揃え位置を指定。
box-lines
ボックス内を複数行(複数列)にするかどうかを指定。
カラムの数と幅
カラムの間隔と区切り線
column-rule
カラムの区切り線のスタイル・幅・色を指定。
column-rule-color
カラムの区切り線の色を指定。
column-rule-style
カラムの区切り線のスタイルを指定。
column-rule-width
カラムの区切り線の幅を指定。
カラムの改行
break-after
ボックス後でのカラムの区切り方法を指定。
break-before
ボックス前でのカラムの区切り方法を指定。
break-inside
ボックス途中でのカラムの区切り方法を指定。
カラムへの要素の配置
column-span
要素がまたがる(横切る)カラム数を指定。
column-fill
カラム同士の高さ(長さ)を揃えるかどうかを指定。
ユーザーインターフェース
appearance
プラットフォームにおける標準的なUIの外観に。
box-sizing
ボックスサイズの算出方法を指定。
outline-offset
アウトラインのオフセット値を指定。
resize
ユーザーが要素のサイズを変更できるかどうかを指定。
フォーカス移動
nav-index
タブキーによるフォーカス移動の順序を指定。
nav-up
上方向キーにフォーカス移動を割り当てる。
nav-right
右方向キーにフォーカス移動を割り当てる。
nav-down
下方向キーにフォーカス移動を割り当てる。
nav-left
左方向キーにフォーカス移動を割り当てる。
テキスト表示
white-space-collapse
ソース中の半角スペースの表示方法を指定。
text-wrap
テキストの折り返し方法を指定。
word-wrap
単語の途中で改行するかどうかを指定。
text-align-last
最後の行の揃え位置を指定。
text-emphasis
テキストを強調するための傍点の付け方を指定。
text-outline
テキストの輪郭ぼかしを指定。
punctuation-trim
句読点などの記号の詰め方を指定。
hanging-punctuation
句読点の禁則処理を指定。
ルビ
ruby-position
ルビの配置位置を指定。
ruby-overhang
本体に隣接するテキストへのルビのかかり方を指定。
ruby-span
ルビ注釈がどこまでまたがるかを制御。
フォント
font-size-adjust
フォント同士のサイズのバラつきを調整。
font-stretch
フォントの形状を幅広・幅狭に。
グリッド
ボックスオーバーフロー
overflow-x
はみ出た要素の左右の表示方法を指定。
overflow-y
はみ出た要素の上下の表示方法を指定。
overflow-style
はみ出た要素のスクロール方法を指定。
ボックスの回転
rotation
ブロックレベル要素を反時計回りに回転させる。
rotation-point
回転の中心座標を指定。
インラインボックスのサイズ
行の重ね方
line-stacking
行ボックスの重ね方を指定。
line-stacking-strategy
行ボックスを重ねる際の基準高さを指定。
line-stacking-ruby
行ボックスを重ねる際のルビの扱いを指定。
line-stacking-shift
文字のベースラインを考慮するかどうかを指定。
ベースライン
dominant-baseline
優先するベースラインを指定。
alignment-baseline
インライン要素の揃えラインを指定。
alignment-adjust
ベースラインを調整。
baseline-shift
優先するベースラインを指定し直す。
インラインボックスの整列
inline-box-align
どの行を基準にしてインラインボックスを整列させるかを指定。
装飾頭文字
drop-initial-value
頭文字を何行分にするかを指定。
drop-initial-size
頭文字のサイズを指定。
drop-initial-after-align
頭文字の第一接続点の揃えラインを指定。
drop-initial-after-adjust
頭文字の第一接続点の揃え位置を指定。
drop-initial-before-align
頭文字の第二接続点の揃えラインを指定。
drop-initial-before-adjust
頭文字の第二接続点の揃え位置を指定。
マーキー(marquee)
marquee-play-count
スクロール回数を指定。
marquee-direction
スクロール方向を指定。
marquee-speed
スクロール速さを指定。
marquee-style
スクロール方法を指定。
ハイパーリンク
target-new
リンク先を新しいウィンドウ・タブで開く。
target-position
新しいウィンドウ・タブを開く位置を指定。
自動生成・置換
印刷ページ設定
ページに収める
image-orientation
画像がページに収まるように回転角度を指定。
fit
画像などをページにフィットさせる方法を指定。
fit-position
フィットさせる際の揃え位置を指定。
ヘッダ・フッタ・脚注
border-length
脚注の区切り線の長さを指定。
ハイフン
hyphenate-resource
ハイフンでつなぐ箇所を示したリソースを指定。
hyphenate-before
ハイフン前の最低文字数を指定。
hyphenate-after
ハイフン後の最低文字数を指定。
hyphenate-lines
連続するハイフンの最大数を指定。
hyphenate-character
ハイフンに使う文字を指定。
置換・解像度・配置・トンボ
image-resolution
画像の解像度を指定。
float-offset
フロート要素のオフセット値を指定。
marks
トンボ(印刷物の見当合わせ記号)を付ける。
ブックマーク
bookmark-level
ブックマークのレベル(度合い)を指定。
bookmark-label
ブックマークのラベル(名前)を指定。
bookmark-target
ブックマークのターゲット(対象)を指定。
音声ボリューム・バランス
voice-volume
音声のボリュームを指定。
voice-balance
音声の左右のバランスを指定。
休憩・間
rest
要素内容を話す前後の休憩・間をまとめて指定。
rest-before
要素内容を話す前の休憩・間を指定。
rest-after
要素内容を話す後の休憩・間を指定。
音声記号
mark
要素の前後に入れる音声記号をまとめて指定。
mark-before
要素の前に入れる音声記号を指定。
mark-after
要素の後に入れる音声記号を指定。
声
voice-pitch
声の高さ(周波数)を指定。
voice-pitch-range
声の抑揚(周波数の変化幅)を指定。
voice-stress
強調の度合い(強い・弱い・単調)を指定。
voice-duration
要素内容を話すのに掛かる時間を指定。
表示レベル
presentation-level
表示レベルを指定。
結合
セレクタ
E[foo=bar]
foo属性がbarであるE要素
E[foo^=bar]
foo属性の値がbarで始まっている要素
E[foo$=bar]
foo属性の値がbarで終わっている要素
E[foo*=bar]
foo属性の値にbarを含む要素
E:root
ドキュメント中のルート要素であるE要素
子要素
E:last-child
一番最後の子であるE要素
E:nth-child(n)
n番目の子であるE要素
E:nth-last-child(n)
後ろから数えてn番目の子要素
E:empty
子要素を持たない(テキスト含む)E要素
兄弟要素
E:nth-of-type(n)
兄弟要素のうちn番目のE要素
E:nth-last-of-type(n)
兄弟要素のうち最後から数えてn番目のE要素
E:first-of-type
兄弟要素のうち一番最初のE要素
E:last-of-type
兄弟要素のうち一番最後のE要素
E:only-of-type
兄弟要素内で唯一の種類であるE要素
ターゲット疑似クラス
UI要素の状態による疑似クラス
E:enabled
有効となっているユーザーインターフェースのE要素
E:disabled
無効となっているユーザーインターフェースのE要素
E:checked
チェックされているユーザーインターフェースのE要素(例えば、ラジオボタンやチェックボックス)
否定疑似クラス
E:not(s)
シンプルセレクタにマッチしない要素。
sセレクタで選択されないE要素 例:「#aaa :not(.bbb) 」クラスがbbbではないaaa要素
間接セレクタ
ユーザーインターフェースセレクタ
疑似クラス
:indeterminate
ラジオボタンやチェックボックスの切り替えがはっきりしない状態
:default
ボタン・メニューなど、ユーザーインターフェース要素の初期状態
:read-write
書き込み可能の状態(テキスト入力フィールドなど)
疑似要素
::selection
ユーザーに選択された状態のテキスト
::repeat-item
連続して要素が配置されている場合のそれぞれの要素
::repeat-index
連続して要素が配置されている場合のその親要素