現場のプロが教えるHTML+CSSコーディングの最新常識

CHAPTER2──掲載サイトリンク集

01 HTML5でのマークアップ

サイト名URL
HTML 5 Outlinerhttps://gsnedders.html5.org/outliner/

02 短縮記法で高速コーディング

サイト名URL
Emmethttp://emmet.io/
Emmetのチートシートhttp://docs.emmet.io/cheat-sheet/

03 フォーム関連の新機能

サイト名URL
旧iOS風チェックボックスhttp://ginpen.com/2012/12/22/switch-control/
旧iOS風ラジオボタンhttp://ginpen.com/2012/12/11/segmented-control/

05 SVGでベクターグラフィックを描画する

サイト名URL
Raphaël—JavaScript Libraryhttp://raphaeljs.com/
Snap.svghttp://snapsvg.io/
Lazy Line Painterhttp://lazylinepainter.info/
Carl-Philippe Brennerhttp://carlphilippebrenner.com/
LETTERS, INC.http://letters-inc.jp/
Dipublichttp://dipublic.com/
Studio Songeshttp://studio-songes.fr/fr/

06 音声と映像をWebページに埋め込む

サイト名URL
YouTubeの動画埋め込みのパラメータhttps://developers.google.com/youtube/player_parameters?hl=ja#Parameters
YouTube JavaScript Player API Referencehttps://developers.google.com/youtube/js_api_reference?hl=ja
MP4/H.264の対応状況http://caniuse.com/#feat=mpeg4
Videhttp://vodkabears.github.io/vide/

07 Canvasで広がる新しい表現の世界

サイト名URL
Canvas 2Dコンテキスト仕様http://www.w3.org/TR/2dcontext/
クレアラシル×カゲロウプロジェクトhttp://kagerou.clearasil.jp/
Canvasライブラリpixi.jshttp://www.pixijs.com/

08 セマンティックWebのための構造化マークアップ

サイト名URL
構造化データテストツールhttps://developers.google.com/structured-data/testing-tool/
Open Graph Debuggerhttps://developers.facebook.com/tools/debug/
Schema.orghttp://schema.org
Full Hierarchy - schema.orghttp://schema.org/docs/full.html

09 SNSのシェアボタンを設定する

サイト名URL
Facebookシェアの設定ページhttps://developers.facebook.com/docs/plugins/share-button?locale=ja_JP
Facebook いいね!の設定ページhttps://developers.facebook.com/docs/plugins/like-button?locale=ja_JP
はてなブックマークの設定ページhttp://b.hatena.ne.jp/guide/bbutton
Twitterの設定ページhttps://about.twitter.com/ja/resources/buttons
LINEの設定ページhttps://media.line.me/howto/ja/

11 今から始めるWebアクセシビリティ

サイト名URL
総務省による「平成24年通信利用動向調査」http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h25/html/nc243110.html
実装チェックリストの例 2012年11月版http://waic.jp/docs/jis2010-test-guidelines/201211/icl-index.html
Markup Validation Servicehttp://validator.w3.org/
ミツエーリンクスhttp://www.mitsue.co.jp/
Technology Penetration Reporthttp://www.securityspace.com/s_survey/data/man.201312/techpen.html
WCAG 2.0http://www.jsa.or.jp/stdz/instac/commitee-acc/W3C-WCAG/WCAG20/
JIS X 8341-3:2010http://www.jisc.go.jp/app/pager?id=928280

Indexへ戻る