HTML5の基本
今更だが、昨今フロントエンドの需要が高まってきたのでまとめだす。
また、こんな話もある。IE11のどっかから古いドキュメントモードが無くなって今までのWebページが見れなくなる（？）からやばいねって話。
Internet ExplorerはIE特化アプリから一時的に日本を救ってくれたけど次回はもう助けてくれないよという警告
http://www.slideshare.net/kawada_hiroshi/internet-explorerie
↓
(IE11対応版)業務システム向けWeb開発ガイドライン
http://furoshiki.hatenadiary.jp/entry/guideline
ここではHTML5とCSS3（もはや普通のCSS）の超基本のみ。
最初から沢山は覚えられないので。そもそも筆者はHTMLもCSSもよくわかってない。
HTML5（公式）
http://www.w3.org/TR/html51/
HTML5とCSS3のタグリファレンス
http://heo.jp/html5css3/
HTMLとCSSとJavaScriptを張り付けたら即結果を確認できる便利サイト
http://jsfiddle.net/
HTML/CSS/JS Editor
http://www.ideaxidea.com/archives/2013/12/224bytes_editor.html
サンプルで雰囲気をつかむ
まずはビデオやらオーディオやらは無視して、HTML4.1までできていたことをHTML5でできれば。
下記の見栄えを目指して作成してみる。
上記をHTML5タグだけで表現すると下記の通り。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>HTML5 Basic Sample</title> </head> <body> <header> <h1>ヘッダ</h1> <p>リンクとか書ける</p> <ul> <li><a href="#">Home</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> </ul> </header> <nav> <h1>ナビ</h1> <ul> <li><a href="#">リンク１</a></li> <li><a href="#">リンク２</a></li> <li><a href="#">リンク３</a></li> </ul> </nav> <section> <h1>セクション１</h1> <p>sectionは、章・節のような見出しと概要を伴う一般的なセクションを表す要素です。</p> <article> <h1>記事１の大見出し</h1> <p>articleは自己完結したセクション要素です。</p> <h2>記事１の中見出し</h2> <p>いろいろ書こう！</p> </article> <article> <h1>記事２</h1> <p>いろいろ文章を書こう！</p> </article> </section> <footer> <h1>フッタ</h1> </footer> </body> </html>
「<!DOCTYPE html>」「」についてはHTML5を使用する際の定型文と思ってよい。
「
「」はブラウザに表示される文書構造であり、上記サンプルの文書構成は以下の通り。
- ヘッダ header
- 大見出し h1
- 段落 p
- ヘッダーメニュー ul, li
- ナビ nav
- 大見出し h1
- ナビゲーションメニュー ul, li
- セクション section
- 記事１ article
- 大見出し h1
- 段落 p
- 中見出し h2
- 段落 p
- 記事２ article
- 大見出し h1
- 段落 p
- 記事１ article
- フッタ footer
これをブラウザで表示すると下記の通り。
全然目標と違うじゃないか。h1よりh2のほうが文字でかいし。
後述するが、HTMLタグはドキュメントの構造を定義するだけ。
見栄えを定義するのにCSSを使用する。
body { width:960px; margin:20px auto; } header, nav, section, footer { display:block; border:1px solid #ccc; margin:5px; padding:20px; } header { text-align:center; padding:30px; } header ul, header li { list-style-type:none; display:inline; } nav { float:left; width:236px; } section { float:right; width:620px; } footer { clear:both !important; text-align: center; }
上記のCSSを反映させると以下の通り。
※cssを読み込むためにhtmlのheadタグ内に「」をつける。
だいぶよくなった。相変わらず、h1よりh2のがでかいけど。
HTML5の概要
HTML5では以下の8つのテクノロジーが定義されている。
- セマンティックス
- オフラインとストレージ
- オフライン機能やストレージ系のAPI。
- App Cache、Web Storage、Indexed Database API、File API。
- デバイスアクセス
- コネクティビティ（接続性）
- 通信系API。
- WebSocket、Server-Sent Events。
- マルチメディア
- 3D、グラフィックス・エフェクト
- パフォーマンス
- バックグラウンドで処理を行う機能、API。
- Web Workers、XMLHttpRequest Level 2。
- CSS3
- WebページやUIのスタイリング。
- WOFF（※）も含む。
上記のようにテクノロジーが定義されているが、以下の3つで実現できる。
- HTML5（マークアップ）
- HTMLタグのこと。DOM。
- 文書構造を定義する役割。スタイルではない。
- CSS3
- HTMLタグで定義された構造に対してスタイルを定義する。
- JavaScript
- 8つのテクノロジーで「API」とついているものはJavaScriptの機能・APIとして提供される。
- これまでFlash等のブラウザプラグインに頼った機能を上記APIを使用することでJavaScriptで実現できる。
次節以降、「HTML5（マークアップ）」「CSS3」「JavaScript」に分けて述べる。
（※）本節で出た用語
- RDFa、マイクロデータ、マイクロフォーマット
- 特定のタイプの情報（レビュー、人物、イベントなど）を記載しているコンテンツにラベルを付ける方法。
- SVG（Scalable Vector Graphics）
- WebGL
- ウェブブラウザで3次元コンピュータグラフィックスを表示させるための標準仕様。
- WOFF
- Webページでの表示に用いることを想定して開発された、フォントファイルの形式の一つ。
HTML5（マークアップ）
HTMLの要素として以下が定義されている。
コンテンツ・モデル
HTML5の要素・タグは、コンテンツ・モデルというグループに分類される。
コンテンツ・モデルは、その要素・タグの中に入れても良いものを定義する。
HTML5をマークアップする際には、このコンテンツ・モデルを意識する必要がある。
http://www.html5.jp/tag/models/index.html
コンテンツの種類
- メタデータ・コンテンツ
- 主にhead要素内に記述される文書のメタ情報を表す要素
- base、command、link、meta、noscript、script、style、title
- 主にhead要素内に記述される文書のメタ情報を表す要素
- フロー・コンテンツ
- コンテンツとして表示されるほぼ全ての要素
- a、abbr、address、area(map要素の子孫の場合)、article、aside、audio、b、bdi、bdo、blockquote、br、button、canvas、cite、code、command、datalist、del、details、dfn、dialog、div、dl、em、embed、fieldset、figure、footer、form、h1、h2、h3、h4、h5、h6、header、hgroup、hr、i、iframe、img、input、ins、kbd、keygen、label、map、mark、math、menu、meter、nav、noscript、object、ol、output、p、pre、progress、q、ruby、s、samp、script、section、select、small、span、strong、style(scoped属性が存在する場合)、sub、sup、svg、table、textarea、time、u、ul、var、video、wbr
- コンテンツとして表示されるほぼ全ての要素
- セクショニング・コンテンツ
- 見出しや概要、章・節を構成する要素
- article、aside、nav、section
- 見出しや概要、章・節を構成する要素
- ヘッディング・コンテンツ
- セクショニング・コンテンツ内の見出しとなる要素
- h1、h2、h3、h4、h5、h6、hgroup
- セクショニング・コンテンツ内の見出しとなる要素
- フレージング・コンテンツ
- エンベッディッド・コンテンツ
- インタラクティブ・コンテンツ
- ハイパーリンクやフォームなどのユーザが操作できる要素
- a、audio(controls属性が存在する場合)、button、details、embed、iframe、img(usemap属性が存在する場合)、input(type属性がhidden状態でない場合)、keygen、label、menu(type属性がtoolbar状態の場合)、object(usemap属性が存在する場合)、select、textarea、video(controls属性が存在する場合)
- ハイパーリンクやフォームなどのユーザが操作できる要素
グローバル属性
すべての要素・タグで共通に使える属性をグローバル属性と呼ぶ。
class属性やid属性などを指す。
http://www.html5.jp/tag/attributes/index.html
JavaScript
【オフラインとストレージ】オフライン機能やストレージ系のAPI
- Offline Web Applications
- HTML, CSS, JavaScript, 画像等のファイルをパソコンや端末側にキャッシュさせておき、ネットに接続されていないオフライン状態でも、Web アプリケーションの実行を可能にする
- AppCache、ApplicationCache
- ユーザーのローカル環境（ブラウザ）にデータをキャッシュするためのAPI
- Web Storage
- ユーザーのローカル環境（ブラウザ）にデータを保存するためのAPI
- Indexed Database API
- Web Storageと異なり、トランザクション機能、インデックス機能等が提供されているAPI
- File API、ドラッグ＆ドロップ、Clipboard API and events
【コネクティビティ（接続性）】通信系API
- The WebSocket AP
- ウェブ ブラウザとサーバー間に「ソケット」接続を確立する API
- Server-Sent Events
- サーバから必要に応じて情報が送られてくるようなPUSH送信を実現したい―そうした要望に応えるAPI
【マルチメディア】動画や音声といったメルチメディアの機能、API
HTML5では、video要素、audio要素をJavaScriptから操作するためのメソッド・プロパティ・イベントが用意されている。
【3D、グラフィックス・エフェクト】
HTMLの
【パフォーマンス】バックグラウンドで処理を行う機能、API
- Web Workers
- XMLHttpRequest Level 2
HTML5、CSS3のサポート状況と対策
下記でHTML5、CSS3のサポート状況を確認できる。
http://fmbip.com/litmus/
→ちょい古い？
http://caniuse.com/
HTML5はIE8以下で非対応の対策
https://code.google.com/p/html5shiv/
HTML5準拠ページの作成
http://html5--css3.com/creates
広義の意味でのHTML5で役立ちそうなリンク
HTML5
HTML5Experts.jp
http://html5experts.jp/
html5j.org
http://www.html5j.org/
美しいWebサイトはDOM構造も奇麗なはず！「DomTree」
http://www.moongift.jp/2013/04/20130415-16/
HTML5とか勉強会でテストについて話しました。
http://teppeis.hatenablog.com/entry/2013/04/30/html5-study
制作会社を頼らず無料のホームページ作成ツール14個
http://websae.net/websitebuilder_20130507/
3年間かけて培ったWebシステム開発におけるHTML/CSSコーディングまとめ(方針編)
http://techracho.bpsinc.jp/kazumasa-ogawa/2013_05_10/8264
世の中のHTML5アプリケーションが糞だから、俺が「初期化」の作り方を教えてやんよ
http://mizchi.hatenablog.com/entry/2013/09/25/190313
Web制作会社に飛び込んだ新入社員にとりあえず読ませたいスライドまとめ21個
http://w3q.jp/t/3735
ワンランク上のHTMLコーディングを行うための18のポイント
http://sogitani.baigie.me/2013/11/html_step_up/
HTML5特集
http://dev.classmethod.jp/referencecat/html-5/
HTML5 Conference 2013 講演資料まとめ #html5j
http://unsolublesugar.com/20131201/142209/
Advent Calendar 3日目:SVG画像を1バイトでも削るためのコードゴルフ
http://d.hatena.ne.jp/rikuo/20131203
ブログを書くまでがHTML5 Conference 2013
http://blog.h13i32maru.jp/entry/2013/12/09/110029
HTML5 Web Message のイントロダクション
http://please-sleep.cou929.nu/introduction-to-web-messaging.html
HTML5時代の「新しいセキュリティ・エチケット」（2）：
単純ではない、最新「クロスサイトスクリプティング」事情 (1/3)
http://www.atmarkit.co.jp/ait/articles/1312/17/news010.html
JSR 356―Java標準のWebSocket API
http://www.coppermine.jp/docs/programming/2013/12/jsr356-fundamental.html
俺のWeb Workersがこんなに遅いわけがない
http://lab.sonicmoov.com/development/web-workers/
CSS
IE8以上ならもうスクリプト無しでOKのモーダルウインドウを表示するスタイルシート -CSS Modal
http://coliss.com/articles/build-websites/operation/css/pure-css-modal.html
ぼくのかんがえたさいきょうのしーえしゅえしゅ
http://t32k.me/mol/log/the-perfect-css-i-thought/
※CSSです。。。
今日から使える！ Sass/compass ゆるめ勉強会
http://www.slideshare.net/yuka2py/sasscompass-28389532
CSSポストプロセッサー時代の到来
http://hail2u.net/documents/css-postprocessor-era.html
JavaScript、フロントエンド
とりあえずJavaScriptを記述して動作を確認したいって時はFirefoxに搭載のスクラッチパッドが断然便利
http://wp.yat-net.com/?p=3648
リアルタイムWebを構築しやすくする「Socket.IO」とは
http://codezine.jp/article/detail/7075
JavaScript で File API を使用してファイルを読み取る
http://www.html5rocks.com/ja/tutorials/file/dndfiles/#toc-monitoring-progress
フロントエンドJavaScriptにおける設計とテスト
http://hokaccha.github.io/slides/javascript_design_and_test/#page1
JavaScriptのテストを開発工数に入れてもらうには？
http://www.atmarkit.co.jp/ait/articles/1305/08/news015.html
今さら聞けない! ビギナーのためのJavaScript講座
http://news.mynavi.jp/column/js4g/004/index.html
JSONを編集、整形出来る・「JSONmate」
http://kachibito.net/useful-resource/jsonmate
社内研修「JavaScript基礎」の資料を公開します！
http://alpha.mixi.co.jp/2013/11844/
最強オブジェクト指向言語 JavaScript 再入門！
http://www.slideshare.net/yuka2py/javascript-23768378?from_search=2
JavaScriptで要素を検索せずに取得する方法があります。（JavaScriptおれおれAdvent Calendar 2013 – 03日目）
http://ginpen.com/2013/12/03/find-elements-without-finding/
ノンプログラマーのためのjQuery入門
http://www.slideshare.net/hayatomizuno/jquery-7665168?from_search=4
Qrefy - jQuery日本語リファレンス
http://s3pw.com/qrefy/
画像スライドショーでjQueryプラグインの基本を学ぶ
http://www.atmarkit.co.jp/ait/articles/1304/19/news071.html
年末までにjQueryをマスターしたい人必見！導入マニュアル＋すぐ使える厳選プラグイン
http://www.find-job.net/startup/jquery-plugin
新・三大JavaScriptフレームワークの実践(Backbone.js Knockout.js Angular.js)
http://qiita.com/icoxfog417/items/3c68e1a4de7121658e29
BackboneマンがAngular勉強会いってきたけどそんなに好きになれなかった話 #ng_jp
http://mizchi.hatenablog.com/entry/2013/12/04/124006
BACKBONE.JSによるWebアプリケーション開発について
http://www.slideshare.net/itokami1123/01-backbone
AngularJS 日本語マニュアル
http://angular-js.net/
AngularJS 20min
https://speakerdeck.com/naoya/angularjs-20min-number-ng-jp
AngularJS 勉強会 #4 - 実戦！AngularJS
https://speakerdeck.com/sakatam/angularjs-mian-qiang-hui-number-4-shi-zhan-angularjs
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
http://www.slideshare.net/mitsuruogawa33/webjava
「HTML5時代のWebアプリとJavaが融合するための3つの議論」もう少し細かく説明
http://furoshiki.hatenadiary.jp/entry/2013/11/10/182957
Introduction for Browser Side MVC
http://www.slideshare.net/slideshow/view?login=tricknotes&title=introduction-for-browser-side-mvc
AngularJSのご紹介
https://speakerdeck.com/tmaedax/angularjsfalsegoshao-jie
AngularJS 勉強会のまとめ (動画・スライド) #ng_jp
http://www.engineyard.co.jp/blog/2013/angularjs-meetup-4th/
javascriptのバインディングフレームワーク「angularjs」の学習
http://m-shige1979.hatenablog.com/entry/2013/12/03/233434
AngularJS 日本語リファレンス | js STUDIO
http://js.studio-kingdom.com/angularjs
3分で分かるAngularJSセキュリティ
http://teppeis.hatenablog.com/entry/2013/12/angularjs-security
AngularJSを使っている理由
http://d.hatena.ne.jp/Kazzz/20131208/p1
俺流BackboneラーメンとPhalanxのはなし
http://havelog.ayumusato.com/develop/javascript/e573-phalanx.html
AngularJSを本気でつかうためのtips
http://blog.64p.org/entry/2013/12/10/155533
あるフロントエンドエンジニアの1日
http://layzie.hatenablog.com/entry/20131214/1387089458
Yeoman入門(第一部、yoを使う)
http://yosuke-furukawa.hatenablog.com/entry/2013/07/04/085814
AngularJSでゲームをつくる「艦隊くりっかー」
http://b.denkizakana.com/2013/12/angularjs.html
jsでTDD！MochaとChaiとsinon.js入門
http://lxyuma.hatenablog.com/entry/2013/12/15/211637
HTML5とCSS3の実用的なテクニックが丁寧に丁寧に解説されたウェブ制作に真剣に取り組みたい人にオススメの本 -HTML/CSS デザインの教科書
http://coliss.com/articles/book-review/isbn10-4797373024.html
お前のAngular.jsはもうMVCではない。と言われないためのTutorial
http://qiita.com/icoxfog417/items/2ac773c33a8b34288551
AngularJS コードの構造化
http://dev.classmethod.jp/client-side/javascript/angularjs12xstartup/
AngularJS Hub
http://www.angularjshub.com/
60fpsのサイトパフォーマンスを目指す
http://wazanova.jp/items/822
すごい便利になった！javascript入門の基礎知識と小技まとめ
http://commte.net/blog/archives/3996
BackboneとAngularを比較する
http://www.infoq.com/jp/articles/backbone-vs-angular
Compat Inspector - ソースコードからIE独自機能を機械的に検出しWeb標準へ置き換えさせる方法
http://furoshiki.hatenadiary.jp/entry/2014/01/06/030742
効率的に学べた！Webデザインを「職種別」に基礎から勉強出来る総まとめ
http://commte.net/blog/archives/4015
Angular.jsで組む場合のアーキテクチャは、MVCじゃなくてMVVMの方が良いっぽいと思った話
http://d.hatena.ne.jp/anatoo/20140110/1389296912
AngularJSをはじめる前に#AngularJS入門その1
http://dev.classmethod.jp/client-side/javascript/angularjs-1/
The HTML 5 JavaScript API Index
http://html5index.org/
HTML5で実現できる！環境光に合わせたレスポンシブなUI
http://html5experts.jp/girlie_mac/4558/
HTML&CSS フロントエンド 何度も読み直したい資料・ツールまとめ
http://morizyun.github.io/blog/css3-html-front-coding-book-review/
優れたユーザーインタフェース（UI）を実現するために確認しておきたい36項目
http://gori.me/design/45657
シリーズAngularJS入門
http://dev.classmethod.jp/series/angularjs%E5%85%A5%E9%96%80/
Angular, Ember, Backbone：どのJavaScriptフレームワークを選ぶべきか？
http://readwrite.jp/archives/5008
