読者です 読者をやめる 読者になる 読者になる

ぺーぺーSEのブログ

備忘録・メモ用サイト。

HTML5の基本

今更だが、昨今フロントエンドの需要が高まってきたのでまとめだす。
また、こんな話もある。IE11のどっかから古いドキュメントモードが無くなって今までのWebページが見れなくなる(?)からやばいねって話。

Internet ExplorerIE特化アプリから一時的に日本を救ってくれたけど次回はもう助けてくれないよという警告
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とCSSJavaScriptを張り付けたら即結果を確認できる便利サイト
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="#">リンク1</a></li>
        <li><a href="#">リンク2</a></li>
        <li><a href="#">リンク3</a></li>
      </ul>
    </nav>
    <section>
      <h1>セクション1</h1>
      <p>sectionは、章・節のような見出しと概要を伴う一般的なセクションを表す要素です。</p>
      <article>
        <h1>記事1の大見出し</h1>
        <p>articleは自己完結したセクション要素です。</p>
        <h2>記事1の中見出し</h2>
        <p>いろいろ書こう!</p>
      </article>
      <article>
        <h1>記事2</h1>
        <p>いろいろ文章を書こう!</p>
      </article>
    </section>
    <footer>
      <h1>フッタ</h1>
    </footer>
  </body>
</html>

「<!DOCTYPE html>」「」についてはHTML5を使用する際の定型文と思ってよい。
「」内にはメタ情報やスタイルシートスクリプト等の参照を記載する。
「」はブラウザに表示される文書構造であり、上記サンプルの文書構成は以下の通り。

  • ヘッダ header
    • 大見出し h1
    • 段落 p
    • ヘッダーメニュー ul, li
  • ナビ nav
    • 大見出し h1
    • ナビゲーションメニュー ul, li
  • セクション section
    • 記事1 article
      • 大見出し h1
      • 段落 p
      • 中見出し h2
      • 段落 p
    • 記事2 article
      • 大見出し h1
      • 段落 p
  • フッタ 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つのテクノロジーが定義されている。

  • セマンティックス
    • HTML5マークアップ
    • RDFa(※)、マイクロデータ(※)、マイクロフォーマット(※)も含む。
  • オフラインとストレージ
    • オフライン機能やストレージ系のAPI
    • App Cache、Web Storage、Indexed Database API、File API
  • デバイスアクセス
    • デバイス内臓カメラやGPSのような機能にアクセスできるAPI
    • Geolocation API、マイク・カメラ、アドレス帳・カレンダー、端末の向き。
  • コネクティビティ(接続性)
    • 通信系API
    • WebSocket、Server-Sent Events。
  • マルチメディア
    • 動画や音声といったメルチメディアの機能、API
    • マークアップでいうaudio, video要素。
  • 3D、グラフィックス・エフェクト
    • グラフィックやエフェクト。
    • SVG(※)、canvas要素、WebGL(※)、CSS3 3D等。
  • パフォーマンス
  • CSS3
    • WebページやUIのスタイリング。
    • WOFF(※)も含む。

上記のようにテクノロジーが定義されているが、以下の3つで実現できる。

  • HTML5マークアップ
    • HTMLタグのこと。DOM。
    • 文書構造を定義する役割。スタイルではない。
  • CSS3
    • HTMLタグで定義された構造に対してスタイルを定義する。
  • JavaScript
    • 8つのテクノロジーで「API」とついているものはJavaScriptの機能・APIとして提供される。
    • これまでFlash等のブラウザプラグインに頼った機能を上記APIを使用することでJavaScriptで実現できる。

次節以降、「HTML5マークアップ)」「CSS3」「JavaScript」に分けて述べる。

(※)本節で出た用語


HTML5マークアップ

HTMLの要素として以下が定義されている。

コンテンツ・モデル

HTML5の要素・タグは、コンテンツ・モデルというグループに分類される。
コンテンツ・モデルは、その要素・タグの中に入れても良いものを定義する。
HTML5マークアップする際には、このコンテンツ・モデルを意識する必要がある。
http://www.html5.jp/tag/models/index.html

コンテンツの種類
  • メタデータ・コンテンツ
    • 主にhead要素内に記述される文書のメタ情報を表す要素
      • base、command、link、meta、noscript、script、style、title
  • フロー・コンテンツ
    • コンテンツとして表示されるほぼ全ての要素
      • 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、abbr、area(map要素の子孫の場合)、audio、b、bdi、bdo、br、button、canvas、cite、code、command、datalist、del、dfn、em、embed、i、iframe、img、input、ins、kbd、keygen、label、map、mark、math、meter、noscript、object、output、progress、q、ruby、s、samp、script、select、small、span、strong、sub、sup、svg、textarea、time、u、var、video、wbr
  • エンベッディッド・コンテンツ
    • 画像・音声・動画などの外部ファイルを埋め込むための要素
      • audio、canvas、embed、iframe、img、math、object、svg、video
  • インタラクティブ・コンテンツ
    • ハイパーリンクやフォームなどのユーザが操作できる要素
      • 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

CSS3

長いので↓にまとめる。

JavaScript

【オフラインとストレージ】オフライン機能やストレージ系のAPI


【デバイスアクセス】デバイス内臓カメラやGPSのような機能にアクセスできるAPI
【コネクティビティ(接続性)】通信系API


【マルチメディア】動画や音声といったメルチメディアの機能、API

HTML5では、video要素、audio要素をJavaScriptから操作するためのメソッド・プロパティ・イベントが用意されている。

【3D、グラフィックス・エフェクト】

HTMLの要素とJavaScriptを組み合わせて図形を描画できる。
参考
http://www.htmq.com/canvas/001.shtml

【パフォーマンス】バックグラウンドで処理を行う機能、API


HTML5API、および、関連仕様

http://www.htmq.com/api/

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